Update code files

1. Add button in UI to determine whether perform task planning or single query mode. Note this will only effect as the first query in each dialog 2. Add header comments to code script. 3. Add more tutorial examples for reference 4. Update the server link
batmen-lab · Sep 21, 2024 · 07d1787 · 07d1787
1 parent b9d2ad3
commit 07d1787
Show file tree

Hide file tree

Showing 72 changed files with 81,091 additions and 311 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ We also offer a GPTs demo (under developing).
 
 # Web access online demo
 
-We provide a colab demo [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/drive/14K4562oeesEz5qMoXmjv9gW_4VeLh6_U?usp=sharing) and an [online demo](https://biomania.serveo.net/en) hosted on our server! 
+We provide a colab demo [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/drive/14K4562oeesEz5qMoXmjv9gW_4VeLh6_U?usp=sharing) and an [online demo](https://biomania.ngrok.io/en) hosted on our server! 
 
 # Quick start
 

diff --git a/chatbot_ui_biomania/components/Chat/Chat.tsx b/chatbot_ui_biomania/components/Chat/Chat.tsx
@@ -63,6 +63,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [mode, setMode] = useState<'T' | 'S' | 'A'>('T');
 
   const toolStart: ToolUsage = {
     type: "tool",
@@ -122,7 +123,8 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
     tools: [toolStart, toolEnd, agentAction],
     recommendations: [],
     files: [],
-    session_id: selectedConversation?.id || 'default-session-id'
+    session_id: selectedConversation?.id || 'default-session-id',
+    mode: mode || 'T',
   });
   const handleSend = useCallback(
     async (message: Message, deleteCount = 0, plugin: Plugin | null = null) => {
@@ -159,7 +161,8 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
                     tools: [toolStart, toolEnd, agentAction],
                     recommendations: [],
                     files: [],
-                    session_id: selectedConversation.id 
+                    session_id: selectedConversation.id,
+                    mode: 'T',
                   },
                   message
                 ]
@@ -186,6 +189,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
           conversation_started: isFirstMessageInConversation,
           session_id: updatedConversation.id,
           optionalParams: optionalParams,
+          mode: mode,
         };
         console.log("updatedConversation", updatedConversation)
         const endpoint = "api/chat";
@@ -288,7 +292,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
               isFirst = false;
               const updatedMessages: Message[] = [
                 ...updatedConversation.messages,
-                { role: 'assistant', content: text, tools: resultObjs, recommendations: [], files:[],session_id: selectedConversation.id },
+                { role: 'assistant', content: text, tools: resultObjs, recommendations: [], files:[],session_id: selectedConversation.id, mode: "T" },
               ];
               updatedConversation = {...updatedConversation, messages: updatedMessages};
               homeDispatch({field: 'selectedConversation', value: updatedConversation});
@@ -312,6 +316,10 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
               return conversation;
             },
           );
+          const updatedMessage = {
+            ...message,
+            mode: mode,
+          };
           if (updatedConversations.length === 0) {
             updatedConversations.push(updatedConversation);
           }
@@ -322,7 +330,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
           const { answer } = await response.json();
           const updatedMessages: Message[] = [
             ...updatedConversation.messages,
-            { role: 'assistant', content: answer, tools: [], recommendations: [], files:[],session_id: selectedConversation.id },
+            { role: 'assistant', content: answer, tools: [], recommendations: [], files:[],session_id: selectedConversation.id, mode: "T" },
           ];
           updatedConversation = {...updatedConversation, messages: updatedMessages};
           homeDispatch({ field: 'selectedConversation', value: updateConversation});
@@ -354,6 +362,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
       attachedFiles,
       selectedConversation, 
       optionalParams,
+      mode,
     ],
   );
   const handleFileUpload = useCallback(
@@ -583,6 +592,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
             }}
             showScrollDownButton={showScrollDownButton}
             onUpload={handleFileUpload}
+            onModeChange={setMode}
           />
         </>
       )}

