From cc22e1b01372a0d3d61a8edf4ae20dcdfc284150 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Tue, 9 Jul 2024 19:46:17 +0530
Subject: [PATCH] Add pop-up module for the slash commands

---
 src/interface/web/app/chat/chat.module.css    |   8 +-
 src/interface/web/app/chat/page.tsx           | 212 +++++++++++++-----
 .../components/chatHistory/chatHistory.tsx    |   2 +-
 .../referencePanel/referencePanel.tsx         |   9 +-
 .../sidePanel/chatHistorySidePanel.tsx        |  11 +-
 src/interface/web/app/factchecker/page.tsx    |  28 ++-
 src/interface/web/components/ui/command.tsx   |   2 +-
 7 files changed, 193 insertions(+), 79 deletions(-)

diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
index 3d3c4665..98786272 100644
--- a/src/interface/web/app/chat/chat.module.css
+++ b/src/interface/web/app/chat/chat.module.css
@@ -11,8 +11,6 @@ div.main {
 }
 
 div.inputBox {
-    display: grid;
-    grid-template-columns: auto 1fr auto auto;
     border: 1px solid var(--border-color);
     border-radius: 16px;
     box-shadow: 0 4px 10px var(--box-shadow-color);
@@ -20,6 +18,12 @@ div.inputBox {
     gap: 12px;
     padding-left: 20px;
     padding-right: 20px;
+    align-content: center;
+}
+
+div.actualInputArea {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
 }
 
 input.inputBox {
diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index ca03eb32..98faad15 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -14,19 +14,48 @@ import { handleCompiledReferences, handleImageResponse, setupWebSocket, uploadDa
 import { Progress } from "@/components/ui/progress"
 
 import 'katex/dist/katex.min.css';
-import { Lightbulb, ArrowCircleUp, FileArrowUp, Microphone } from '@phosphor-icons/react';
+import {
+    ArrowCircleUp,
+    ArrowRight,
+    Browser,
+    ChatsTeardrop,
+    FileArrowUp,
+    GlobeSimple,
+    Gps,
+    Image,
+    Microphone,
+    Notebook,
+    Question,
+    Robot,
+    Shapes
+} from '@phosphor-icons/react';
+
+import {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "@/components/ui/command"
 
-import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from '@/components/ui/button';
 import { StreamMessage } from '../components/chatMessage/chatMessage';
 import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { PopoverTrigger } from '@radix-ui/react-popover';
 
 interface ChatInputProps {
     sendMessage: (message: string) => void;
     sendDisabled: boolean;
     setUploadedFiles?: (files: string[]) => void;
     conversationId?: string | null;
+    chatOptionsData?: ChatOptions | null;
+    isMobileWidth?: boolean;
 }
 
 function ChatInputArea(props: ChatInputProps) {
@@ -68,6 +97,10 @@ function ChatInputArea(props: ChatInputProps) {
         setMessage('');
     }
 
+    function handleSlashCommandClick(command: string) {
+        setMessage(`/${command} `);
+    }
+
     function handleFileButtonClick() {
         if (!fileInputRef.current) return;
         fileInputRef.current.click();
@@ -85,6 +118,45 @@ function ChatInputArea(props: ChatInputProps) {
             props.conversationId);
     }
 
+    function getIconForSlashCommand(command: string) {
+        if (command.includes('summarize')) {
+            return <Gps className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('help')) {
+            return <Question className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('automation')) {
+            return <Robot className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('webpage')) {
+            return <Browser className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('notes')) {
+            return <Notebook className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('image')) {
+            return <Image className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('default')) {
+            return <Shapes className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('general')) {
+            return <ChatsTeardrop className='h-4 w-4 mx-2' />
+        }
+
+        if (command.includes('online')) {
+            return <GlobeSimple className='h-4 w-4 mx-2' />
+        }
+        return <ArrowRight className='h-4 w-4 mx-2' />
+    }
+
     return (
         <>
             {
@@ -134,47 +206,84 @@ function ChatInputArea(props: ChatInputProps) {
                     </AlertDialog>
                 )
             }
-            <input
-                type="file"
-                multiple={true}
-                ref={fileInputRef}
-                onChange={handleFileChange}
-                style={{ display: 'none' }}
-            />
-            <Button
-                variant={'ghost'}
-                className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
-                disabled={props.sendDisabled}
-                onClick={handleFileButtonClick}>
-                <FileArrowUp weight='fill' />
-            </Button>
-            <div className="grid w-full gap-1.5">
-                <Textarea
-                    className='border-none min-h-[20px]'
-                    placeholder="Type / to see a list of commands"
-                    id="message"
-                    value={message}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter' && !e.shiftKey) {
-                            e.preventDefault();
-                            onSendMessage();
-                        }
-                    }}
-                    onChange={(e) => setMessage(e.target.value)}
-                    disabled={props.sendDisabled} />
+            {
+                (message.startsWith('/') && message.split(' ').length === 1) &&
+                <div className='flex justify-center text-center'>
+                    <Popover
+                        open={message.startsWith('/')}>
+                        <PopoverTrigger className='flex justify-center text-center'>
+
+                        </PopoverTrigger>
+                        <PopoverContent
+                            onOpenAutoFocus={(e) => e.preventDefault()}
+                            className={`${props.isMobileWidth} ? 'w-[100vw] : w-full`}>
+                            <Command className='max-w-full'>
+                                <CommandInput placeholder="Type a command or search..." value={message} className='hidden' />
+                                <CommandList>
+                                    <CommandEmpty>No matching commands.</CommandEmpty>
+                                    <CommandGroup heading="Agent Tools">
+                                        {props.chatOptionsData && Object.entries(props.chatOptionsData).map(([key, value]) => (
+                                            <CommandItem
+                                                key={key}
+                                                onSelect={() => handleSlashCommandClick(key)}>
+                                                {getIconForSlashCommand(key)}
+                                                <span>
+                                                    /{key}: {value}
+                                                </span>
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                    <CommandSeparator />
+                                </CommandList>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+                </div>
+            }
+            <div className={`${styles.actualInputArea} flex items-center justify-between`}>
+
+                <input
+                    type="file"
+                    multiple={true}
+                    ref={fileInputRef}
+                    onChange={handleFileChange}
+                    style={{ display: 'none' }}
+                />
+                <Button
+                    variant={'ghost'}
+                    className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                    disabled={props.sendDisabled}
+                    onClick={handleFileButtonClick}>
+                    <FileArrowUp weight='fill' />
+                </Button>
+                <div className="grid w-full gap-1.5 relative">
+                    <Textarea
+                        className='border-none min-h-[20px]'
+                        placeholder="Type / to see a list of commands"
+                        id="message"
+                        value={message}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' && !e.shiftKey) {
+                                e.preventDefault();
+                                onSendMessage();
+                            }
+                        }}
+                        onChange={(e) => setMessage(e.target.value)}
+                        disabled={props.sendDisabled} />
+                </div>
+                <Button
+                    variant={'ghost'}
+                    className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                    disabled={props.sendDisabled}>
+                    <Microphone weight='fill' />
+                </Button>
+                <Button
+                    className="bg-orange-300 hover:bg-orange-500 rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1"
+                    onClick={onSendMessage}
+                    disabled={props.sendDisabled}>
+                    <ArrowCircleUp />
+                </Button>
             </div>
-            <Button
-                variant={'ghost'}
-                className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
-                disabled={props.sendDisabled}>
-                <Microphone weight='fill' />
-            </Button>
-            <Button
-                className="bg-orange-300 hover:bg-orange-500 rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1"
-                onClick={onSendMessage}
-                disabled={props.sendDisabled}>
-                <ArrowCircleUp />
-            </Button>
         </>
     )
 }
@@ -191,6 +300,7 @@ interface ChatBodyDataProps {
     setQueryToProcess: (query: string) => void;
     streamedMessages: StreamMessage[];
     setUploadedFiles: (files: string[]) => void;
+    isMobileWidth?: boolean;
 }
 
 
@@ -206,20 +316,10 @@ function ChatBodyData(props: ChatBodyDataProps) {
         }
     }, [conversationId, props.onConversationIdChange]);
 
