victor HF staff commited on
Commit
a3ae6ee
1 Parent(s): 1dc44c8

chat intro

Browse files
src/lib/chat/ChatBox.svelte ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let message;
3
+ </script>
4
+
5
+ {#if message.from === 'bot'}
6
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
7
+ <img
8
+ alt=""
9
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
10
+ class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
11
+ />
12
+ <div
13
+ class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
14
+ >
15
+ {message.content}
16
+ </div>
17
+ </div>
18
+ {/if}
19
+ {#if message.from === 'user'}
20
+ <div class="flex items-start justify-start gap-4">
21
+ <div class="mt-5 w-3 h-3 flex-none rounded-full" />
22
+ <div class="rounded-2xl px-5 py-3.5 text-gray-500">
23
+ {message.content}
24
+ </div>
25
+ </div>
26
+ {/if}
src/lib/chat/ChatIntroduction.svelte ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let title: string = '';
3
+ </script>
4
+
5
+ <div class="grid grid-cols-3 gap-3 my-auto">
6
+ <div class="col-span-3 text-center mb-10">
7
+ <h1 class="text-3xl font-bold mb-1.5">{title}</h1>
8
+ <p class="text-lg text-gray-500">Lorem ipsum dolor sit.</p>
9
+ </div>
10
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
11
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
12
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
13
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
14
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
15
+ <div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
16
+ </div>
src/routes/+page.svelte CHANGED
@@ -1,5 +1,7 @@
1
  <script lang="ts">
2
  import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 
3
  const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
4
 
5
  type Message =
@@ -12,28 +14,9 @@
12
  content: string;
13
  };
14
 
15
- let messages: Message[] = [
16
- {
17
- from: 'user',
18
- content: 'hello bot'
19
- },
20
- {
21
- from: 'bot',
22
- content: " Hello! I'm a conversational chatbot. What can I help you with today?<|endoftext|>"
23
- },
24
- {
25
- from: 'user',
26
- content: 'how are you?'
27
- },
28
- {
29
- from: 'bot',
30
- content: " I'm fine, thank you for asking. How are you?<|endoftext|>"
31
- }
32
- ];
33
  let message = '';
34
 
35
- $: console.log(messages);
36
-
37
  function onWrite() {
38
  messages = [...messages, { from: 'user', content: message }];
39
  message = '';
@@ -79,47 +62,30 @@
79
  </script>
80
 
81
  <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
82
- <nav class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gray-50">
 
 
83
  <div class="flex-none sticky top-0 relative p-3 flex flex-col">
84
  <button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
85
  </div>
86
  <div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
87
  {#each Array(5) as _}
88
- <a href="" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
89
  Amet consectetur adipisicing elit. Eos dolorum nihil alias.
90
  </a>
91
  {/each}
92
  </div>
93
  <div class="flex flex-col p-3 gap-2">
94
- <a href="" class="truncate py-3 px-3 rounded-lg mt-auto"> Appearance </a>
95
- <a href="" class="truncate py-3 px-3 rounded-lg"> Settings </a>
96
  </div>
97
  </nav>
98
  <div class="overflow-y-auto">
99
- <div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
100
- {#each messages as { from, content }}
101
- {#if from === 'bot'}
102
- <div class="flex items-start justify-start gap-4 leading-relaxed">
103
- <img
104
- alt=""
105
- src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
106
- class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
107
- />
108
- <div
109
- class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
110
- >
111
- {content}
112
- </div>
113
- </div>
114
- {/if}
115
- {#if from === 'user'}
116
- <div class="flex items-start justify-start gap-4">
117
- <div class="mt-5 w-3 h-3 flex-none rounded-full" />
118
- <div class="rounded-2xl px-5 py-3.5 text-gray-500">
119
- {content}
120
- </div>
121
- </div>
122
- {/if}
123
  {/each}
124
  <div class="h-32" />
125
  </div>
 
1
  <script lang="ts">
2
  import { fetchEventSource } from '@microsoft/fetch-event-source';
3
+ import ChatBox from '$lib/chat/Chatbox.svelte';
4
+ import ChatIntroduction from '$lib/chat/ChatIntroduction.svelte';
5
  const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
6
 
7
  type Message =
 
14
  content: string;
15
  };
16
 
17
+ let messages: Message[] = [];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  let message = '';
19
 
 
 
20
  function onWrite() {
21
  messages = [...messages, { from: 'user', content: message }];
22
  message = '';
 
62
  </script>
63
 
64
  <div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
65
+ <nav
66
+ class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50"
67
+ >
68
  <div class="flex-none sticky top-0 relative p-3 flex flex-col">
69
  <button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
70
  </div>
71
  <div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
72
  {#each Array(5) as _}
73
+ <a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
74
  Amet consectetur adipisicing elit. Eos dolorum nihil alias.
75
  </a>
76
  {/each}
77
  </div>
78
  <div class="flex flex-col p-3 gap-2">
79
+ <a href="/" class="truncate py-3 px-3 rounded-lg mt-auto"> Appearance </a>
80
+ <a href="/" class="truncate py-3 px-3 rounded-lg"> Settings </a>
81
  </div>
82
  </nav>
83
  <div class="overflow-y-auto">
84
+ <div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
85
+ {#each messages as message}
86
+ <ChatBox {message} />
87
+ {:else}
88
+ <ChatIntroduction title="Joi 20B Instruct" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  {/each}
90
  <div class="h-32" />
91
  </div>