diff --git a/chatbot_ui_biomania/components/Chat/ChatInput.tsx b/chatbot_ui_biomania/components/Chat/ChatInput.tsx
@@ -49,6 +49,7 @@ interface Props {
   textareaRef: MutableRefObject<HTMLTextAreaElement | null>;
   showScrollDownButton: boolean;
   onUpload: (file: File) => void;
+  onModeChange: (mode: 'T' | 'S' | 'A') => void;
 }
 export const ChatInput = ({
   onSend,
@@ -58,6 +59,7 @@ export const ChatInput = ({
   textareaRef,
   showScrollDownButton,
   onUpload,
+  onModeChange
 }: Props) => {
   const { t } = useTranslation('chat');
   const {
@@ -77,6 +79,7 @@ export const ChatInput = ({
   const [plugin, setPlugin] = useState<Plugin | null>(null);
   const [attachedFiles, setAttachedFiles] = useState<FileObject[]>([]);
   const [fileInputRef, setFileInputRef] = useState(() => createRef<HTMLInputElement>());
+  const [mode, setMode] = useState<'T' | 'S' | 'A'>('T');
   const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const files = Array.from(e.target.files).map(file => ({ id: uuidv4(), data: file, type: 'file' as const, filename: file.name }));
@@ -121,7 +124,7 @@ export const ChatInput = ({
       return;
     }
     const isFirstMessage = selectedConversation?.messages.length === 0;
-    onSend({ role: 'user', content, tools: [], recommendations: [], files: attachedFiles, conversation_started: isFirstMessage, session_id: selectedConversation?.id|| ""}, plugin);
+    onSend({ role: 'user', content, tools: [], recommendations: [], files: attachedFiles, conversation_started: isFirstMessage, session_id: selectedConversation?.id|| "", mode: mode ||"T"}, plugin);
     setContent('');
     setAttachedFiles([]);
     setPlugin(null);
@@ -224,6 +227,21 @@ export const ChatInput = ({
       setPromptInputValue('');
     }
   }, []);
+  const [isOpen, setIsOpen] = useState(false);
+  const handleModeChange = (newMode: 'T' | 'S' | 'A') => {
+    setMode(newMode);
+    onModeChange(newMode);
+    setIsOpen(false); // Close dropdown after selection
+
+    // Prepare session data
+    const sessionData = {
+      mode: newMode,
+      sessionId: selectedConversation?.id || "",
+      files: attachedFiles,
+    };
+    // Log or record session data as needed
+    console.log("Session Data:", sessionData);
+  };
   const handlePromptSelect = (prompt: Prompt) => {
     const parsedVariables = parseVariables(prompt.content);
     setVariables(parsedVariables);
@@ -353,6 +371,40 @@ export const ChatInput = ({
           >
             URL
           </button>
+          {/* Task planning Mode select */}
+          <button
+            className="absolute left-16 bottom-2.5 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
+            onClick={() => setIsOpen((prev) => !prev)}
+          >
+            {isOpen
+              ? (mode === 'T' ? 'Task Planning' : mode === 'S' ? 'Single Query' : 'Automatically Chosen')
+              : mode}
+          </button>
+
+          {isOpen && (
+            <div className="absolute left-16 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md z-10">
+              <ul className="py-1">
+                <li
+                  className="px-4 py-2 text-neutral-800 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-gray-700"
+                  onClick={() => handleModeChange('T')}
+                >
+                  Task Planning (T)
+                </li>
+                <li
+                  className="px-4 py-2 text-neutral-800 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-gray-700"
+                  onClick={() => handleModeChange('S')}
+                >
+                  Single Query (S)
+                </li>
+                <li
+                  className="px-4 py-2 text-neutral-800 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-gray-700"
+                  onClick={() => handleModeChange('A')}
+                >
+                  Automatically Chosen (A)
+                </li>
+              </ul>
+            </div>
+          )}
           {/* File upload input message */}
           <input 
             type="file"