Spaces:
Configuration error
Configuration error
File size: 3,433 Bytes
b06ed0c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import { createSignal, For, Show } from 'solid-js'
import MessageItem from './MessageItem'
import IconClear from './icons/Clear'
import type { ChatMessage } from '../types'
export default () => {
let inputRef: HTMLInputElement
const [messageList, setMessageList] = createSignal<ChatMessage[]>([])
const [currentAssistantMessage, setCurrentAssistantMessage] = createSignal('')
const [loading, setLoading] = createSignal(false)
const handleButtonClick = async () => {
const inputValue = inputRef.value
if (!inputValue) {
return
}
setLoading(true)
// @ts-ignore
if (window?.umami) umami.trackEvent('chat_generate')
inputRef.value = ''
setMessageList([
...messageList(),
{
role: 'user',
content: inputValue,
},
])
const response = await fetch('/api/generate', {
method: 'POST',
body: JSON.stringify({
messages: messageList(),
}),
})
if (!response.ok) {
throw new Error(response.statusText)
}
const data = response.body
if (!data) {
throw new Error('No data')
}
const reader = data.getReader()
const decoder = new TextDecoder('utf-8')
let done = false
while (!done) {
const { value, done: readerDone } = await reader.read()
if (value) {
let char = decoder.decode(value)
if (char === '\n' && currentAssistantMessage().endsWith('\n')) {
continue
}
if (char) {
setCurrentAssistantMessage(currentAssistantMessage() + char)
}
}
done = readerDone
}
setMessageList([
...messageList(),
{
role: 'assistant',
content: currentAssistantMessage(),
},
])
setCurrentAssistantMessage('')
setLoading(false)
}
const clear = () => {
inputRef.value = ''
setMessageList([])
setCurrentAssistantMessage('')
}
return (
<div my-6>
<For each={messageList()}>{(message) => <MessageItem role={message.role} message={message.content} />}</For>
{ currentAssistantMessage() && <MessageItem role="assistant" message={currentAssistantMessage} /> }
<Show when={!loading()} fallback={() => <div class="h-12 my-4 flex items-center justify-center bg-slate bg-op-15 text-slate rounded-sm">AI is thinking...</div>}>
<div class="my-4 flex items-center gap-2">
<input
ref={inputRef!}
type="text"
id="input"
placeholder="Enter something..."
autocomplete='off'
autofocus
disabled={loading()}
onKeyDown={(e) => {
e.key === 'Enter' && !e.isComposing && handleButtonClick()
}}
w-full
px-4
h-12
text-slate
rounded-sm
bg-slate
bg-op-15
focus:bg-op-20
focus:ring-0
focus:outline-none
placeholder:text-slate-400
placeholder:op-30
/>
<button onClick={handleButtonClick} disabled={loading()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 text-slate rounded-sm>
Send
</button>
<button title='Clear' onClick={clear} disabled={loading()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 text-slate rounded-sm>
<IconClear />
</button>
</div>
</Show>
</div>
)
}
|