|
| 1 | +import { PaperAirplaneIcon } from '@heroicons/react/24/solid'; |
| 2 | +import { useAtomValue, useSetAtom } from 'jotai'; |
| 3 | +import { useEffect, useRef, useState } from 'react'; |
| 4 | +import { litlyticsAtom, pipelineAtom } from '~/store/store'; |
| 5 | +import { Button } from '../catalyst/button'; |
| 6 | +import { Input } from '../catalyst/input'; |
| 7 | +import { CustomMarkdown } from '../markdown/Markdown'; |
| 8 | +import { Spinner } from '../Spinner'; |
| 9 | +import { askAgent } from './logic/askAgent'; |
| 10 | +import { type Message } from './logic/types'; |
| 11 | + |
| 12 | +function MessageRender({ message }: { message: Message }) { |
| 13 | + if (message.from === 'user') { |
| 14 | + return ( |
| 15 | + <div className="bg-neutral-100 dark:bg-neutral-900 p-2 rounded-xl w-fit self-end"> |
| 16 | + {message.text} |
| 17 | + </div> |
| 18 | + ); |
| 19 | + } |
| 20 | + |
| 21 | + return ( |
| 22 | + <div className="flex gap-3"> |
| 23 | + <div className="w-fit"> |
| 24 | + <span className="rounded-full border p-1 border-neutral-300 dark:border-neutral-700"> |
| 25 | + 🔥 |
| 26 | + </span> |
| 27 | + </div> |
| 28 | + <div className="flex flex-1"> |
| 29 | + <div className="prose dark:prose-invert"> |
| 30 | + <CustomMarkdown>{message.text}</CustomMarkdown> |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + </div> |
| 34 | + ); |
| 35 | +} |
| 36 | + |
| 37 | +export function Chat() { |
| 38 | + const messageBoxRef = useRef<HTMLDivElement>(null); |
| 39 | + const litlytics = useAtomValue(litlyticsAtom); |
| 40 | + const setPipeline = useSetAtom(pipelineAtom); |
| 41 | + const [input, setInput] = useState<string>(''); |
| 42 | + const [messages, setMessages] = useState<Message[]>([ |
| 43 | + { |
| 44 | + id: '0', |
| 45 | + from: 'assistant', |
| 46 | + text: `Hi! I'm Lit. Ask me to do anything for you.`, |
| 47 | + }, |
| 48 | + ]); |
| 49 | + const [loading, setLoading] = useState<boolean>(false); |
| 50 | + const [error, setError] = useState<Error | undefined>(); |
| 51 | + |
| 52 | + useEffect(() => { |
| 53 | + // scroll to bottom |
| 54 | + if (messageBoxRef.current) { |
| 55 | + messageBoxRef.current.scrollTo({ |
| 56 | + top: messageBoxRef.current.scrollHeight, |
| 57 | + behavior: 'smooth', |
| 58 | + }); |
| 59 | + } |
| 60 | + }, [messages]); |
| 61 | + |
| 62 | + const sendMessage = async () => { |
| 63 | + const inputMessage = input.trim(); |
| 64 | + // do nothing if there's no user message |
| 65 | + if (!inputMessage.length) { |
| 66 | + return; |
| 67 | + } |
| 68 | + // reset input |
| 69 | + setInput(''); |
| 70 | + // reset error |
| 71 | + setError(undefined); |
| 72 | + // append user message to messages |
| 73 | + const messagesWithUser: Message[] = [ |
| 74 | + ...messages, |
| 75 | + { |
| 76 | + id: String(messages.length), |
| 77 | + from: 'user', |
| 78 | + text: inputMessage, |
| 79 | + }, |
| 80 | + ]; |
| 81 | + setMessages(messagesWithUser); |
| 82 | + |
| 83 | + // show loading state |
| 84 | + setLoading(true); |
| 85 | + // run new messages through agent |
| 86 | + try { |
| 87 | + const newMessages = await askAgent({ |
| 88 | + messages: messagesWithUser, |
| 89 | + litlytics, |
| 90 | + setPipeline, |
| 91 | + }); |
| 92 | + setMessages(newMessages); |
| 93 | + } catch (err) { |
| 94 | + // catch and display error |
| 95 | + setError(err as Error); |
| 96 | + } |
| 97 | + // disable loading state |
| 98 | + setLoading(false); |
| 99 | + }; |
| 100 | + |
| 101 | + return ( |
| 102 | + <div className="flex flex-col w-full h-full"> |
| 103 | + <div |
| 104 | + ref={messageBoxRef} |
| 105 | + className="flex flex-1 flex-col gap-4 p-3 pt-20 max-h-screen overflow-auto" |
| 106 | + > |
| 107 | + {messages.map((m) => ( |
| 108 | + <MessageRender key={m.id} message={m} /> |
| 109 | + ))} |
| 110 | + {loading && ( |
| 111 | + <div className="flex items-center justify-end gap-2"> |
| 112 | + <Spinner className="h-5 w-5" /> Thinking... |
| 113 | + </div> |
| 114 | + )} |
| 115 | + {error && ( |
| 116 | + <div className="flex items-center justify-between bg-red-400 dark:bg-red-700 rounded-xl py-1 px-2 my-2"> |
| 117 | + Error while thinking: {error.message} |
| 118 | + </div> |
| 119 | + )} |
| 120 | + </div> |
| 121 | + <div className="flex items-center min-h-16 p-2"> |
| 122 | + <Input |
| 123 | + wrapperClassName="h-fit after:hidden sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500" |
| 124 | + className="rounded-r-none" |
| 125 | + placeholder="Ask Lit to do things for you" |
| 126 | + value={input} |
| 127 | + onChange={(e) => setInput(e.target.value)} |
| 128 | + onKeyDown={(e) => { |
| 129 | + if (e.key === 'Enter') { |
| 130 | + sendMessage(); |
| 131 | + } |
| 132 | + }} |
| 133 | + /> |
| 134 | + <Button |
| 135 | + className="h-9 rounded-l-none" |
| 136 | + title="Send" |
| 137 | + onClick={sendMessage} |
| 138 | + > |
| 139 | + <PaperAirplaneIcon /> |
| 140 | + </Button> |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + ); |
| 144 | +} |
0 commit comments