Add llm initial set up to the project

Author: ArmanpreetGhotra

client/package-lock.json

@@ -11,22 +11,27 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.13",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@radix-ui/themes": "^3.2.1",
     "@xyflow/react": "^12.6.1",
+    "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.509.0",
     "next": "15.3.2",
+    "next-themes": "^0.4.6",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {

client/package.json

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import {
   ReactFlow,
   Node,
@@ -14,6 +14,7 @@ import "@xyflow/react/dist/style.css";
 import Sidebar from "@/components/sidebar/Sidebar";
 import TextNode from "@/components/text-node/TextNode";
 import ShapeNode from "@/components/shape-node/ShapeNode";
+import { AIActionDropdown } from "./aiActionDropdown/aiActionDropdown";
 
 const nodeTypes = {
   text: TextNode,
@@ -22,6 +23,7 @@ const nodeTypes = {
 
 export default function WhiteBoard() {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [selectedNodes, setSelectedNodes] = useState<Node[]>([]);
 
   const handleAddNode = useCallback(
     (newNode: Node) => {
@@ -37,15 +39,66 @@ export default function WhiteBoard() {
     [setEdges],
   );
 
+  const handleNodesChange = useCallback((changes: any) => {
+    onNodesChange(changes);
+    setSelectedNodes(nodes.filter(node => node.selected));
+  }, [nodes, onNodesChange]);
+
+  const handleAIAction = async (action: 'complete' | 'summarize' | 'rephrase') => {
+    const textNodes = selectedNodes.filter(node => node.type === 'text');
+    if (textNodes.length === 0) return;
+  
+    const nodeToUpdate = textNodes[0]; // first selected text node
+    const currentText = nodeToUpdate.data.label as string;
+  
+    try {
+      const response = await fetch(`http://localhost:8080/api/llm/rephrase`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ user_text: [currentText] }),
+      });
+  
+      if (!response.ok) {
+        throw new Error(`Server error: ${response.statusText}`);
+      }
+  
+      const data = await response.json();
+  
+      setNodes((nds) =>
+        nds.map((node) =>
+          node.id === nodeToUpdate.id
+            ? { 
+                ...node,
+                data: { 
+                  ...node.data,
+                  label: data.llm_response || '' // update node text from API response
+                }
+              }
+            : node
+        )
+      );
+    } catch (error) {
+      console.error("Error calling LLM service:", error);
+    }
+  };
+  
+
+
   return (
     <div style={{ width: "100vw", height: "100vh" }}>
       <div className="fixed left-4 top-1/2 -translate-y-1/2 z-10 ">
         <Sidebar onAddNode={handleAddNode} />
       </div>
+
+      <AIActionDropdown 
+        selectedNodes={selectedNodes}
+        onAIAction={handleAIAction}
+      />
+
       <ReactFlow
         nodes={nodes}
         edges={edges}
-        onNodesChange={onNodesChange}
+        onNodesChange={handleNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         nodeTypes={nodeTypes}

client/src/components/WhiteBoard.tsx

@@ -0,0 +1,78 @@
+import { Node } from "@xyflow/react";
+import { Sparkles, Type, FileText, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+
+interface AIActionsProps {
+  selectedNodes: Node[];
+  onAIAction: (action: 'complete' | 'summarize' | 'rephrase') => void;
+}
+
+export function AIActionDropdown({ selectedNodes, onAIAction }: AIActionsProps) {
+  const [loading, setLoading] = useState(false);
+  const hasSelectedTextNodes = selectedNodes.some(node => node.type === 'text');
+
+  const handleAIAction = async (action: 'complete' | 'summarize' | 'rephrase') => {
+    if (!hasSelectedTextNodes) return;
+    
+    setLoading(true);
+    try {
+      await onAIAction(action);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed right-4 top-4 z-10">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className={`p-2 transition-all ${
+              hasSelectedTextNodes
+                ? 'bg-purple-100 text-purple-600 hover:bg-purple-200'
+                : 'opacity-50 cursor-not-allowed'
+            }`}
+            disabled={!hasSelectedTextNodes || loading}
+          >
+            <Sparkles className={`h-5 w-5 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuItem 
+            onClick={() => handleAIAction('complete')}
+            className="cursor-pointer"
+            disabled={loading}
+          >
+            <Type className="mr-2 h-4 w-4" />
+            Complete Text
+          </DropdownMenuItem>
+          <DropdownMenuItem 
+            onClick={() => handleAIAction('summarize')}
+            className="cursor-pointer"
+            disabled={loading}
+          >
+            <FileText className="mr-2 h-4 w-4" />
+            Summarize Text
+          </DropdownMenuItem>
+          <DropdownMenuItem 
+            onClick={() => handleAIAction('rephrase')}
+            className="cursor-pointer"
+            disabled={loading}
+          >
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Rephrase Text
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}