From 541ce04ebcc9d6bca7d347c637493a75503da33a Mon Sep 17 00:00:00 2001 From: sabaimran Date: Tue, 2 Jul 2024 11:18:50 +0530 Subject: [PATCH 001/199] Checkpoint: Updated sidebar panel with new components - Add non-functional UI elements for chat, references, feedback buttons, rename/share session, mic, attachment, websocket connection --- src/interface/web/app/agents/page.tsx | 2 +- src/interface/web/app/chat/chat.module.css | 62 ++- src/interface/web/app/chat/page.tsx | 125 ++++-- src/interface/web/app/common/chatFunctions.ts | 110 ++++++ .../chatHistory/chatHistory.module.css | 12 +- .../components/chatHistory/chatHistory.tsx | 54 ++- .../chatMessage/chatMessage.module.css | 55 ++- .../components/chatMessage/chatMessage.tsx | 114 +++--- .../app/components/loading/loading.module.css | 24 ++ .../web/app/components/loading/loading.tsx | 26 ++ .../app/components/navMenu/navMenu.module.css | 39 +- .../web/app/components/navMenu/navMenu.tsx | 195 +++++----- .../referencePanel/referencePanel.module.css | 11 +- .../referencePanel/referencePanel.tsx | 21 +- .../sidePanel/chatHistorySidePanel.tsx | 356 ++++++++++++++---- .../components/sidePanel/sidePanel.module.css | 60 ++- src/interface/web/app/globals.css | 7 + src/interface/web/components/ui/avatar.tsx | 50 +++ .../web/components/ui/dropdown-menu.tsx | 200 ++++++++++ src/interface/web/components/ui/menubar.tsx | 236 ++++++++++++ .../web/components/ui/navigation-menu.tsx | 128 +++++++ .../web/components/ui/scroll-area.tsx | 48 +++ src/interface/web/components/ui/textarea.tsx | 24 ++ src/interface/web/package.json | 6 + src/interface/web/yarn.lock | 219 +++++++++++ src/khoj/database/adapters/__init__.py | 6 +- src/khoj/routers/api_chat.py | 69 +--- 27 files changed, 1874 insertions(+), 385 deletions(-) create mode 100644 src/interface/web/app/components/loading/loading.module.css create mode 100644 src/interface/web/app/components/loading/loading.tsx create mode 100644 src/interface/web/components/ui/avatar.tsx create mode 100644 src/interface/web/components/ui/dropdown-menu.tsx create mode 100644 src/interface/web/components/ui/menubar.tsx create mode 100644 src/interface/web/components/ui/navigation-menu.tsx create mode 100644 src/interface/web/components/ui/scroll-area.tsx create mode 100644 src/interface/web/components/ui/textarea.tsx diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx index 4ea1c7fe..458031a1 100644 --- a/src/interface/web/app/agents/page.tsx +++ b/src/interface/web/app/agents/page.tsx @@ -96,7 +96,7 @@ function AgentModal(props: AgentModalProps) { props.setShowModal(false); }}> Close diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css index 56b15d30..2ab692ea 100644 --- a/src/interface/web/app/chat/chat.module.css +++ b/src/interface/web/app/chat/chat.module.css @@ -12,23 +12,27 @@ div.main { div.inputBox { display: grid; - grid-template-columns: 1fr auto; - padding: 1rem; - border-radius: 1rem; - background-color: #f5f5f5; - box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1); + grid-template-columns: auto 1fr auto auto; + border: 1px solid var(--border-color); + border-radius: 16px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); + margin-bottom: 20px; + gap: 12px; + padding-left: 20px; + padding-right: 20px; } input.inputBox { border: none; +} + +input.inputBox:focus { outline: none; background-color: transparent; } -input.inputBox:focus { - border: none; - outline: none; - background-color: transparent; +div.inputBox:focus { + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } div.chatBodyFull { @@ -65,9 +69,7 @@ div.chatLayout { div.chatBox { display: grid; - gap: 1rem; height: 100%; - padding: 1rem; } div.titleBar { @@ -75,6 +77,25 @@ div.titleBar { grid-template-columns: 1fr auto; } +div.chatBoxBody { + display: grid; + height: 100%; + width: 70%; + margin: auto; +} + +div.agentIndicator a { + display: flex; + text-align: center; + align-content: center; + align-items: center; +} + +div.agentIndicator { + padding: 10px; +} + + @media (max-width: 768px) { div.chatBody { grid-template-columns: 0fr 1fr; @@ -84,3 +105,22 @@ div.titleBar { padding: 0; } } + +@media screen and (max-width: 768px) { + div.inputBox { + margin-bottom: 0px; + } + + div.chatBoxBody { + width: 100%; + } + + div.chatBox { + padding: 0; + } + + div.chatLayout { + gap: 0; + } + +} diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index ab7b16d7..3294adb8 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -6,54 +6,69 @@ import React, { Suspense, useEffect, useState } from 'react'; import SuggestionCard from '../components/suggestions/suggestionCard'; import SidePanel from '../components/sidePanel/chatHistorySidePanel'; import ChatHistory from '../components/chatHistory/chatHistory'; -import { SingleChatMessage } from '../components/chatMessage/chatMessage'; import NavMenu from '../components/navMenu/navMenu'; import { useSearchParams } from 'next/navigation' -import ReferencePanel, { hasValidReferences } from '../components/referencePanel/referencePanel'; +import Loading from '../components/loading/loading'; + +import { setupWebSocket } from '../common/chatFunctions'; import 'katex/dist/katex.min.css'; +import { Lightbulb, ArrowCircleUp, FileArrowUp, Microphone } from '@phosphor-icons/react'; + +import { Label } from "@/components/ui/label" +import { Textarea } from "@/components/ui/textarea" +import { Button } from '@/components/ui/button'; + +export function TextareaWithLabel() { + return ( +
+ {/* */} +