Merge pull request #107 from PytorchConnectomics/agent-integration

integrated agentic functionality to chatbot

Author: samcraftt

README.md

@@ -29,6 +29,12 @@ scripts/start.sh          # macOS / Linux
 scripts\start.ps1         # Windows
 ```
 
+If restarting after a crash or interrupted session, kill any lingering processes first:
+
+```
+lsof -ti:8000 | xargs kill -9   # macOS / Linux
+```
+
 ## Before pushing changes
 
 Format most code with `prettier`:

client/package-lock.json

@@ -157,11 +157,83 @@ function Chatbot({ onClose }) {
                     <ReactMarkdown
                       components={{
                         ul: ({ children }) => (
-                          <ul style={{ paddingLeft: "20px" }}>{children}</ul>
+                          <ul style={{ paddingLeft: "20px", margin: "8px 0" }}>
+                            {children}
+                          </ul>
                         ),
                         ol: ({ children }) => (
-                          <ol style={{ paddingLeft: "20px" }}>{children}</ol>
+                          <ol style={{ paddingLeft: "20px", margin: "8px 0" }}>
+                            {children}
+                          </ol>
                         ),
+                        table: ({ children }) => (
+                          <div style={{ overflowX: "auto", margin: "8px 0" }}>
+                            <table
+                              style={{
+                                borderCollapse: "collapse",
+                                width: "100%",
+                                fontSize: "13px",
+                              }}
+                            >
+                              {children}
+                            </table>
+                          </div>
+                        ),
+                        thead: ({ children }) => (
+                          <thead style={{ backgroundColor: "#e8e8e8" }}>
+                            {children}
+                          </thead>
+                        ),
+                        th: ({ children }) => (
+                          <th
+                            style={{
+                              border: "1px solid #ddd",
+                              padding: "6px 8px",
+                              textAlign: "left",
+                              fontWeight: 600,
+                            }}
+                          >
+                            {children}
+                          </th>
+                        ),
+                        td: ({ children }) => (
+                          <td
+                            style={{
+                              border: "1px solid #ddd",
+                              padding: "6px 8px",
+                            }}
+                          >
+                            {children}
+                          </td>
+                        ),
+                        code: ({ inline, children }) =>
+                          inline ? (
+                            <code
+                              style={{
+                                backgroundColor: "#e8e8e8",
+                                padding: "2px 4px",
+                                borderRadius: "3px",
+                                fontSize: "12px",
+                              }}
+                            >
+                              {children}
+                            </code>
+                          ) : (
+                            <pre
+                              style={{
+                                backgroundColor: "#1e1e1e",
+                                color: "#d4d4d4",
+                                padding: "8px",
+                                borderRadius: "4px",
+                                overflowX: "auto",
+                                fontSize: "12px",
+                                margin: "8px 0",
+                              }}
+                            >
+                              <code>{children}</code>
+                            </pre>
+                          ),
+                        pre: ({ children }) => <>{children}</>,
                       }}
                     >
                       {message.text}

client/src/components/Chatbot.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Layout, Menu, message, Button, Drawer } from "antd";
 import {
   FolderOpenOutlined,
@@ -32,6 +32,8 @@ function Views() {
   const [visitedTabs, setVisitedTabs] = useState(new Set(["files"]));
   const [workflowModalVisible, setWorkflowModalVisible] = useState(false);
   const [isChatOpen, setIsChatOpen] = useState(false);
+  const [chatWidth, setChatWidth] = useState(380);
+  const isResizing = useRef(false);
   const [apiReady, setApiReady] = useState(false);
   const [hasShownApiWarning, setHasShownApiWarning] = useState(false);
 
@@ -243,6 +245,33 @@ function Views() {
     };
   }, [current]);
 
+  const startResizing = useCallback((e) => {
+    isResizing.current = true;
+    e.preventDefault();
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    isResizing.current = false;
+  }, []);
+
+  const resize = useCallback((e) => {
+    if (isResizing.current) {
+      const newWidth = window.innerWidth - e.clientX;
+      if (newWidth >= 280 && newWidth <= 800) {
+        setChatWidth(newWidth);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("mousemove", resize);
+    window.addEventListener("mouseup", stopResizing);
+    return () => {
+      window.removeEventListener("mousemove", resize);
+      window.removeEventListener("mouseup", stopResizing);
+    };
+  }, [resize, stopResizing]);
+
   const renderTabContent = (key, component) => {
     if (!visitedTabs.has(key)) return null;
     return (
@@ -320,12 +349,32 @@ function Views() {
         placement="right"
         open={isChatOpen}
         onClose={() => setIsChatOpen(false)}
-        width={380}
+        width={chatWidth}
         mask={false}
         closable={false}
         destroyOnClose
         styles={{ header: { display: "none" }, body: { padding: 0 } }}
       >
+        <div
+          onMouseDown={startResizing}
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: "4px",
+            cursor: "ew-resize",
+            backgroundColor: "transparent",
+            zIndex: 10,
+          }}
+          onMouseEnter={(e) =>
+            (e.currentTarget.style.backgroundColor = "#1890ff")
+          }
+          onMouseLeave={(e) =>
+            !isResizing.current &&
+            (e.currentTarget.style.backgroundColor = "transparent")
+          }
+        />
         <Chatbot onClose={() => setIsChatOpen(false)} />
       </Drawer>
     </Layout>

client/src/views/Views.js

@@ -10,6 +10,7 @@ dependencies = [
     "fastapi==0.119.0",
     "h5py>=3.11",
     "imageio==2.37.0",
+    "langchain>=0.3.0",
     "langchain-classic==1.0.0",
     "langchain-community==0.4.1",
     "langchain-ollama==1.0.0",

pyproject.toml

@@ -2,6 +2,12 @@
 
 set -euo pipefail
 
+# Prefer Homebrew's Node over nvm to avoid version conflicts
+export PATH="/opt/homebrew/bin:$PATH"
+export OLLAMA_BASE_URL="http://cscigpu08.bc.edu:11434"
+export OLLAMA_MODEL="gpt-oss:20b"
+export OLLAMA_EMBED_MODEL="mistral:latest"
+
 ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 CLIENT_DIR="${ROOT_DIR}/client"