Merge pull request #6 from SkywardAI/wllama

Implement chat

Author: cbh778899

src/components/App.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { createBrowserRouter, Navigate, RouterProvider,  } from "react-router-dom";
-import Sidebar from "./Sidebar";
+import Sidebar from "./sidebar";
 import Chat from "./chat";
 import Settings from "./Settings";
 

src/components/Settings.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function Settings() {
     return (
         <div>

src/components/Sidebar.jsx

@@ -1,46 +1,86 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ConversationBubble from "./ConversationBubble";
-import { Send } from 'react-bootstrap-icons';
-
-async function getConversationByUid(uid) {
-    return [
-        { role: "user", content: "Hello!" },
-        { role: "assistant", content: "Hi, how can I help you today?" }
-    ]
-}
+import { Send, StopCircleFill } from 'react-bootstrap-icons';
+import useIDB from "../../utils/idb";
+import { abortCompletion, chatCompletions, isModelLoaded, loadModel } from '../../utils/worker'
 
 export default function Conversation({ uid }) {
 
     const [conversation, setConversation] = useState([]);
     const [message, setMessage] = useState('');
+    const [pending_message, setPendingMessage] = useState('');
+    const [hide_pending, setHidePending] = useState(true);
+    const idb = useIDB();
 
     const bubblesRef = useRef();
 
+    async function getConversationByUid() {
+        setConversation(
+            await idb.getAll(
+                'messages', 
+                { 
+                    where: [{'history-uid': uid}],
+                    select: ['role', 'content']
+                }
+            )
+        );
+    }
+
     function messageOnChange(evt) {
         setMessage(evt.target.value);
     }
 
-    function sendMessage(evt) {
+    async function sendMessage(evt) {
         evt.preventDefault();
-        if(!message) return;
-        setConversation([...conversation, {role: 'user', content: message}])
+        if(!message || !hide_pending) return;
+        
+        idb.insert('messages', {
+            'history-uid': uid,
+            role: 'user',
+            content: message,
+            createdAt: Date.now()
+        })
+        const user_msg = {role: 'user', content: message}
+        setConversation([...conversation, user_msg])
         setMessage('');
+        setHidePending(false);
+
+        if(!isModelLoaded()) {
+            await loadModel();
+        }
+        await chatCompletions([user_msg], 
+            (text, isFinished) => {
+                if(!isFinished) {
+                    setPendingMessage(text);
+                } else {
+                    setPendingMessage('');
+                    setConversation([
+                        ...conversation, user_msg,
+                        { role: 'assistant', content: text }
+                    ])
+                    idb.insert('messages', {
+                        'history-uid': uid,
+                        role: 'assistant',
+                        content: text,
+                        createdAt: Date.now()
+                    })
+                    setHidePending(true);
+                }
+            }
+        )
     }
 
     useEffect(()=>{
-        if(uid) {
-            (async function() {
-                setConversation(await getConversationByUid(uid));
-            })();
-        }
+        uid && getConversationByUid();
+    // eslint-disable-next-line
     }, [uid]);
 
     useEffect(()=>{
         bubblesRef.current && bubblesRef.current.scrollTo({
             behavior: "smooth",
             top: bubblesRef.current.scrollHeight
         })
-    }, [conversation])
+    }, [conversation, pending_message])
 
     return (
         <div className="conversation-main">
@@ -56,12 +96,20 @@ export default function Conversation({ uid }) {
                                 />
                             )
                         }) }
+                        <ConversationBubble
+                            role={'assistant'} content={pending_message}
+                            hidden={hide_pending}
+                        />
                     </div>
                     <form className="send-message-form" onSubmit={sendMessage}>
                         <input type="text" value={message} onChange={messageOnChange}/>
                         <div className="send-message-button-container">
-                            <Send className="button-icon" />
-                            <input type='submit' className="clickable"/>
+                            { 
+                                hide_pending ? 
+                                <Send className="button-icon" /> :
+                                <StopCircleFill className="button-icon stop clickable" onClick={abortCompletion} />
+                            }
+                            <input type='submit' className={`clickable${!hide_pending?" disabled":''}`}/>
                         </div>
                     </form>
                 </> :

