Add pop-up module for the slash commands

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 {

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,6 +206,42 @@ function ChatInputArea(props: ChatInputProps) {
                     </AlertDialog>
                 )
             }
+            {
+                (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}
@@ -148,7 +256,7 @@ function ChatInputArea(props: ChatInputProps) {
                     onClick={handleFileButtonClick}>
                     <FileArrowUp weight='fill' />
                 </Button>
-            <div className="grid w-full gap-1.5">
+                <div className="grid w-full gap-1.5 relative">
                     <Textarea
                         className='border-none min-h-[20px]'
                         placeholder="Type / to see a list of commands"
@@ -175,6 +283,7 @@ function ChatInputArea(props: ChatInputProps) {
                     disabled={props.sendDisabled}>
                     <ArrowCircleUp />
                 </Button>
+            </div>
         </>
     )
 }
@@ -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);

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>
     )

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);

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>

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: {}
+                    onlineContext: {},
-                }
+                }}
-            } setReferencePanelData={() => {}} setShowReferencePanel={() => {}} />
+                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>

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(