[MLC-39] app: Add in message separator, cleanup types

mlx-chat · Mar 5, 2024 · 3f64254 · 3f64254
1 parent 136bf01
commit 3f64254
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 21 deletions.
diff --git a/app/main/main.ts b/app/main/main.ts
@@ -82,7 +82,6 @@ class ServerManager {
 
         this.serverProcess.stdout.on('data', async (data: Buffer) => {
           const output = data.toString('utf8');
-          console.log('Server output:', output);
 
           await new Promise((resolve) => setTimeout(resolve, 1000));
 
@@ -271,6 +270,9 @@ const createWindow = () => {
     if (openModal === 'directory') {
       return;
     }
+    if (win.webContents.isDevToolsOpened()) {
+      return;
+    }
     globalShortcut.unregister('Escape');
     globalShortcut.unregister('Cmd+Q');
     win.hide();
@@ -391,13 +393,6 @@ app.whenReady().then(() => {
     });
   });
 
-  ipcMain.on('start-server', (event: any, model: string) => {
-    event;
-    serverManager.start(model)
-      .then(() => console.log('Server started successfully'))
-      .catch(error => console.error('Error starting server:', error));
-  });
-
   ipcMain.on('resize-window', (event, arg) => {
     const win = BrowserWindow.fromWebContents(event.sender);
     if (!win) {

diff --git a/app/main/preload.ts b/app/main/preload.ts
@@ -14,7 +14,6 @@ export const electronAPI = {
       cb(customData);
     });
   },
-  startServer: (model: string) => ipcRenderer.send('start-server', model),
   resizeWindow: (height: number) => ipcRenderer.send('resize-window', { height }),
   fetchSetting: (key: string) => ipcRenderer.sendSync('fetch-setting', key),
   updateSetting: (key: string, value: any) => ipcRenderer.send('update-setting', { key, value }),

diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -47,6 +47,12 @@ export default function Home() {
   useEffect(() => {
     window.electronAPI.onSelectDirectory(async (customData) => {
       setSelectedDirectory(customData[0]);
+      if (chatHistory.length) {
+        setChatHistory([
+          ...chatHistory,
+          { role: 'system', content: 'Assist' },
+        ]);
+      }
       try {
         dispatch(startDirectoryIndexing());
         await fetch('http://localhost:8080/api/index', {
@@ -66,7 +72,7 @@ export default function Home() {
         dispatch(stopDirectoryIndexing());
       }
     });
-  }, []);
+  }, [chatHistory]);
 
   const handleClearHistory = () => {
     setChatHistory([]);
@@ -77,6 +83,12 @@ export default function Home() {
 
   const clearDirectory = () => {
     setSelectedDirectory(null);
+    if (chatHistory.length) {
+      setChatHistory([
+        ...chatHistory,
+        { role: 'system', content: 'Converse' },
+      ]);
+    }
   };
 
   return (

diff --git a/app/src/app/settings/page.tsx b/app/src/app/settings/page.tsx
@@ -116,7 +116,6 @@ function GeneralSettings() {
           handleModelChange={(selectedModel) => {
             setModel(selectedModel);
             if (typeof window !== 'undefined' && selectedModel) {
-              window.electronAPI.startServer(selectedModel);
               window.electronAPI.updateSetting('model', selectedModel);
             }
           }}

diff --git a/app/src/components/chat/Chat.tsx b/app/src/components/chat/Chat.tsx
@@ -32,7 +32,7 @@ const Chat = ({
       }
       const newHistory = [
         ...chatHistory,
-        { role: 'user', content: message },
+        { role: 'user' as const, content: message },
       ];
       setChatHistory(newHistory);
       dispatch(startWaitingForResponse());
@@ -42,7 +42,9 @@ const Chat = ({
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          messages: selectedDirectory ? [{ role: 'user', content: message }] : newHistory,
+          messages: selectedDirectory
+            ? [{ role: 'user', content: message }]
+            : newHistory.filter((chat) => chat.role !== 'system'),
           temperature: 0.7,
           // eslint-disable-next-line @typescript-eslint/naming-convention
           top_p: 0.95,

diff --git a/app/src/components/chat/ChatMessages.tsx b/app/src/components/chat/ChatMessages.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable function-paren-newline */
 import {
   faCircleNotch,
 } from '@fortawesome/free-solid-svg-icons';
@@ -14,6 +15,7 @@ import {
   useAppSelector,
 } from '../../lib/hooks';
 import Message from './ChatMessage';
+import SystemMessage from './SystemMessage';
 
 const ChatMessages = ({
   chatHistory,
@@ -49,13 +51,21 @@ const ChatMessages = ({
   }, [chatHistory]);
   return chatHistory.length
     ? (
-      <div ref={messagesRef} className='flex flex-col flex-grow gap-4 p-4 overflow-y-scroll'>
-        {chatHistory.map((message, index) => (
-          <Message
-            key={index}
-            message={message}
-          />
-        ))}
+      <div ref={messagesRef} className='flex flex-col flex-grow p-4 gap-4 overflow-y-scroll'>
+        {chatHistory.map((message, index) => (message.role !== 'system'
+          ? (
+            <Message
+              key={index}
+              message={message}
+            />
+          )
+          : (
+            <SystemMessage
+              key={index}
+              message={message}
+            />
+          ))
+        )}
         {isWaitingForResponse
           ? (
             <div

diff --git a/app/src/components/chat/SystemMessage.tsx b/app/src/components/chat/SystemMessage.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type {
+  ChatMessage,
+} from '../../constants/chat';
+
+const Message = ({
+  message,
+}: {
+  message: ChatMessage;
+}) => (
+  <div
+    className={'flex w-full'}
+  >
+    <div
+      className={'rounded-sm w-full relative flex items-center'}
+    >
+      <div className='w-full h-[1px] bg-red-500 rounded-md' />
+      <div className='text-[12px] font-semibold select-text px-2 text-red-500 bg-transparent flex-grow rounded-md text-center py-1 whitespace-nowrap'>
+        {message.content}
+      </div>
+      <div className='w-full h-[1px] bg-red-500 rounded-md' />
+      <div className='arrow-tag text-[10px] p-0 absolute right-0 font-bold select-text uppercase pr-1 pl-1 text-white bg-red-500 flex-grow rounded-sm text-center whitespace-nowrap'>
+        <svg
+          className='absolute -left-[5px] top-[1px] z-[-1]'
+          aria-hidden='true'
+          role='img'
+          width='8'
+          height='13'
+          viewBox='0 0 8 13'
+        >
+          <path
+            className='fill-red-500 text-red-500'
+            stroke='currentColor'
+            fill='transparent'
+            d='M8.16639 0.5H9C10.933 0.5 12.5 2.067 12.5 4V9C12.5 10.933 10.933 12.5 9 12.5H8.16639C7.23921 12.5 6.34992 12.1321 5.69373 11.4771L0.707739 6.5L5.69373 1.52292C6.34992 0.86789 7.23921 0.5 8.16639 0.5Z'
+          >
+          </path>
+        </svg>
+        Mode
+      </div>
+    </div>
+  </div>
+);
+
+export default Message;
diff --git a/app/src/constants/chat.tsx b/app/src/constants/chat.tsx
@@ -1,4 +1,4 @@
 export type ChatMessage = {
-  role: string;
+  role: 'user' | 'assistant' | 'system';
   content: string | null;
 };