src/components/chat/Conversation.jsx

@@ -1,9 +1,18 @@
-import React from "react";
+import { CircleFill } from "react-bootstrap-icons"
+import Markdown from "react-markdown"
 
-export default function ConversationBubble({role, content}) {
+export default function ConversationBubble({role, content, hidden}) {
     return (
-        <div className={`bubble ${role}`}>
-            { content }
+        <div className={`bubble ${role}${hidden?' hidden':""}`}>
+            {
+                content ?
+                <Markdown>{ content }</Markdown> :
+                <>
+                <CircleFill className="dot-animation" />
+                <CircleFill className="dot-animation" />
+                <CircleFill className="dot-animation" />
+                </>
+            }
         </div>
     )
 }

src/components/chat/ConversationBubble.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function Ticket({ title, uid, selectChat, is_selected }) {
     return (
         <div 

src/components/chat/Ticket.jsx

@@ -1,16 +1,49 @@
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import Ticket from "./Ticket";
+import useIDB from "../../utils/idb";
+import { genRandomID } from "../../utils/tools";
 
 export default function Tickets({selectChat, current_chat}) {
 
-    const [tickets, setTickets] = useState([
-        {title: "Hello!", uid: Math.random().toString(32).slice(2)},
-        {title: "Hello!", uid: Math.random().toString(32).slice(2)},
-        {title: "Hello!", uid: Math.random().toString(32).slice(2)}
-    ]);
+    const [tickets, setTickets] = useState([]);
+    const idb = useIDB();
+
+    async function syncHistory() {
+        setTickets(await idb.getAll('chat-history'))
+    }
+
+    async function startNewConversation() {
+        const timestamp = Date.now();
+        const conv_id = await idb.insert("chat-history", 
+            {
+                title: 'New Conversation',
+                createdAt: timestamp,
+                updatedAt: timestamp,
+                uid: genRandomID()
+            }
+        )
+        const new_conv_info = await idb.getById('chat-history', conv_id);
+        new_conv_info &&
+        setTickets([
+            ...tickets,
+            new_conv_info
+        ])
+        selectChat(new_conv_info.uid)
+    }
+
+    useEffect(()=>{
+        syncHistory()
+    // eslint-disable-next-line
+    }, [])
 
     return (
         <div className="tickets">
+            <div 
+                className="new-conversation clickable"
+                onClick={startNewConversation}
+            >
+                <div>Start New Chat</div>
+            </div>
             { tickets.map(elem => {
                 const { title, uid } = elem;
                 return (

src/components/chat/Tickets.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import Tickets from "./Tickets";
 import Conversation from "./Conversation";
 

src/components/chat/index.jsx

@@ -0,0 +1,10 @@
+import { Link } from "react-router-dom"
+
+export default function SidebarIcon({to, children, pathname}) {
+
+    return (
+        <Link to={to} className={`item${pathname===to?' selected':''}`}>
+            { children }
+        </Link>
+    )
+}

src/components/sidebar/SidebarIcons.jsx

@@ -0,0 +1,23 @@
+import { Outlet, useLocation } from "react-router-dom";
+import { Chat, Gear } from "react-bootstrap-icons";
+import SidebarIcon from "./SidebarIcons";
+
+export default function Sidebar() {
+    const { pathname } = useLocation();
+
+    return (
+        <div className="main">
+            <div className="app-sidebar">
+                <div className="section">
+                    <SidebarIcon to={'/chat'} pathname={pathname}><Chat/></SidebarIcon>
+                </div>
+                <div className="section bottom">
+                    <SidebarIcon to={'/settings'} pathname={pathname}><Gear/></SidebarIcon>
+                </div>
+            </div>
+            <div className="window">
+                <Outlet />
+            </div>
+        </div>
+    )
+}