chat ui wip

BrianP8701 · Sep 23, 2024 · 27b3a54 · 27b3a54
1 parent 2db2c01
commit 27b3a54
Show file tree

Hide file tree

Showing 17 changed files with 317 additions and 119 deletions.
diff --git a/client/graphql.schema.json b/client/graphql.schema.json
@@ -216,6 +216,58 @@
         "name": "Chat",
         "description": null,
         "isOneOf": null,
+        "fields": [
+          {
+            "name": "data",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "OBJECT",
+              "name": "ChatData",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "title",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "OBJECT",
+        "name": "ChatData",
+        "description": null,
+        "isOneOf": null,
         "fields": [
           {
             "name": "id",
@@ -252,18 +304,6 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
-          },
-          {
-            "name": "title",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "SCALAR",
-              "name": "String",
-              "ofType": null
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
           }
         ],
         "inputFields": null,

diff --git a/client/src/components/custom/DialogPreview.tsx b/client/src/components/custom/DialogPreview.tsx
@@ -10,7 +10,7 @@ interface DialogPreviewProps {
 
 export default function DialogPreview({ previewComponent, dialogContent }: DialogPreviewProps) {
   return (
-    <div className="relative w-full h-full">
+    <div className="relative w-full h-full bg-slate-800 rounded-xl">
       <div className="w-full h-full">
         {previewComponent}
       </div>
@@ -23,7 +23,7 @@ export default function DialogPreview({ previewComponent, dialogContent }: Dialo
             <Expand size={20} />
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-[95vw] h-[95vh] max-w-[95vw] p-0">
+        <DialogContent className="w-[95vw] h-[95vh] max-w-[95vw] p-0 bg-slate-800 rounded-xl">
           {dialogContent}
         </DialogContent>
       </Dialog>

diff --git a/client/src/components/custom/tree/TreeVisualizer.tsx b/client/src/components/custom/tree/TreeVisualizer.tsx
@@ -81,7 +81,7 @@ export const TreeVisualizer: React.FC<TreeVisualizerProps> = ({ nodes }) => {
     }, []);
 
     return (
-        <div ref={containerRef} className="w-full h-full bg-secondary rounded-xl">
+        <div ref={containerRef} className="w-full h-full rounded-xl">
             {graphData.nodes.length > 0 && (
                 <Graph
                     key={key}

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/90  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
         className
       )}
       {...props}

diff --git a/client/src/graphql/fragments.gql b/client/src/graphql/fragments.gql
@@ -16,6 +16,7 @@ fragment Swarm on Swarm {
 }
 
 fragment SwarmData on SwarmData {
+  id
   memoryNodes {
     ...MemoryNode
   }
@@ -30,6 +31,13 @@ fragment SwarmData on SwarmData {
   }
 }
 
+fragment SwarmWithData on Swarm {
+  ...Swarm
+  data {
+    ...SwarmData
+  }
+}
+
 fragment Memory on Memory {
   id
   title
@@ -41,6 +49,9 @@ fragment Memory on Memory {
 fragment Chat on Chat {
   id
   title
+}
+
+fragment ChatData on ChatData {
   messages {
     ...Message
   }

diff --git a/client/src/graphql/queries.gql b/client/src/graphql/queries.gql
@@ -6,10 +6,7 @@ query FetchUser {
 
 query FetchSwarm($id: ID!) {
   fetchSwarm(id: $id) {
-    ...Swarm
-    data {
-      ...SwarmData
-    }
+    ...SwarmWithData
   }
 }
 

diff --git a/client/src/views/Chat/Chat.tsx b/client/src/views/Chat/Chat.tsx
@@ -1,45 +1,28 @@
-import { useState, useEffect } from "react";
-import { ChatInput } from "./ChatInput";
-import { PanelRightOpen, PanelRightClose, Expand } from "lucide-react";
-import ChatSidebar from "@/views/Chat/ChatSidebar";
+import { useState } from "react";
+import { Expand, PanelRightOpen, PanelRightClose } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { ExpandedChat, ChatContent } from "./ChatUtils";
+import ChatSidebar from "@/views/Chat/ChatSidebar";
+import { SwarmWithDataFragment } from "@/src/graphql/generated/graphql";
 
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: typeof window !== 'undefined' ? window.innerWidth : 0,
-    height: typeof window !== 'undefined' ? window.innerHeight : 0,
-  });
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return windowSize;
+export interface ChatProps {
+  swarm: SwarmWithDataFragment | undefined
 }
 
-export default function Chat() {
+export default function Chat({ swarm }: ChatProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const chats = [
     { value: "1", label: "Chat 1" },
     { value: "2", label: "Chat 2" },
-  ]; // Temporary constant for chats
+  ];
 
   const handleChatChange = (value: string) => {
     console.log("Selected chat:", value);
   };
 
   return (
-    <div className="relative flex h-full flex-col rounded-xl bg-secondary">
+    <div className="relative flex flex-col h-full rounded-xl bg-secondary">
       <Button
         onClick={() => setIsSidebarOpen(!isSidebarOpen)}
         className="absolute top-2 left-2 px-1 py-2 z-30"
@@ -48,69 +31,21 @@ export default function Chat() {
         {isSidebarOpen ? <PanelRightClose size={20} /> : <PanelRightOpen size={20} />}
       </Button>
       <div className={`z-20 absolute top-0 left-0 h-full transition-all duration-300 ${isSidebarOpen ? 'w-64' : 'w-0'} overflow-hidden`}>
-        <ChatSidebar
-          options={chats}
-          onSelect={handleChatChange}
-        />
-      </div>
-      <div className="z-10 flex-1 flex flex-col p-4">
-        <div className="flex-1 relative">
-          {/* Chat messages will go here */}
-        </div>
-        <div className="w-full max-w-[800px] mx-auto relative">
-          <ChatInput />
-        </div>
+        <ChatSidebar options={chats} onSelect={handleChatChange} />
       </div>
+      <ChatContent swarm={swarm} />
       <Dialog>
         <DialogTrigger asChild>
-          <Button
-            className="absolute top-2 right-2 px-1 py-2 z-30"
-            variant="ghost"
-          >
+          <Button className="absolute top-2 right-2 px-1 py-2 z-30" variant="ghost">
             <Expand size={20} />
           </Button>
         </DialogTrigger>
         <DialogContent className="w-[95vw] h-[95vh] max-w-full p-0 bg-secondary">
-          <ExpandedChat chats={chats} onChatChange={handleChatChange} />
+          <div className="w-full h-full">
+            <ExpandedChat chats={chats} onChatChange={handleChatChange} swarm={swarm} />
+          </div>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
-
-function ExpandedChat({ chats, onChatChange }: { chats: { value: string, label: string }[], onChatChange: (value: string) => void }) {
-  const { width } = useWindowSize();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-
-  useEffect(() => {
-    setIsSidebarOpen(width > 768); // Adjust this breakpoint as needed
-  }, [width]);
-
-  return (
-    <div className="flex h-full">
-      {width <= 768 && (
-        <Button
-          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-          className="absolute top-2 left-2 px-1 py-2 z-30"
-          variant="ghost"
-        >
-          {isSidebarOpen ? <PanelRightClose size={22} /> : <PanelRightOpen size={22} />}
-        </Button>
-      )}
-      <div className={`${isSidebarOpen ? 'w-64' : 'w-0'} h-full overflow-y-auto transition-all duration-300`}>
-        <ChatSidebar
-          options={chats}
-          onSelect={onChatChange}
-        />
-      </div>
-      <div className="flex-1 flex flex-col p-4">
-        <div className="flex-1 relative">
-          {/* Chat messages will go here */}
-        </div>
-        <div className="w-full max-w-[800px] mx-auto relative">
-          <ChatInput />
-        </div>
-      </div>
-    </div>
-  )
-}