Merge pull request #269 from njhale/enhance/fine-tune-edit

enhance: fine tune edit page

Author: njhale

app/edit/page.tsx

@@ -2,10 +2,9 @@
 
 import { useEffect, useState, Suspense, useContext } from 'react';
 import { useSearchParams } from 'next/navigation';
-import Script from '@/components/script';
 import Configure from '@/components/edit/configure';
 import { EditContextProvider } from '@/contexts/edit';
-import { ScriptContextProvider } from '@/contexts/script';
+import { ChatContextProvider } from '@/contexts/chat';
 import New from '@/components/edit/new';
 import ScriptNav from '@/components/edit/scriptNav';
 import { NavContext } from '@/contexts/nav';
@@ -26,7 +25,7 @@ function EditFile() {
       <New className="w-1/2" setFile={setFile} />
     </div>
   ) : (
-    <ScriptContextProvider
+    <ChatContextProvider
       initialScript={file}
       initialScriptId={scriptId}
       enableThread={false}
@@ -38,18 +37,10 @@ function EditFile() {
           <div className="absolute left-6 top-6">
             <ScriptNav collapsed={collapsed} setCollapsed={setCollapsed} />
           </div>
-          <div
-            className={`h-full overflow-auto w-full border-r-2 dark:border-zinc-800 p-6 ${collapsed ? '' : 'xl:px-20'}`}
-          >
-            <Configure collapsed={collapsed} />
-          </div>
-          <Script
-            messagesHeight="h-[93%]"
-            className={`p-6 overflow-auto ${collapsed ? 'col-span-3 px-32' : ''}`}
-          />
+          <Configure collapsed={collapsed} />
         </div>
       </EditContextProvider>
-    </ScriptContextProvider>
+    </ChatContextProvider>
   );
 }
 

app/page.tsx

@@ -2,9 +2,9 @@
 
 import { useSearchParams } from 'next/navigation';
 import { Suspense, useContext, useEffect, useState } from 'react';
-import Script from '@/components/script';
+import Chat from '@/components/chat';
 import Threads from '@/components/threads';
-import { ScriptContextProvider } from '@/contexts/script';
+import { ChatContextProvider } from '@/contexts/chat';
 import { NavContext } from '@/contexts/nav';
 import { tildy } from '@/config/assistant';
 
