Modularize code and implemenet share experience

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -29,6 +29,7 @@ interface ChatHistoryProps {
     setTitle: (title: string) => void;
     incomingMessages?: StreamMessage[];
     pendingMessage?: string;
+    publicConversationSlug?: string;
 }
 
 
@@ -51,7 +52,6 @@ function constructTrainOfThought(trainOfThought: string[], lastMessage: boolean,
 
 export default function ChatHistory(props: ChatHistoryProps) {
     const [data, setData] = useState<ChatHistoryData | null>(null);
-    const [isLoading, setLoading] = useState(true);
     const [currentPage, setCurrentPage] = useState(0);
     const [hasMoreMessages, setHasMoreMessages] = useState(true);
 
@@ -117,38 +117,8 @@ export default function ChatHistory(props: ChatHistoryProps) {
         setData(null);
     }, [props.conversationId]);
 
-    const fetchMoreMessages = (currentPage: number) => {
-        if (!hasMoreMessages || fetchingData) return;
-        const nextPage = currentPage + 1;
-        fetch(`/api/chat/history?client=web&conversation_id=${props.conversationId}&n=${10 * nextPage}`)
-            .then(response => response.json())
-            .then((chatData: ChatResponse) => {
-                props.setTitle(chatData.response.slug);
-                if (chatData && chatData.response && chatData.response.chat.length > 0) {
-
-                    if (chatData.response.chat.length === data?.chat.length) {
-                        setHasMoreMessages(false);
-                        setFetchingData(false);
-                        return;
-                    }
-
-                    setData(chatData.response);
-                    setLoading(false);
-
-                    if (currentPage < 2) {
-                        scrollToBottom();
-                    }
-                    setFetchingData(false);
-                } else {
-                    setHasMoreMessages(false);
-                }
-            })
-            .catch(err => {
-                console.error(err);
-            });
-    };
-
     useEffect(() => {
+        console.log(props.incomingMessages);
         if (props.incomingMessages) {
             const lastMessage = props.incomingMessages[props.incomingMessages.length - 1];
             if (lastMessage && !lastMessage.completed) {
@@ -162,25 +132,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
 
     }, [props.incomingMessages]);
 
-    const scrollToBottom = () => {
-        if (chatHistoryRef.current) {
-            chatHistoryRef.current.scrollIntoView(false);
-        }
-    }
-
-    const isUserAtBottom = () => {
-        if (!chatHistoryRef.current) return false;
-
-        // NOTE: This isn't working. It always seems to return true. This is because
-
-        const { scrollTop, scrollHeight, clientHeight } = chatHistoryRef.current as HTMLDivElement;
-        const threshold = 25; // pixels from the bottom
-
-        // Considered at the bottom if within threshold pixels from the bottom
-        return scrollTop + clientHeight >= scrollHeight - threshold;
-    }
-
-
     useEffect(() => {
         const observer = new MutationObserver((mutationsList, observer) => {
             // If the addedNodes property has one or more nodes
@@ -207,9 +158,64 @@ export default function ChatHistory(props: ChatHistoryProps) {
         return () => observer.disconnect();
     }, []);
 
-    // if (isLoading) {
-    //     return <Loading />;
-    // }
+    const fetchMoreMessages = (currentPage: number) => {
+        if (!hasMoreMessages || fetchingData) return;
+        const nextPage = currentPage + 1;
+
+        let conversationFetchURL = '';
+
+        if (props.conversationId) {
+            conversationFetchURL = `/api/chat/history?client=web&conversation_id=${props.conversationId}&n=${10 * nextPage}`;
+        } else if (props.publicConversationSlug) {
+            conversationFetchURL = `/api/chat/share/history?client=web&public_conversation_slug=${props.publicConversationSlug}&n=${10 * nextPage}`;
+        } else {
+            return;
+        }
+
+        fetch(conversationFetchURL)
+            .then(response => response.json())
+            .then((chatData: ChatResponse) => {
+                props.setTitle(chatData.response.slug);
+                if (chatData && chatData.response && chatData.response.chat.length > 0) {
+
+                    if (chatData.response.chat.length === data?.chat.length) {
+                        setHasMoreMessages(false);
+                        setFetchingData(false);
+                        return;
+                    }
+
+                    setData(chatData.response);
+
+                    if (currentPage < 2) {
+                        scrollToBottom();
+                    }
+                    setFetchingData(false);
+                } else {
+                    setHasMoreMessages(false);
+                }
+            })
+            .catch(err => {
+                console.error(err);
+            });
+    };
+
+    const scrollToBottom = () => {
+        if (chatHistoryRef.current) {
+            chatHistoryRef.current.scrollIntoView(false);
+        }
+    }
+
+    const isUserAtBottom = () => {
+        if (!chatHistoryRef.current) return false;
+
+        // NOTE: This isn't working. It always seems to return true. This is because
+
+        const { scrollTop, scrollHeight, clientHeight } = chatHistoryRef.current as HTMLDivElement;
+        const threshold = 25; // pixels from the bottom
+
+        // Considered at the bottom if within threshold pixels from the bottom
+        return scrollTop + clientHeight >= scrollHeight - threshold;
+    }
 
     function constructAgentLink() {
         if (!data || !data.agent || !data.agent.slug) return `/agents`;
@@ -226,6 +232,11 @@ export default function ChatHistory(props: ChatHistoryProps) {
         return data.agent.name;
     }
 
+
+    if (!props.conversationId && !props.publicConversationSlug) {
+        return null;
+    }
+
     return (
         <ScrollArea className={`h-[80vh]`}>
             <div ref={ref}>

src/interface/web/app/components/chatInputArea/chatInputArea.module.css

@@ -0,0 +1,4 @@
+div.actualInputArea {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+}

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -0,0 +1,291 @@
+
+import styles from './chatInputArea.module.css';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { uploadDataForIndexing } from '../../common/chatFunctions';
+import { Progress } from "@/components/ui/progress"
+
+import 'katex/dist/katex.min.css';
+import {
+    ArrowCircleUp,
+    ArrowRight,
+    Browser,
+    ChatsTeardrop,
+    FileArrowUp,
+    GlobeSimple,
+    Gps,
+    Image,
+    Microphone,
+    Notebook,
+    Question,
+    Robot,
+    Shapes
+} from '@phosphor-icons/react';
+
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+} from "@/components/ui/command"
+
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from '@/components/ui/button';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogHeader,
+    AlertDialogTitle
+} from '@/components/ui/alert-dialog';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { PopoverTrigger } from '@radix-ui/react-popover';
+
+export interface ChatOptions {
+    [key: string]: string
+}
+
+interface ChatInputProps {
+    sendMessage: (message: string) => void;
+    sendDisabled: boolean;
+    setUploadedFiles?: (files: string[]) => void;
+    conversationId?: string | null;
+    chatOptionsData?: ChatOptions | null;
+    isMobileWidth?: boolean;
+    isLoggedIn: boolean;
+}
+
+export default function ChatInputArea(props: ChatInputProps) {
+    const [message, setMessage] = useState('');
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const [warning, setWarning] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [uploading, setUploading] = useState(false);
+
+    const [progressValue, setProgressValue] = useState(0);
+
+    useEffect(() => {
+        if (!uploading) {
+            setProgressValue(0);
+        }
+
+        if (uploading) {
+            const interval = setInterval(() => {
+                setProgressValue((prev) => {
+                    const increment = Math.floor(Math.random() * 5) + 1; // Generates a random number between 1 and 5
+                    const nextValue = prev + increment;
+                    return nextValue < 100 ? nextValue : 100; // Ensures progress does not exceed 100
+                });
+            }, 800);
+            return () => clearInterval(interval);
+        }
+    }, [uploading]);
+
+    function onSendMessage() {
+        props.sendMessage(message);
+        setMessage('');
+    }
+
+    function handleSlashCommandClick(command: string) {
+        setMessage(`/${command} `);
+    }
+
+    function handleFileButtonClick() {
+        if (!fileInputRef.current) return;
+        fileInputRef.current.click();
+    }
+
+    function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+        if (!event.target.files) return;
+
+        uploadDataForIndexing(
+            event.target.files,
+            setWarning,
+            setUploading,
+            setError,
+            props.setUploadedFiles,
+            props.conversationId);
+    }
+
+    function getIconForSlashCommand(command: string) {
+        if (command.includes('summarize')) {
+            return <Gps className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('help')) {
+            return <Question className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('automation')) {
+            return <Robot className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('webpage')) {
+            return <Browser className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('notes')) {
+            return <Notebook className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('image')) {
+            return <Image className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('default')) {
+            return <Shapes className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('general')) {
+            return <ChatsTeardrop className='h-4 w-4 mr-2' />
+        }
+
+        if (command.includes('online')) {
+            return <GlobeSimple className='h-4 w-4 mr-2' />
+        }
+        return <ArrowRight className='h-4 w-4 mr-2' />
+    }
+
+    return (
+        <>
+            {
+                uploading && (
+                    <AlertDialog
+                        open={uploading}>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Uploading data. Please wait.</AlertDialogTitle>
+                            </AlertDialogHeader>
+                            <AlertDialogDescription>
+                                <Progress
+                                    indicatorColor='bg-slate-500'
+                                    className='w-full h-2 rounded-full'
+                                    value={progressValue} />
+                            </AlertDialogDescription>
+                            <AlertDialogAction className='bg-slate-400 hover:bg-slate-500' onClick={() => setUploading(false)}>Dismiss</AlertDialogAction>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                )}
+            {
+                warning && (
+                    <AlertDialog
+                        open={warning !== null}>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Data Upload Warning</AlertDialogTitle>
+                            </AlertDialogHeader>
+                            <AlertDialogDescription>{warning}</AlertDialogDescription>
+                            <AlertDialogAction className='bg-slate-400 hover:bg-slate-500' onClick={() => setWarning(null)}>Close</AlertDialogAction>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                )
+            }
+            {
+                error && (
+                    <AlertDialog
+                        open={error !== null}>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Oh no!</AlertDialogTitle>
+                                <AlertDialogDescription>Something went wrong while uploading your data</AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogDescription>{error}</AlertDialogDescription>
+                            <AlertDialogAction className='bg-slate-400 hover:bg-slate-500' onClick={() => setError(null)}>Close</AlertDialogAction>
+                        </AlertDialogContent>
+                    </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'} rounded-md`}>
+                            <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}
+                                                className={`text-md`}
+                                                onSelect={() => handleSlashCommandClick(key)}>
+                                                <div
+                                                    className='grid grid-cols-1 gap-1'>
+                                                    <div
+                                                        className='font-bold flex items-center'>
+                                                        {getIconForSlashCommand(key)}
+                                                        /{key}
+                                                    </div>
+                                                    <div>
+                                                        {value}
+                                                    </div>
+                                                </div>
+                                            </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>
+        </>
+    )
+}

src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx

@@ -632,7 +632,7 @@ const fetchChatHistory = async (url: string) => {
     return response.json();
 };
 
-export const useChatHistoryRecentFetchRequest = (url: string) => {
+export const useChatSessionsFetchRequest = (url: string) => {
     const { data, error } = useSWR<ChatHistory[]>(url, fetchChatHistory);
 
     return {
@@ -658,13 +658,13 @@ export default function SidePanel(props: SidePanelProps) {
 
     const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
 
-    const { data: chatHistory } = useChatHistoryRecentFetchRequest('/api/chat/sessions');
+    const { data: chatSessions } = useChatSessionsFetchRequest('/api/chat/sessions');
 
     const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     useEffect(() => {
-        if (chatHistory) {
-            setData(chatHistory);
+        if (chatSessions) {
+            setData(chatSessions);
 
             const groupedData: GroupedChatHistory = {};
             const subsetOrganizedData: GroupedChatHistory = {};
@@ -672,7 +672,7 @@ export default function SidePanel(props: SidePanelProps) {
 
             const currentDate = new Date();
 
-            chatHistory.forEach((chatHistory) => {
+            chatSessions.forEach((chatHistory) => {
                 const chatDate = new Date(chatHistory.created);
                 const diffTime = Math.abs(currentDate.getTime() - chatDate.getTime());
                 const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
@@ -697,7 +697,7 @@ export default function SidePanel(props: SidePanelProps) {
             setSubsetOrganizedData(subsetOrganizedData);
             setOrganizedData(groupedData);
         }
-    }, [chatHistory]);
+    }, [chatSessions]);
 
     useEffect(() => {
         if (window.innerWidth < 768) {
@@ -722,14 +722,11 @@ export default function SidePanel(props: SidePanelProps) {
     return (
         <div className={`${styles.panel} ${enabled ? styles.expanded : styles.collapsed}`}>
             <div className="flex items-start justify-between">
-                <Image src="khoj-logo.svg"
+                <Image src="/khoj-logo.svg"
                     alt="logo"
                     width={40}
                     height={40}
                 />
-                {/* <button className={styles.button} onClick={() => setEnabled(!enabled)}>
-                    {enabled ? <ArrowLeft className="h-4 w-4" /> : <ArrowRight className="h-4 w-4 mx-2" />}
-                </button> */}
                 {
                     isMobileWidth ?
                         <Drawer>