-    // useEffect(() => {
-    //     // Reset the processing message whenever the streamed messages are updated
-    //     if (props.streamedMessages) {
-    //         setProcessingMessage(false);
-    //     }
-    // }, [props.streamedMessages]);
-
     useEffect(() => {
         if (message) {
             setProcessingMessage(true);
             props.setQueryToProcess(message);
-            // setTimeout(() => {
-            //     setProcessingMessage(false);
-            // }, 1000);
         }
     }, [message]);
 
@@ -259,11 +359,13 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     pendingMessage={processingMessage ? message : ''}
                     incomingMessages={props.streamedMessages} />
             </div>
-            <div className={`${styles.inputBox} bg-background align-middle items-center justify-center`}>
+            <div className={`${styles.inputBox} bg-background align-middle items-center justify-center px-3`}>
                 <ChatInputArea
                     sendMessage={(message) => setMessage(message)}
                     sendDisabled={processingMessage}
+                    chatOptionsData={props.chatOptionsData}
                     conversationId={conversationId}
+                    isMobileWidth={props.isMobileWidth}
                     setUploadedFiles={props.setUploadedFiles} />
             </div>
         </>
@@ -390,10 +492,6 @@ export default function Chat() {
         }
     }, [queryToProcess]);
 
-    // useEffect(() => {
-    //     console.log("messages", messages);
-    // }, [messages]);
-
     useEffect(() => {
         if (processQuerySignal && chatWS) {
             setProcessQuerySignal(false);
diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index e8a70d68..56f1f157 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -42,7 +42,7 @@ function constructTrainOfThought(trainOfThought: string[], lastMessage: boolean,
             }
 
             {trainOfThought.map((train, index) => (
-                <TrainOfThought message={train} primary={index === lastIndex && lastMessage && !completed} />
+                <TrainOfThought key={`train-${index}`} message={train} primary={index === lastIndex && lastMessage && !completed} />
             ))}
         </div>
     )
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index fd8102d2..ee02104d 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -99,11 +99,16 @@ interface OnlineReferenceCardProps extends OnlineReferenceData {
 }
 
 function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
+    const [isHovering, setIsHovering] = useState(false);
+
+    if (!props.link) {
+        console.log("invalid link", props);
+        return null;
+    }
+
     const domain = new URL(props.link).hostname;
     const favicon = `https://www.google.com/s2/favicons?domain=${domain}`;
 
-    const [isHovering, setIsHovering] = useState(false);
-
     const handleMouseEnter = () => {
         console.log("mouse entered card");
         setIsHovering(true);
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index e2c52d59..4a275527 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -10,22 +10,13 @@ import Link from "next/link";
 import useSWR from "swr";
 import Image from "next/image";
 
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-
 import {
     Command,
-    CommandDialog,
     CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
     CommandList,
-    CommandSeparator,
-    CommandShortcut,
 } from "@/components/ui/command";
 
 import { InlineLoading } from "../loading/loading";
@@ -553,7 +544,7 @@ function ChatSessionsModal({ data }: ChatSessionsModalProps) {
         <Dialog>
             <DialogTrigger
                 className="flex text-left text-medium text-gray-500 hover:text-gray-900 cursor-pointer my-4 text-sm p-[0.5rem]">
-                See All
+                    <span className="mr-2">See All <ArrowRight className="h-4 w-4" /></span>
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
diff --git a/src/interface/web/app/factchecker/page.tsx b/src/interface/web/app/factchecker/page.tsx
index c04da078..01748c9a 100644
--- a/src/interface/web/app/factchecker/page.tsx
+++ b/src/interface/web/app/factchecker/page.tsx
@@ -140,6 +140,7 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
     const [initialResponse, setInitialResponse] = useState("");
     const [isLoading, setIsLoading] = useState(true);
     const verificationStatement = `${props.message}. Use this link for reference: ${props.additionalLink}`;
+    const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     useEffect(() => {
         if (props.prefilledResponse) {
@@ -149,6 +150,12 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
             verifyStatement(verificationStatement, props.conversationId, setIsLoading, setInitialResponse, () => {});
         }
 
+        setIsMobileWidth(window.innerWidth < 768);
+
+        window.addEventListener('resize', () => {
+            setIsMobileWidth(window.innerWidth < 768);
+        })
+
     }, [verificationStatement, props.conversationId, props.prefilledResponse]);
 
     useEffect(() => {
@@ -170,13 +177,12 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
                 {
                     automationId: "",
                     by: "AI",
-                    intent: {},
                     message: initialResponse,
                     context: [],
                     created: (new Date()).toISOString(),
-                    onlineContext: {}
-                }
-            } setReferencePanelData={() => {}} setShowReferencePanel={() => {}} />
+                    onlineContext: {},
+                }}
+                isMobileWidth={isMobileWidth} />
         </div>
     )
 }
@@ -236,6 +242,7 @@ export default function FactChecker() {
     const [initialReferences, setInitialReferences] = useState<ResponseWithReferences>();
     const [childReferences, setChildReferences] = useState<SupplementReferences[]>();
     const [modelUsed, setModelUsed] = useState<Model>();
+    const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     const [conversationID, setConversationID] = useState("");
     const [runId, setRunId] = useState("");
@@ -251,6 +258,15 @@ export default function FactChecker() {
         setChildReferences(newReferences);
     }
 
+    useEffect(() => {
+        setIsMobileWidth(window.innerWidth < 768);
+
+        window.addEventListener('resize', () => {
+            setIsMobileWidth(window.innerWidth < 768);
+        })
+
+    }, []);
+
     let userData = useAuthenticatedData();
 
     function storeData() {
@@ -390,6 +406,7 @@ export default function FactChecker() {
 
         const seenLinks = new Set();
 
+
         // Any links that are present in webpages should not be searched again
         Object.entries(initialReferences.online || {}).map(([key, onlineData], index) => {
             const webpages = onlineData?.webpages || [];
@@ -536,13 +553,12 @@ export default function FactChecker() {
                                 {
                                     automationId: "",
                                     by: "AI",
-                                    intent: {},
                                     message: initialResponse,
                                     context: [],
                                     created: (new Date()).toISOString(),
                                     onlineContext: {}
                                 }
-                            } setReferencePanelData={() => {}} setShowReferencePanel={() => {}} />
+                            } isMobileWidth={isMobileWidth} />
 
                         </div>
                     </CardContent>
diff --git a/src/interface/web/components/ui/command.tsx b/src/interface/web/components/ui/command.tsx
index 007798a1..ef793c86 100644
--- a/src/interface/web/components/ui/command.tsx
+++ b/src/interface/web/components/ui/command.tsx
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search className={cn("mr-2 h-4 w-4 shrink-0 opacity-50", className)} />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(