@@ -21,7 +21,7 @@ function RunFile() {
   useEffect(() => setCurrent('/'), []);
 
   return (
-    <ScriptContextProvider
+    <ChatContextProvider
       initialScript={script}
       initialScriptId={scriptId}
       enableThread={true}
@@ -34,12 +34,12 @@ function RunFile() {
           <div className="w-full h-full flex pb-10">
             <Threads />
             <div className="mx-auto w-[75%] 2xl:w-[55%] 3xl:[w-50%]">
-              <Script enableThreads showAssistantName className="px-4 pb-10" />
+              <Chat showAssistantName className="px-4 pb-10" />
             </div>
           </div>
         </div>
       </section>
-    </ScriptContextProvider>
+    </ChatContextProvider>
   );
 }
 

components/script.tsx renamed to components/chat.tsx

@@ -1,28 +1,33 @@
 'use client';
 
 import { useContext, useEffect, useState, useRef, useCallback } from 'react';
-import Messages, { MessageType } from '@/components/script/messages';
-import ChatBar from '@/components/script/chatBar';
-import ToolForm from '@/components/script/form';
+import Messages, { MessageType } from '@/components/chat/messages';
+import ChatBar from '@/components/chat/chatBar';
+import ToolForm from '@/components/chat/form';
 import Loading from '@/components/loading';
 import { Button } from '@nextui-org/react';
 import { getWorkspaceDir } from '@/actions/workspace';
 import { getGatewayUrl } from '@/actions/gateway';
-import { ScriptContext } from '@/contexts/script';
+import { ChatContext } from '@/contexts/chat';
 import AssistantNotFound from '@/components/assistant-not-found';
 import { generateThreadName, renameThread } from '@/actions/threads';
 
 interface ScriptProps {
   className?: string;
   messagesHeight?: string;
-  enableThreads?: boolean;
   showAssistantName?: boolean;
+  inputPlaceholder?: string;
+  disableInput?: boolean;
+  disableCommands?: boolean;
 }
 
-const Script: React.FC<ScriptProps> = ({
+const Chat: React.FC<ScriptProps> = ({
   className,
   messagesHeight = 'h-full',
   showAssistantName,
+  inputPlaceholder,
+  disableInput = false,
+  disableCommands = false,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, _setInputValue] = useState<string>('');
@@ -45,7 +50,7 @@ const Script: React.FC<ScriptProps> = ({
     notFound,
     restartScript,
     fetchThreads,
-  } = useContext(ScriptContext);
+  } = useContext(ChatContext);
 
   useEffect(() => {
     if (inputRef.current) {
@@ -140,7 +145,12 @@ const Script: React.FC<ScriptProps> = ({
                 {tool.chat ? 'Start chat' : 'Run script'}
               </Button>
             ) : (
-              <ChatBar disabled={!running} onMessageSent={handleMessageSent} />
+              <ChatBar
+                disableInput={disableInput || !running}
+                disableCommands={disableCommands}
+                inputPlaceholder={inputPlaceholder}
+                onMessageSent={handleMessageSent}
+              />
             )}
           </div>
         </>
@@ -153,4 +163,4 @@ const Script: React.FC<ScriptProps> = ({
   );
 };
 
-export default Script;
+export default Chat;

components/script/chatBar.tsx renamed to components/chat/chatBar.tsx

@@ -5,17 +5,24 @@ import { IoMdSend } from 'react-icons/io';
 import { Spinner } from '@nextui-org/react';
 import { FaBackward } from 'react-icons/fa';
 import { Button, Textarea } from '@nextui-org/react';
-import Commands from '@/components/script/chatBar/commands';
+import Commands from '@/components/chat/chatBar/commands';
 import { GoKebabHorizontal, GoSquareFill } from 'react-icons/go';
-import { ScriptContext } from '@/contexts/script';
-import { MessageType } from '@/components/script/messages';
+import { ChatContext } from '@/contexts/chat';
+import { MessageType } from '@/components/chat/messages';
 
 interface ChatBarProps {
-  disabled?: boolean;
+  disableInput?: boolean;
+  disableCommands?: boolean;
+  inputPlaceholder?: string;
   onMessageSent: (message: string) => void;
 }
 
-const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
+const ChatBar = ({
+  disableInput = false,
+  disableCommands = false,
+  inputPlaceholder,
+  onMessageSent,
+}: ChatBarProps) => {
   const [inputValue, setInputValue] = useState('');
   const [commandsOpen, setCommandsOpen] = useState(false);
   const [locked, setLocked] = useState(false);
@@ -27,7 +34,7 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
     setShowForm,
     messages,
     setMessages,
-  } = useContext(ScriptContext);
+  } = useContext(ChatContext);
   const [userMessages, setUserMessages] = useState<string[]>([]);
   const [_userMessagesIndex, setUserMessagesIndex] = useState(-1);
 
@@ -70,7 +77,7 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     // if the user started the message with /, we assume they are trying to run a command
     // so we don't update the input value and instead open the command modal
-    setCommandsOpen(event.target.value.startsWith('/'));
+    if (!disableCommands) setCommandsOpen(event.target.value.startsWith('/'));
     setInputValue(event.target.value);
   };
 
@@ -97,18 +104,20 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
 
   return (
     <div className="flex px-4 space-x-2 sw-full">
-      <Button
-        isIconOnly
-        startContent={<GoKebabHorizontal />}
-        radius="full"
-        className="text-lg"
-        color="primary"
-        onPress={() => {
-          if (disabled) return;
-          setCommandsOpen(true);
-        }}
-        onBlur={() => setTimeout(() => setCommandsOpen(false), 300)} // super hacky but it does work
-      />
+      {!disableCommands && (
+        <Button
+          isIconOnly
+          startContent={<GoKebabHorizontal />}
+          radius="full"
+          className="text-lg"
+          color="primary"
+          onPress={() => {
+            if (disableInput) return;
+            setCommandsOpen(true);
+          }}
+          onBlur={() => setTimeout(() => setCommandsOpen(false), 300)} // super hacky but it does work
+        />
+      )}
       <div className="w-full relative">
         <Commands
           text={inputValue}
@@ -118,10 +127,12 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
         >
           <Textarea
             color="primary"
-            isDisabled={disabled}
+            isDisabled={disableInput}
             id="chatInput"
             autoComplete="off"
-            placeholder="Start chatting or type / for more options "
+            placeholder={
+              inputPlaceholder || 'Start chatting or type / for more options'
+            }
             value={inputValue}
             radius="full"
             minRows={1}
@@ -171,16 +182,17 @@ const ChatBar = ({ disabled = false, onMessageSent }: ChatBarProps) => {
           startContent={<GoSquareFill className="mr-[1px] text-xl" />}
           isIconOnly
           radius="full"
-          isDisabled={disabled}
+          isDisabled={disableInput}
           className="text-lg"
           onPress={interrupt}
         />
       ) : (
         <>
-          {disabled ? (
+          {disableInput && !disableCommands ? (
             <Spinner />
           ) : (
             <Button
+              disabled={!disableInput}
               startContent={<IoMdSend />}
               isIconOnly
               isDisabled={!inputValue}

components/script/chatBar/commands.tsx renamed to components/chat/chatBar/commands.tsx

@@ -9,10 +9,10 @@ import {
   GoTools,
 } from 'react-icons/go';
 import { PiToolbox } from 'react-icons/pi';
-import { ScriptContext } from '@/contexts/script';
-import Upload from '@/components/script/chatBar/upload';
-import ToolCatalog from '@/components/script/chatBar/toolCatalog';
-import { MessageType } from '@/components/script/messages';
+import { ChatContext } from '@/contexts/chat';
+import Upload from '@/components/chat/chatBar/upload';
+import ToolCatalog from '@/components/chat/chatBar/toolCatalog';
+import { MessageType } from '@/components/chat/messages';
 import { useFilePicker } from 'use-file-picker';
 import { uploadFile } from '@/actions/upload';
 import { ingest } from '@/actions/knowledge/knowledge';
@@ -105,7 +105,7 @@ export default function Commands({
     setTool,
     workspace,
     selectedThreadId,
-  } = useContext(ScriptContext);
+  } = useContext(ChatContext);
   const { openFilePicker, filesContent, loading, plainFiles } = useFilePicker(
     {}
   );

components/script/chatBar/toolCatalog.tsx renamed to components/chat/chatBar/toolCatalog.tsx

@@ -3,8 +3,8 @@ import { GoUpload, GoFile, GoX } from 'react-icons/go';
 import Files from './upload/files';
 import { uploadFile, lsFiles } from '@/actions/upload';
 import { Dirent } from 'fs';
-import Workspace from '@/components/script/chatBar/upload/workspace';
-import { ScriptContext } from '@/contexts/script';
+import Workspace from '@/components/chat/chatBar/upload/workspace';
+import { ChatContext } from '@/contexts/chat';
 import {
   Modal,
   ModalContent,
@@ -24,7 +24,7 @@ const UploadModal = ({ isOpen, setIsOpen }: UploadModalProps) => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [files, setFiles] = useState<Dirent[]>([]);
   const selectedFileRef = useRef(selectedFile);
-  const { workspace, restartScript } = useContext(ScriptContext);
+  const { workspace, restartScript } = useContext(ChatContext);
 
   useEffect(() => {
     selectedFileRef.current = selectedFile;

components/script/chatBar/upload.tsx renamed to components/chat/chatBar/upload.tsx

@@ -11,7 +11,7 @@ import {
 } from '@nextui-org/react';
 import { deleteFile, lsFiles } from '@/actions/upload';
 import { Dirent } from 'fs';
-import { ScriptContext } from '@/contexts/script';
+import { ChatContext } from '@/contexts/chat';
 import path from 'path';
 
 interface FilesProps {
@@ -21,7 +21,7 @@ interface FilesProps {
 
 const Files: React.FC<FilesProps> = ({ files, setFiles }) => {
   useEffect(() => fetchFiles(), []);
-  const { workspace } = useContext(ScriptContext);
+  const { workspace } = useContext(ChatContext);
 
   const fetchFiles = useCallback(() => {
     lsFiles(workspace)

components/script/chatBar/upload/files.tsx renamed to components/chat/chatBar/upload/files.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useContext, useEffect } from 'react';
-import { ScriptContext } from '@/contexts/script';
+import { ChatContext } from '@/contexts/chat';
 import {
   Modal,
   ModalContent,
@@ -17,8 +17,7 @@ interface WorkspaceProps {
 
 const Workspace = ({ onRestart }: WorkspaceProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const { workspace, setWorkspace, selectedThreadId } =
-    useContext(ScriptContext);
+  const { workspace, setWorkspace, selectedThreadId } = useContext(ChatContext);
   const [workspaceInput, setWorkspaceInput] = useState<string>('');
 
   useEffect(() => {