Modularize code and implemenet share experience

src/interface/web/app/chat/chat.module.css

@@ -21,11 +21,6 @@ div.inputBox {
     align-content: center;
 }
 
-div.actualInputArea {
-    display: grid;
-    grid-template-columns: auto 1fr auto auto;
-}
-
 input.inputBox {
     border: none;
 }

src/interface/web/app/chat/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import styles from './chat.module.css';
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 
 import SuggestionCard from '../components/suggestions/suggestionCard';
 import SidePanel from '../components/sidePanel/chatHistorySidePanel';
@@ -10,289 +10,16 @@ import NavMenu from '../components/navMenu/navMenu';
 import { useSearchParams } from 'next/navigation'
 import Loading from '../components/loading/loading';
 
-import { handleCompiledReferences, handleImageResponse, setupWebSocket, uploadDataForIndexing } from '../common/chatFunctions';
-import { Progress } from "@/components/ui/progress"
+import { handleCompiledReferences, handleImageResponse, setupWebSocket } from '../common/chatFunctions';
 
 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,
-    CommandDialog,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-    CommandShortcut,
-} from "@/components/ui/command"
-
-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';
 import { welcomeConsole } from '../common/utils';
+import ChatInputArea, { ChatOptions } from '../components/chatInputArea/chatInputArea';
+import { useAuthenticatedData } from '../common/auth';
 
-interface ChatInputProps {
-    sendMessage: (message: string) => void;
-    sendDisabled: boolean;
-    setUploadedFiles?: (files: string[]) => void;
-    conversationId?: string | null;
-    chatOptionsData?: ChatOptions | null;
-    isMobileWidth?: boolean;
-}
 
-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>
-        </>
-    )
-}
-
-interface ChatOptions {
-    [key: string]: string
-}
 const styleClassOptions = ['pink', 'blue', 'green', 'yellow', 'purple'];
 
 interface ChatBodyDataProps {
@@ -303,6 +30,7 @@ interface ChatBodyDataProps {
     streamedMessages: StreamMessage[];
     setUploadedFiles: (files: string[]) => void;
     isMobileWidth?: boolean;
+    isLoggedIn: boolean;
 }
 
 
@@ -363,6 +91,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             </div>
             <div className={`${styles.inputBox} bg-background align-middle items-center justify-center px-3`}>
                 <ChatInputArea
+                    isLoggedIn={props.isLoggedIn}
                     sendMessage={(message) => setMessage(message)}
                     sendDisabled={processingMessage}
                     chatOptionsData={props.chatOptionsData}
@@ -386,6 +115,7 @@ export default function Chat() {
     const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
     const [isMobileWidth, setIsMobileWidth] = useState(false);
 
+    const authenticatedData = useAuthenticatedData();
 
     welcomeConsole();
 
@@ -492,7 +222,6 @@ export default function Chat() {
                 rawQuery: queryToProcess || "",
             }
             setMessages(prevMessages => [...prevMessages, newStreamMessage]);
-            console.log("Messages", messages);
             setProcessQuerySignal(true);
         } else {
             if (!chatWS) {
@@ -537,13 +266,17 @@ export default function Chat() {
                 {title}
             </title>
             <div className={styles.sidePanel}>
-                <SidePanel webSocketConnected={chatWS !== null} conversationId={conversationId} uploadedFiles={uploadedFiles} />
+                <SidePanel
+                    webSocketConnected={chatWS !== null}
+                    conversationId={conversationId}
+                    uploadedFiles={uploadedFiles} />
             </div>
             <div className={styles.chatBox}>
                 <NavMenu selected="Chat" title={title} />
                 <div className={styles.chatBoxBody}>
                     <Suspense fallback={<Loading />}>
                         <ChatBodyData
+                            isLoggedIn={authenticatedData !== null}
                             streamedMessages={messages}
                             chatOptionsData={chatOptionsData}
                             setTitle={setTitle}