Add pop-up module for the slash commands

2024-11-23 23:48:56 +01:00 · 2024-07-09 19:46:17 +05:30 · 2024-07-09 19:46:17 +05:30 · cc22e1b013
commit cc22e1b013
parent 5b69252337
7 changed files with 193 additions and 79 deletions
--- 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 {
--- 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);
--- 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>
    )
--- 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);
--- 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>
--- 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>
--- 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(