Nav Menu Upgrades and Minor UX Improvements (#869)

* Converted navigation menu into a dropdown menu
* Moved collapsed side panel menu icons into top row
* Auto refresh when conversation is deleted to update side panel and route back to main page if deletion is on current conversation
* Highlight the current conversation in the side panel
* Dynamic homepage messages with current day and time of day.
* `colorutils` upgraded to have more expansive tailwind color options and dynamic class name generation.
* Converted create agent button alert into shadcn `ToolTip`
* Colored lines and icons for agents in chat window
* Cleaned up border styling in dark mode
* fixed three dot menu in side panel to be more easier to click
* Add the KhojLogo import in the nav menu and use a default user profile icon when not authenticated
* Get rid of custom --box-shadow CSS variable
* Pass the agent metadat through the chat body data in order to style the send button
* Add login to the unauthenticated login view, redirecto to home if conversation history not loaded
* Set a max height for the input text area
* Simplify tailwind class names

---------

Co-authored-by: sabaimran <narmiabas@gmail.com>

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

@@ -16,6 +16,7 @@ import { useAuthenticatedData } from '@/app/common/auth';
 import ChatInputArea, { ChatOptions } from '@/app/components/chatInputArea/chatInputArea';
 import { StreamMessage } from '@/app/components/chatMessage/chatMessage';
 import { handleCompiledReferences, handleImageResponse, setupWebSocket } from '@/app/common/chatFunctions';
+import { AgentData } from '@/app/agents/page';
 
 
 interface ChatBodyDataProps {
@@ -34,6 +35,7 @@ interface ChatBodyDataProps {
 function ChatBodyData(props: ChatBodyDataProps) {
     const [message, setMessage] = useState('');
     const [processingMessage, setProcessingMessage] = useState(false);
+    const [agentMetadata, setAgentMetadata] = useState<AgentData | null>(null);
 
     useEffect(() => {
         if (message) {
@@ -68,17 +70,19 @@ function ChatBodyData(props: ChatBodyDataProps) {
                 <ChatHistory
                     publicConversationSlug={props.publicConversationSlug}
                     conversationId={props.conversationId || ''}
+                    setAgent={setAgentMetadata}
                     setTitle={props.setTitle}
                     pendingMessage={processingMessage ? message : ''}
                     incomingMessages={props.streamedMessages} />
             </div>
-            <div className={`${styles.inputBox} bg-background align-middle items-center justify-center px-3`}>
+            <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3`}>
                 <ChatInputArea
                     isLoggedIn={props.isLoggedIn}
                     sendMessage={(message) => setMessage(message)}
                     sendDisabled={processingMessage}
                     chatOptionsData={props.chatOptionsData}
                     conversationId={props.conversationId}
+                    agentColor={agentMetadata?.color}
                     isMobileWidth={props.isMobileWidth}
                     setUploadedFiles={props.setUploadedFiles} />
             </div>

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

@@ -13,7 +13,6 @@ div.main {
 div.inputBox {
     border: 1px solid var(--border-color);
     border-radius: 16px;
-    box-shadow: 0 4px 10px var(--box-shadow-color);
     margin-bottom: 20px;
     gap: 12px;
     padding-left: 20px;