dca5e54811
* ui: kai ui thing ui: fixes for picking existing chat, feedback and retry buttons ui: connect finding, creating threads ui: more ui tuning for chat window, socket manager ui: get/delete chats logic, create testing socket ui: testing ui: use on click query ui: minor fixed for chat display, rebase ui: start kai thing * ui: add logs, add threadid * ui: feedback methods and ui * ui: store, replacing messages and giving feedback * ui: move retry btn to right corner * ui: move kai service out for ease of code splitting * ui: add thread id to socket connection * ui: support state messages * ui: cancel response generation method * ui: fix toast str * ui: add gfm plugin * ui: ensure md table has max sizes to prevent overflow * ui: revert tailwind styles on markdown block layer * ui: export as pdf, copy text contents of a message * ui: try to save text with formatting in secure contexts * ui: fix types * ui: fixup dark mode colors * ui: add duration for msgs * ui: take out custom jwt * ui: removing hardcode... * ui: change endpoints to prod * ui: swap socket path * ui: flip vis toggle * ui: lock file regenerate
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import { Button, Input } from "antd";
|
|
import { SendHorizonal, OctagonX } from "lucide-react";
|
|
import { kaiStore } from "../KaiStore";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
function ChatInput({ isLoading, onSubmit, threadId }: { isLoading?: boolean, onSubmit: (str: string) => void, threadId: string }) {
|
|
const inputRef = React.useRef<Input>(null);
|
|
const inputValue = kaiStore.queryText;
|
|
const isProcessing = kaiStore.processingStage !== null
|
|
const setInputValue = (text: string) => {
|
|
kaiStore.setQueryText(text)
|
|
}
|
|
|
|
const submit = () => {
|
|
if (isProcessing) {
|
|
const settings = { projectId: '2325', userId: '0', threadId, };
|
|
void kaiStore.cancelGeneration(settings)
|
|
} else {
|
|
if (inputValue.length > 0) {
|
|
onSubmit(inputValue)
|
|
setInputValue('')
|
|
}
|
|
}
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus()
|
|
}
|
|
}, [inputValue])
|
|
|
|
return (
|
|
<Input
|
|
onPressEnter={submit}
|
|
ref={inputRef}
|
|
placeholder={'Ask anything about your product and users...'}
|
|
size={'large'}
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
suffix={
|
|
<Button
|
|
loading={isLoading}
|
|
onClick={submit}
|
|
icon={isProcessing ? <OctagonX size={16} /> : <SendHorizonal size={16} />}
|
|
type={'text'}
|
|
size={'small'}
|
|
shape={'circle'}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default observer(ChatInput)
|