From 68af10c805b0e1c0fd8ff5d16b175a5bfeeaba44 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 20:10:03 -0800 Subject: [PATCH 1/9] Use the new shadcn sidebar for khoj nav and actions - Use the sidebar across all pages to quickly navigate through the app, access settings, and go to past chats - Pending: mobile friendliness --- src/interface/web/app/agents/page.tsx | 183 +-- src/interface/web/app/automations/page.tsx | 225 +-- src/interface/web/app/chat/chat.module.css | 2 + src/interface/web/app/chat/page.tsx | 91 +- .../allConversations.tsx} | 291 ++-- .../sidePanel.module.css | 8 + .../app/components/appSidebar/appSidebar.tsx | 130 ++ .../web/app/components/navMenu/navMenu.tsx | 282 +--- src/interface/web/app/layout.tsx | 3 + src/interface/web/app/page.module.css | 4 +- src/interface/web/app/page.tsx | 39 +- src/interface/web/app/search/page.tsx | 5 - src/interface/web/app/settings/page.tsx | 1225 +++++++++-------- src/interface/web/app/share/chat/page.tsx | 79 +- .../web/app/share/chat/sharedChat.module.css | 2 + src/interface/web/components/ui/sidebar.tsx | 4 +- 16 files changed, 1245 insertions(+), 1328 deletions(-) rename src/interface/web/app/components/{sidePanel/chatHistorySidePanel.tsx => allConversations/allConversations.tsx} (78%) rename src/interface/web/app/components/{sidePanel => allConversations}/sidePanel.module.css (97%) create mode 100644 src/interface/web/app/components/appSidebar/appSidebar.tsx diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx index 58abe7fa0..614e4ef99 100644 --- a/src/interface/web/app/agents/page.tsx +++ b/src/interface/web/app/agents/page.tsx @@ -19,7 +19,6 @@ import { z } from "zod"; import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "@/components/ui/dialog"; import LoginPrompt from "../components/loginPrompt/loginPrompt"; import { InlineLoading } from "../components/loading/loading"; -import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { useIsMobileWidth } from "../common/utils"; import { @@ -30,6 +29,8 @@ import { import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "../components/appSidebar/appSidebar"; export interface AgentData { slug: string; @@ -276,107 +277,113 @@ export default function Agents() { ); return ( -
-
-
- -
-
-
-

Agents

-
- -
-
- {showLoginPrompt && ( - - )} - - - - How it works Use any of these - specialized personas to tune your conversation to your needs. - - -
-
- {personalAgents.map((agent) => ( - + + +
+
+
+
+

Agents

+
+ - ))} +
-
-
-

Explore

-
- {publicAgents.map((agent) => ( - + )} + + + - ))} + How it works Use any of these + specialized personas to tune your conversation to your needs. + + +
+
+ {personalAgents.map((agent) => ( + + ))} +
+
+
+

Explore

+
+ {publicAgents.map((agent) => ( + + ))} +
-
-
+
+ ); } diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx index d71d96af5..2cc70399e 100644 --- a/src/interface/web/app/automations/page.tsx +++ b/src/interface/web/app/automations/page.tsx @@ -66,8 +66,9 @@ import LoginPrompt from "../components/loginPrompt/loginPrompt"; import { useToast } from "@/components/ui/use-toast"; import { ToastAction } from "@/components/ui/toast"; import { Alert, AlertDescription } from "@/components/ui/alert"; -import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "../components/appSidebar/appSidebar"; const automationsFetcher = () => window @@ -1023,94 +1024,106 @@ export default function Automations() { return ; return ( -
-
-
- -
-
-
-

Automations

-
+ + + +
+
+
+
+

Automations

+
+ {authenticatedData ? ( + + + {authenticatedData.email} + + ) : null} + {locationData && ( + + + {locationData + ? `${locationData.city}, ${locationData.country}` + : "Unknown"} + + )} + {locationData && ( + + + {locationData ? `${locationData.timezone}` : "Unknown"} + + )} +
+
+ {showLoginPrompt && ( + + )} + + + + How it works Automations help you + structure your time by automating tasks you do regularly. Build your + own, or try out our presets. Get results straight to your inbox. + + +
{authenticatedData ? ( - - - {authenticatedData.email} - - ) : null} - {locationData && ( - - - {locationData - ? `${locationData.city}, ${locationData.country}` - : "Unknown"} - - )} - {locationData && ( - - - {locationData ? `${locationData.timezone}` : "Unknown"} - + + ) : ( + )}
-
- {showLoginPrompt && ( - - )} - - - - How it works Automations help you - structure your time by automating tasks you do regularly. Build your - own, or try out our presets. Get results straight to your inbox. - - -
- {authenticatedData ? ( - + - ) : ( - - )} -
- - - - {isLoading && } -
- {personalAutomations && - personalAutomations.map((automation) => ( + + {isLoading && } +
+ {personalAutomations && + personalAutomations.map((automation) => ( + + ))} + {allNewAutomations.map((automation) => ( ))} - {allNewAutomations.map((automation) => ( - - ))} -
-

Explore

-
- {suggestedAutomations.map((automation) => ( - - ))} +
+

Explore

+
+ {suggestedAutomations.map((automation) => ( + + ))} +
-
-
+ + ); } diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css index 69be25b41..d91ad97cc 100644 --- a/src/interface/web/app/chat/chat.module.css +++ b/src/interface/web/app/chat/chat.module.css @@ -1,6 +1,8 @@ div.main { height: 100dvh; color: hsla(var(--foreground)); + margin-left: auto; + margin-right: auto; } .suggestions { diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index ed73e66f4..cdca175ee 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -3,7 +3,6 @@ import styles from "./chat.module.css"; import React, { Suspense, useEffect, useRef, useState } from "react"; -import SidePanel, { ChatSessionActionMenu } from "../components/sidePanel/chatHistorySidePanel"; import ChatHistory from "../components/chatHistory/chatHistory"; import { useSearchParams } from "next/navigation"; import Loading from "../components/loading/loading"; @@ -26,6 +25,9 @@ import { } from "../components/chatInputArea/chatInputArea"; import { useAuthenticatedData } from "../common/auth"; import { AgentData } from "../agents/page"; +import { ChatSessionActionMenu } from "../components/allConversations/allConversations"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "../components/appSidebar/appSidebar"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -382,54 +384,51 @@ export default function Chat() { if (isLoading) return ; return ( -
- - {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} - -
- -
-
-
- {conversationId && ( -
- {title && ( -

- {title} -

- )} - + + +
+ + {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} + +
+
+ {conversationId && ( +
+ {title && ( +

+ {title} +

+ )} + +
+ )} + }> + -
- )} - }> - - + +
-
+ ); } diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx similarity index 78% rename from src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx rename to src/interface/web/app/components/allConversations/allConversations.tsx index 768917a83..ba28d5d34 100644 --- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx +++ b/src/interface/web/app/components/allConversations/allConversations.tsx @@ -60,6 +60,7 @@ import { NotePencil, FunnelSimple, MagnifyingGlass, + ChatsCircle, } from "@phosphor-icons/react"; interface ChatHistory { @@ -71,7 +72,6 @@ interface ChatHistory { compressed: boolean; created: string; updated: string; - showSidePanel: (isEnabled: boolean) => void; } import { @@ -106,6 +106,15 @@ import { KhojLogoType } from "@/app/components/logo/khojLogo"; import NavMenu from "@/app/components/navMenu/navMenu"; import { getIconFromIconName } from "@/app/common/iconUtils"; import LoginPrompt from "../loginPrompt/loginPrompt"; +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSkeleton, +} from "@/components/ui/sidebar"; // Define a fetcher function const fetcher = (url: string) => @@ -403,7 +412,6 @@ function FilesMenu(props: FilesMenuProps) { } interface SessionsAndFilesProps { - setEnabled: (enabled: boolean) => void; subsetOrganizedData: GroupedChatHistory | null; organizedData: GroupedChatHistory | null; data: ChatHistory[] | null; @@ -411,32 +419,28 @@ interface SessionsAndFilesProps { conversationId: string | null; uploadedFiles: string[]; isMobileWidth: boolean; + sideBarOpen: boolean; } function SessionsAndFiles(props: SessionsAndFilesProps) { return ( - <> -
- {props.data && props.data.length > 5 && ( - - )} +
+ {props.data && props.data.length > 5 && ( + + )} + {props.sideBarOpen && ( -
+
{props.subsetOrganizedData != null && Object.keys(props.subsetOrganizedData) .filter((tg) => tg !== "All Time") .map((timeGrouping) => ( -
-
+
+
{timeGrouping}
{props.subsetOrganizedData && @@ -454,7 +458,6 @@ function SessionsAndFiles(props: SessionsAndFilesProps) { agent_name={chatHistory.agent_name} agent_color={chatHistory.agent_color} agent_icon={chatHistory.agent_icon} - showSidePanel={props.setEnabled} /> ), )} @@ -462,13 +465,8 @@ function SessionsAndFiles(props: SessionsAndFilesProps) { ))}
-
- - + )} +
); } @@ -638,41 +636,31 @@ export function ChatSessionActionMenu(props: ChatSessionActionMenuProps) { )} setIsOpen(open)} open={isOpen}> - - + + + + - - - + {props.sizing === "sm" && ( - - + )} - - + @@ -686,30 +674,36 @@ function ChatSession(props: ChatHistory) { var currConversationId = new URLSearchParams(window.location.search).get("conversationId") || "-1"; return ( -
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} key={props.conversation_id} className={`${styles.session} ${props.compressed ? styles.compressed : "!max-w-full"} ${isHovered ? `${styles.sessionHover}` : ""} ${currConversationId === props.conversation_id && currConversationId != "-1" ? "dark:bg-neutral-800 bg-white" : ""}`} > - props.showSidePanel(false)} - > -

{title}

- + + +

+ {title} +

+ + -
+ ); } interface ChatSessionsModalProps { data: GroupedChatHistory | null; - showSidePanel: (isEnabled: boolean) => void; + sideBarOpen: boolean; } interface AgentStyle { @@ -717,7 +711,7 @@ interface AgentStyle { icon: string; } -function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) { +function ChatSessionsModal({ data, sideBarOpen }: ChatSessionsModalProps) { const [agentsFilter, setAgentsFilter] = useState([]); const [agentOptions, setAgentOptions] = useState([]); const [searchQuery, setSearchQuery] = useState(""); @@ -786,10 +780,12 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) { return ( - + - Find - Conversation + + {sideBarOpen ? "Find Conversations" : ""} @@ -814,7 +810,6 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) { - {/* */} Agents {agentOptions.map((agent) => ( @@ -841,7 +836,6 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
))} - {/* */}
@@ -865,7 +859,6 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) { agent_name={chatHistory.agent_name} agent_color={chatHistory.agent_color} agent_icon={chatHistory.agent_icon} - showSidePanel={showSidePanel} /> ))}
@@ -902,17 +895,17 @@ interface SidePanelProps { conversationId: string | null; uploadedFiles: string[]; isMobileWidth: boolean; + sideBarOpen: boolean; } -export default function SidePanel(props: SidePanelProps) { +export default function AllConversations(props: SidePanelProps) { const [data, setData] = useState(null); const [organizedData, setOrganizedData] = useState(null); const [subsetOrganizedData, setSubsetOrganizedData] = useState(null); - const [enabled, setEnabled] = useState(false); const [showLoginPrompt, setShowLoginPrompt] = useState(false); const authenticatedData = useAuthenticatedData(); - const { data: chatSessions } = useChatSessionsFetchRequest( + const { data: chatSessions, isLoading } = useChatSessionsFetchRequest( authenticatedData ? `/api/chat/sessions` : "", ); @@ -953,135 +946,49 @@ export default function SidePanel(props: SidePanelProps) { } }, [chatSessions]); + if (isLoading) { + return ( + + Conversations + {Array.from({ length: 5 }).map((_, index) => ( + + + + ))} + + ); + } + return ( -
- {showLoginPrompt && ( - - )} -
- {props.isMobileWidth ? ( - { - if (!enabled) setEnabled(false); - setEnabled(open); - }} - > - - - - - - Sessions and Files - - View all conversation sessions and manage conversation file - filters - - - {authenticatedData ? ( -
- -
- ) : ( -
- {" "} - {/* Redirect to login page */} - -
- )} - - - - - - - - ) : ( -
- - - -
- - {enabled ? ( - - ) : ( - - )} - - -
-
- + + Conversations +
+ {authenticatedData && ( + <> +
+
-
- )} - {props.isMobileWidth && ( - - - + {props.sideBarOpen && ( + + )} + )} - {props.isMobileWidth && }
- {authenticatedData && !props.isMobileWidth && enabled && ( -
- -
- )} - {!authenticatedData && enabled && !props.isMobileWidth && ( -
- - - - {" "} - -
- )} -
+ ); } diff --git a/src/interface/web/app/components/sidePanel/sidePanel.module.css b/src/interface/web/app/components/allConversations/sidePanel.module.css similarity index 97% rename from src/interface/web/app/components/sidePanel/sidePanel.module.css rename to src/interface/web/app/components/allConversations/sidePanel.module.css index cf4124523..5a8a1bd68 100644 --- a/src/interface/web/app/components/sidePanel/sidePanel.module.css +++ b/src/interface/web/app/components/allConversations/sidePanel.module.css @@ -74,6 +74,14 @@ p.session { font-size: small; } +p.compressed { + width: 12rem; +} + +p.expanded { + max-width: 20rem; +} + div.header { display: grid; grid-template-columns: 1fr auto; diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx new file mode 100644 index 000000000..2f0f8c66e --- /dev/null +++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx @@ -0,0 +1,130 @@ +import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"; + +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, +} from "@/components/ui/sidebar"; +import Link from "next/link"; +import { + KhojAgentLogo, + KhojAutomationLogo, + KhojLogo, + KhojLogoType, + KhojSearchLogo, +} from "../logo/khojLogo"; +import { Gear } from "@phosphor-icons/react/dist/ssr"; +import { House, Plus } from "@phosphor-icons/react"; +import { useEffect, useState } from "react"; +import { useAuthenticatedData } from "@/app/common/auth"; +import AllConversations from "../allConversations/allConversations"; +import NavMenu from "../navMenu/navMenu"; +import { useSidebar } from "@/components/ui/sidebar"; + +// Menu items. +const items = [ + { + title: "New", + url: "/", + icon: Plus, + }, + { + title: "Agents", + url: "/agents", + icon: KhojAgentLogo, + }, + { + title: "Automations", + url: "/automations", + icon: KhojAutomationLogo, + }, + { + title: "Search", + url: "/search", + icon: KhojSearchLogo, + }, + { + title: "Settings", + url: "/settings", + icon: Gear, + }, +]; + +const SIDEBAR_KEYBOARD_SHORTCUT = "b"; +const SIDEBAR_WIDTH = "18rem"; +const SIDEBAR_WIDTH_MOBILE = "20rem"; + +interface AppSidebarProps { + conversationId: string | null; +} + +export function AppSidebar(props: AppSidebarProps) { + const [isMobileWidth, setIsMobileWidth] = useState(false); + + const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = + useSidebar(); + + useEffect(() => { + const handleResize = () => { + setIsMobileWidth(window.innerWidth < 768); + }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + return ( + + + + + + + + Khoj + + + + + + + + + + {items.map((item) => ( + + + + + {item.title} + + + + ))} + + + + + + + + + + ); +} diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx index 6ad767a18..b90fa9514 100644 --- a/src/interface/web/app/components/navMenu/navMenu.tsx +++ b/src/interface/web/app/components/navMenu/navMenu.tsx @@ -27,6 +27,8 @@ import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojL import { useIsMobileWidth } from "@/app/common/utils"; import LoginPrompt from "../loginPrompt/loginPrompt"; import { Button } from "@/components/ui/button"; +import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"; +import { ChevronUp } from "lucide-react"; function SubscriptionBadge({ is_active }: { is_active: boolean }) { return ( @@ -48,7 +50,11 @@ function VersionBadge({ version }: { version: string }) { ); } -export default function NavMenu() { +interface NavMenuProps { + sideBarIsOpen: boolean; +} + +export default function NavMenu({ sideBarIsOpen }: NavMenuProps) { const userData = useAuthenticatedData(); const [darkMode, setDarkMode] = useState(false); const [initialLoadDone, setInitialLoadDone] = useState(false); @@ -89,31 +95,34 @@ export default function NavMenu() { } return ( -
- {showLoginPrompt && ( - - )} - {isMobileWidth ? ( + + - - {userData ? ( - - - - {userData?.username[0].toUpperCase()} - - - ) : ( - - )} + + + {userData ? ( + + + + + {userData?.username[0].toUpperCase()} + + + {sideBarIsOpen && ( + <> +

{userData?.username}

+ + + )} + + ) : ( + + )} + - +

{userData?.email}

@@ -123,10 +132,10 @@ export default function NavMenu() { )}
- + setDarkMode(!darkMode)} - className="w-full cursor-pointer" + className="w-full hover:cursor-pointer" >
{darkMode ? ( @@ -140,220 +149,51 @@ export default function NavMenu() {
- +
- -

Agents

+ +

Help

 + - +
- -

Automations

+ +

Releases

 - {userData && ( - - -
- -

Search

-
- - - )} - {userData && ( - - -
- -

Settings

-
- - - )} - <> - + {userData ? ( - +
- -

Help

+ +

Logout

 + ) : ( - setShowLoginPrompt(true)} + className="no-underline w-full text-left p-0 content-start justify-start items-start h-fit" > -
- -

Releases

+
+ +

Login

- + - {userData ? ( - - -
- -

Logout

-
- - - ) : ( - - - - )} - + )} - ) : ( - - - - {userData ? ( - - - - {userData?.username[0].toUpperCase()} - - - ) : ( - - )} - - - -
-

{userData?.email}

- - {userData?.khoj_version && ( - - )} -
- - - setDarkMode(!darkMode)} - className="w-full hover:cursor-pointer" - > -
- {darkMode ? ( - - ) : ( - - )} -

- {darkMode ? "Light Mode" : "Dark Mode"} -

-
- - - -
- -

Agents

-
- - - - -
- -

Automations

-
- - - {userData && ( - - -
- -

Search

-
- - - )} - {userData && ( - - -
- -

Settings

-
- - - )} - <> - - - -
- -

Help

-
- - - - - -
- -

Releases

-
- - - {userData ? ( - - -
- -

Logout

-
- - - ) : ( - - - - )} - - - - - )} -
+ + ); } diff --git a/src/interface/web/app/layout.tsx b/src/interface/web/app/layout.tsx index 3d2cd4f74..8fb49fc11 100644 --- a/src/interface/web/app/layout.tsx +++ b/src/interface/web/app/layout.tsx @@ -3,6 +3,9 @@ import { noto_sans, noto_sans_arabic } from "@/app/fonts"; import "./globals.css"; import { ContentSecurityPolicy } from "./common/layoutHelper"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "@/app/components/appSidebar/appSidebar"; + export const metadata: Metadata = { title: "Khoj AI - Ask Anything", description: diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css index d1041377e..2d5dd0252 100644 --- a/src/interface/web/app/page.module.css +++ b/src/interface/web/app/page.module.css @@ -1,6 +1,8 @@ div.main { height: 100dvh; color: hsla(var(--foreground)); + margin-left: auto; + margin-right: auto; } div.suggestions { @@ -110,7 +112,7 @@ div.sidePanel { div.chatBox { padding: 0; - height: 100%; + height: 100vh; } div.chatLayout { diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index bf7f30d1b..8d8412783 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -9,7 +9,6 @@ import { ArrowCounterClockwise } from "@phosphor-icons/react"; import { Card, CardTitle } from "@/components/ui/card"; import SuggestionCard from "@/app/components/suggestions/suggestionCard"; -import SidePanel from "@/app/components/sidePanel/chatHistorySidePanel"; import Loading from "@/app/components/loading/loading"; import { AttachedFileText, @@ -35,6 +34,8 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { AgentCard } from "@/app/components/agentCard/agentCard"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import LoginPopup from "./components/loginPrompt/loginPopup"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "./components/appSidebar/appSidebar"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -458,28 +459,32 @@ export default function Home() { } return ( -
- Khoj AI - Your Second Brain -
+ + + +
+ Khoj AI - Your Second Brain + {/*
-
-
-
- +
*/} +
+
+ +
-
+ ); } diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx index 5d942819b..960360cfd 100644 --- a/src/interface/web/app/search/page.tsx +++ b/src/interface/web/app/search/page.tsx @@ -2,9 +2,7 @@ import { Input } from "@/components/ui/input"; -import { useAuthenticatedData } from "../common/auth"; import { useEffect, useRef, useState } from "react"; -import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import styles from "./search.module.css"; import { ScrollArea } from "@/components/ui/scroll-area"; import { @@ -229,9 +227,6 @@ export default function Search() { return (
-
- -
diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx index d4785bb1a..3631533dc 100644 --- a/src/interface/web/app/settings/page.tsx +++ b/src/interface/web/app/settings/page.tsx @@ -62,7 +62,6 @@ import { Waveform, } from "@phosphor-icons/react"; -import SidePanel from "../components/sidePanel/chatHistorySidePanel"; import Loading from "../components/loading/loading"; import IntlTelInput from "intl-tel-input/react"; @@ -77,6 +76,8 @@ import { } from "@/components/ui/alert-dialog"; import { Progress } from "@/components/ui/progress"; import Link from "next/link"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "../components/appSidebar/appSidebar"; const ManageFilesModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const [syncedFiles, setSyncedFiles] = useState([]); @@ -854,662 +855,678 @@ export default function SettingsView() { if (!userConfig) return ; return ( -
- {title} -
- -
-
-
- }> -
-
-
Profile
-
- - - - Name - - -

- What should Khoj refer to you as? -

- setName(e.target.value)} - value={name} - className="w-full border border-gray-300 rounded-lg p-4 py-6" - /> - - - - - - - - - Subscription - - -

Current Plan

- {(userConfig.subscription_state === "trial" && ( - <> -

- Futurist (Trial) -

-

- You are on a{" "} - {userConfig.length_of_free_trial} day trial - of the Khoj Futurist plan. Your trial ends - on {userConfig.subscription_renewal_date}. - Check{" "} - - pricing page - {" "} - to compare plans. -

- - )) || - (userConfig.subscription_state === "subscribed" && ( + + + +
+ {title} +
+
+ }> +
+
+
Profile
+
+ + + + Name + + +

+ What should Khoj refer to you as? +

+ setName(e.target.value)} + value={name} + className="w-full border border-gray-300 rounded-lg p-4 py-6" + /> + + + + + + + + + Subscription + + +

Current Plan

+ {(userConfig.subscription_state === "trial" && ( <>

- Futurist -

-

- Subscription renews on{" "} - - { - userConfig.subscription_renewal_date - } - + Futurist (Trial)

- - )) || - (userConfig.subscription_state === - "unsubscribed" && ( - <> -

Futurist

- Subscription ends on{" "} - - { - userConfig.subscription_renewal_date - } - + You are on a{" "} + {userConfig.length_of_free_trial} day + trial of the Khoj Futurist plan. Your + trial ends on{" "} + {userConfig.subscription_renewal_date}. + Check{" "} + + pricing page + {" "} + to compare plans.

)) || - (userConfig.subscription_state === "expired" && ( - <> -

Humanist

- {(userConfig.subscription_renewal_date && ( + (userConfig.subscription_state === + "subscribed" && ( + <> +

+ Futurist +

- Subscription expired on{" "} + Subscription renews on{" "} { userConfig.subscription_renewal_date }

- )) || ( + + )) || + (userConfig.subscription_state === + "unsubscribed" && ( + <> +

Futurist

- Check{" "} - - pricing page - {" "} - to compare plans. + Subscription ends on{" "} + + { + userConfig.subscription_renewal_date + } +

- )} - - ))} - - - {(userConfig.subscription_state == "subscribed" && ( - - )) || - (userConfig.subscription_state == - "unsubscribed" && ( + + )) || + (userConfig.subscription_state === + "expired" && ( + <> +

Humanist

+ {(userConfig.subscription_renewal_date && ( +

+ Subscription expired on{" "} + + { + userConfig.subscription_renewal_date + } + +

+ )) || ( +

+ Check{" "} + + pricing page + {" "} + to compare plans. +

+ )} + + ))} + + + {(userConfig.subscription_state == "subscribed" && ( )) || - (userConfig.subscription_enabled_trial_at && ( - - )) || ( - - )} - - + (userConfig.subscription_state == + "unsubscribed" && ( + + )) || + (userConfig.subscription_enabled_trial_at && ( + + )) || ( + + )} + + +
-
- {isManageFilesModalOpen && ( - setIsManageFilesModalOpen(false)} - /> - )} -
-
Content
-
- - - - Files - {userConfig.enabled_content_source.computer && ( - - )} - - - Manage your synced files - - - - - - - - - - Github - - - Set Github repositories to index - - - - - - - - - - Notion - {userConfig.enabled_content_source.notion && ( - - )} - - -

- Sync your Notion workspace. -

- {!userConfig.notion_oauth_url && ( - setNotionToken(e.target.value)} - value={notionToken || ""} - placeholder="Enter API Key of your Khoj integration on Notion" - className="w-full border border-gray-300 rounded-lg px-4 py-6" - /> - )} - - - { - /* Show connect to notion button if notion oauth url setup and user disconnected*/ - userConfig.notion_oauth_url && - !userConfig.enabled_content_source.notion ? ( - - ) : /* Show sync button if user connected to notion and API key unchanged */ - userConfig.enabled_content_source.notion && - notionToken === userConfig.notion_token ? ( - - ) : /* Show set API key button notion oauth url not set setup */ - !userConfig.notion_oauth_url ? ( - - ) : ( - <> - ) - } - - - -
-
-
-
Models
-
- {userConfig.chat_model_options.length > 0 && ( - - - - Chat - -

- Pick the chat model to generate text responses -

- + + Manage your synced files - {!userConfig.is_active && ( -

- Subscribe to switch model -

- )} + + - )} - {userConfig.paint_model_options.length > 0 && ( - - - - Paint + + + + Github - -

- Pick the paint model to generate image responses -

- + + Set Github repositories to index - {!userConfig.is_active && ( -

- Subscribe to switch model -

- )} + + - )} - {userConfig.voice_model_options.length > 0 && ( - + - - Voice + + Notion + {userConfig.enabled_content_source.notion && ( + + )} - +

- Pick the voice model to generate speech - responses + Sync your Notion workspace.

- + {!userConfig.notion_oauth_url && ( + + setNotionToken(e.target.value) + } + value={notionToken || ""} + placeholder="Enter API Key of your Khoj integration on Notion" + className="w-full border border-gray-300 rounded-lg px-4 py-6" + /> + )} - {!userConfig.is_active && ( -

- Subscribe to switch model -

- )} + { + /* Show connect to notion button if notion oauth url setup and user disconnected*/ + userConfig.notion_oauth_url && + !userConfig.enabled_content_source.notion ? ( + + ) : /* Show sync button if user connected to notion and API key unchanged */ + userConfig.enabled_content_source.notion && + notionToken === userConfig.notion_token ? ( + + ) : /* Show set API key button notion oauth url not set setup */ + !userConfig.notion_oauth_url ? ( + + ) : ( + <> + ) + } + - )} +
-
-
-
- Clients +
+
Models
+
+ {userConfig.chat_model_options.length > 0 && ( + + + + Chat + + +

+ Pick the chat model to generate text + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} + {userConfig.paint_model_options.length > 0 && ( + + + + Paint + + +

+ Pick the paint model to generate image + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} + {userConfig.voice_model_options.length > 0 && ( + + + + Voice + + +

+ Pick the voice model to generate speech + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} +
-
- {!userConfig.anonymous_mode && ( - - - - - API Keys - - - - -

- Access Khoj from the{" "} - +

+
+ {!userConfig.anonymous_mode && ( + + + + + API Keys + + + + +

+ Access Khoj from the{" "} + + Desktop + + ,{" "} + + Obsidian + + ,{" "} + + Emacs + {" "} + apps and more. +

+ + + {apiKeys.map((key) => ( + + + {key.name} + + + + {`${key.token.slice(0, 6)}...${key.token.slice(-4)}`} + +
+ { + toast({ + title: `🔑 Copied API Key: ${key.name}`, + description: `Set this API key in the Khoj apps you want to connect to this Khoj account`, + }); + copyAPIKey( + key.token, + ); + }} + /> + { + toast({ + title: `🔑 Deleted API Key: ${key.name}`, + description: `Apps using this API key will no longer connect to this Khoj account`, + }); + deleteAPIKey( + key.token, + ); + }} + /> +
+ + + ))} + +
+ + + + )} + + + + Chat on Whatsapp + {(numberValidationState === + PhoneNumberValidationState.Verified && ( + - ))} - - -

- Connect your number to chat with Khoj on WhatsApp. - Learn more about the integration{" "} - - here - - . -

-
- - {numberValidationState === - PhoneNumberValidationState.VerifyOTP && ( - <> -

{`Enter the OTP sent to your number: ${phoneNumber}`}

- - setNumberValidationState( - PhoneNumberValidationState.VerifyOTP, - ) - } - > - - - - - - - - - - - )} -
- - - {(numberValidationState === - PhoneNumberValidationState.VerifyOTP && ( - - )) || ( - - )} - {numberValidationState === - PhoneNumberValidationState.Verified && ( - - )} - - +
+ + + {(numberValidationState === + PhoneNumberValidationState.VerifyOTP && ( + + )) || ( + + )} + {numberValidationState === + PhoneNumberValidationState.Verified && ( + + )} + + +
-
- + +
-
+ ); } diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx index 06a75303d..4310d7109 100644 --- a/src/interface/web/app/share/chat/page.tsx +++ b/src/interface/web/app/share/chat/page.tsx @@ -3,7 +3,6 @@ import styles from "./sharedChat.module.css"; import React, { Suspense, useEffect, useRef, useState } from "react"; -import SidePanel from "../../components/sidePanel/chatHistorySidePanel"; import ChatHistory from "../../components/chatHistory/chatHistory"; import Loading from "../../components/loading/loading"; @@ -19,6 +18,8 @@ import { } from "@/app/components/chatInputArea/chatInputArea"; import { StreamMessage } from "@/app/components/chatMessage/chatMessage"; import { AgentData } from "@/app/agents/page"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "@/app/components/appSidebar/appSidebar"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -184,47 +185,43 @@ export default function SharedChat() { } return ( -
- {title} -
- -
- -
-
- {!isMobileWidth && title && ( -
- {title && ( -

- {title} -

- )} -
- )} - }> - - + + + +
+ {title} +
+
+ {!isMobileWidth && title && ( +
+ {title && ( +

+ {title} +

+ )} +
+ )} + }> + + +
-
+ ); } diff --git a/src/interface/web/app/share/chat/sharedChat.module.css b/src/interface/web/app/share/chat/sharedChat.module.css index c1d15fe09..4bb63223c 100644 --- a/src/interface/web/app/share/chat/sharedChat.module.css +++ b/src/interface/web/app/share/chat/sharedChat.module.css @@ -1,6 +1,8 @@ div.main { height: 100vh; color: hsla(var(--foreground)); + margin-left: auto; + margin-right: auto; } .suggestions { diff --git a/src/interface/web/components/ui/sidebar.tsx b/src/interface/web/components/ui/sidebar.tsx index b927b2335..f222f1568 100644 --- a/src/interface/web/components/ui/sidebar.tsx +++ b/src/interface/web/components/ui/sidebar.tsx @@ -5,8 +5,8 @@ import { Slot } from "@radix-ui/react-slot"; import { VariantProps, cva } from "class-variance-authority"; import { PanelLeft } from "lucide-react"; -import { useIsMobile } from "@/components/hooks/use-mobile"; -import { cn } from "@/components/lib/utils"; +import { useIsMobile } from "@/hooks/use-mobile"; +import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; From 9d5480d8862269952e294fa37498e89254764a57 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 20:33:53 -0800 Subject: [PATCH 2/9] Improve mobile friendlinses across chat and home pages. --- src/interface/web/app/chat/page.tsx | 4 ++-- src/interface/web/app/components/appSidebar/appSidebar.tsx | 4 ++-- src/interface/web/app/page.module.css | 4 ---- src/interface/web/app/page.tsx | 2 +- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index cdca175ee..46d74bf14 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -149,7 +149,7 @@ function ChatBodyData(props: ChatBodyDataProps) { />
{conversationId && (
{title && (

+ - Khoj + Khoj diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css index 2d5dd0252..faa59e727 100644 --- a/src/interface/web/app/page.module.css +++ b/src/interface/web/app/page.module.css @@ -93,10 +93,6 @@ div.sidePanel { } @media screen and (max-width: 768px) { - div.inputBox { - margin-bottom: 0px; - } - div.chatBody { grid-template-columns: 0fr 1fr; } diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index 8d8412783..43e5e7e70 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -367,7 +367,7 @@ function ChatBodyData(props: ChatBodyDataProps) { {props.isMobileWidth && ( <>
From b644bb8628ea0f27369588a2666dd5a5b3dd4f3a Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 21:34:04 -0800 Subject: [PATCH 3/9] Further improve mobile friendliness --- .../allConversations/allConversations.tsx | 12 ++++++++--- .../app/components/appSidebar/appSidebar.tsx | 20 +++++++++++++------ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx index ba28d5d34..3506d7a20 100644 --- a/src/interface/web/app/components/allConversations/allConversations.tsx +++ b/src/interface/web/app/components/allConversations/allConversations.tsx @@ -637,9 +637,15 @@ export function ChatSessionActionMenu(props: ChatSessionActionMenuProps) { )} setIsOpen(open)} open={isOpen}> - - - + {props.sizing === "lg" || props.sizing === "md" ? ( + + ) : ( + + + + )} setIsRenaming(true)}> diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx index b66d91b90..3023f28c0 100644 --- a/src/interface/web/app/components/appSidebar/appSidebar.tsx +++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx @@ -86,12 +86,20 @@ export function AppSidebar(props: AppSidebarProps) { - - - - Khoj - - + {open ? ( + + + + + + ) : ( + + + + Khoj + + + )} From 43331f77309228ec59db4ca653d690537a3617dd Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 21:36:35 -0800 Subject: [PATCH 4/9] Remove unused css classes --- src/interface/web/app/agents/agents.module.css | 11 ----------- .../web/app/automations/automations.module.css | 11 ----------- src/interface/web/app/page.module.css | 10 ---------- src/interface/web/app/search/search.module.css | 11 ----------- src/interface/web/app/settings/settings.module.css | 11 ----------- 5 files changed, 54 deletions(-) diff --git a/src/interface/web/app/agents/agents.module.css b/src/interface/web/app/agents/agents.module.css index fe4c3b850..e60a9758a 100644 --- a/src/interface/web/app/agents/agents.module.css +++ b/src/interface/web/app/agents/agents.module.css @@ -22,12 +22,6 @@ div.pageLayout { margin-bottom: 2rem; } -div.sidePanel { - position: fixed; - height: 100%; - z-index: 1; -} - button.infoButton { border: none; background-color: transparent !important; @@ -58,9 +52,4 @@ div.agentList { div.pageLayout { max-width: 90vw; } - - div.sidePanel { - position: relative; - height: 100%; - } } diff --git a/src/interface/web/app/automations/automations.module.css b/src/interface/web/app/automations/automations.module.css index 30563e6c3..b26e7777c 100644 --- a/src/interface/web/app/automations/automations.module.css +++ b/src/interface/web/app/automations/automations.module.css @@ -15,12 +15,6 @@ div.pageLayout { margin-bottom: 2rem; } -div.sidePanel { - position: fixed; - height: 100%; - z-index: 1; -} - @media screen and (max-width: 768px) { div.automationsLayout { grid-template-columns: 1fr; @@ -29,9 +23,4 @@ div.sidePanel { div.pageLayout { max-width: 90vw; } - - div.sidePanel { - position: relative; - height: 100%; - } } diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css index faa59e727..b2696e4a0 100644 --- a/src/interface/web/app/page.module.css +++ b/src/interface/web/app/page.module.css @@ -86,12 +86,6 @@ div.homeGreetings { grid-template-rows: 1fr 2fr; } -div.sidePanel { - position: fixed; - height: 100%; - z-index: 1; -} - @media screen and (max-width: 768px) { div.chatBody { grid-template-columns: 0fr 1fr; @@ -102,10 +96,6 @@ div.sidePanel { grid-template-rows: auto; } - div.sidePanel { - position: relative; - } - div.chatBox { padding: 0; height: 100vh; diff --git a/src/interface/web/app/search/search.module.css b/src/interface/web/app/search/search.module.css index 1a60d3bff..b2e82d678 100644 --- a/src/interface/web/app/search/search.module.css +++ b/src/interface/web/app/search/search.module.css @@ -5,19 +5,8 @@ div.searchLayout { height: 100vh; } -div.sidePanel { - position: fixed; - height: 100%; - z-index: 1; -} - @media screen and (max-width: 768px) { div.searchLayout { gap: 0; } - - div.sidePanel { - position: relative; - height: 100%; - } } diff --git a/src/interface/web/app/settings/settings.module.css b/src/interface/web/app/settings/settings.module.css index 099a97392..203175901 100644 --- a/src/interface/web/app/settings/settings.module.css +++ b/src/interface/web/app/settings/settings.module.css @@ -16,12 +16,6 @@ div.phoneInput { padding: 0rem; } -div.sidePanel { - position: fixed; - height: 100%; - z-index: 1; -} - div.phoneInput input { width: 100%; padding: 0.5rem; @@ -30,11 +24,6 @@ div.phoneInput input { } @media screen and (max-width: 768px) { - div.sidePanel { - position: relative; - height: 100%; - } - div.contentBody { margin-left: 0; margin-top: 0; From 02c503e966ee62076dc074cef7c7675e903724bd Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 22:00:32 -0800 Subject: [PATCH 5/9] Further improve mobile layout with side panel --- src/interface/web/app/chat/chat.module.css | 1 + src/interface/web/app/chat/page.tsx | 4 ++-- src/interface/web/app/page.tsx | 7 ------- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css index d91ad97cc..2a7a7ff1e 100644 --- a/src/interface/web/app/chat/chat.module.css +++ b/src/interface/web/app/chat/chat.module.css @@ -66,6 +66,7 @@ div.chatLayout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; + padding-top: 1rem; } div.chatBox { diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index 46d74bf14..c86b4f45f 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -386,7 +386,7 @@ export default function Chat() { return ( - +
{`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} @@ -395,7 +395,7 @@ export default function Chat() { <div className={styles.chatBoxBody}> {conversationId && ( <div - className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 pt-1 md:pt-6 col-auto h-fit`} + className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 col-auto h-fit`} > {title && ( <h2 diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index 43e5e7e70..a678c2f81 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -464,13 +464,6 @@ export default function Home() { <SidebarTrigger /> <div className={`${styles.main} ${styles.chatLayout}`}> <title>Khoj AI - Your Second Brain - {/*
- -
*/}
Date: Thu, 19 Dec 2024 22:46:50 -0800 Subject: [PATCH 6/9] Add side bar to search page --- src/interface/web/app/search/page.tsx | 190 +++++++++++++------------- 1 file changed, 98 insertions(+), 92 deletions(-) diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx index 960360cfd..ab6a4443f 100644 --- a/src/interface/web/app/search/page.tsx +++ b/src/interface/web/app/search/page.tsx @@ -29,6 +29,8 @@ import { Button } from "@/components/ui/button"; import Link from "next/link"; import { getIconFromFilename } from "../common/iconUtils"; import { useIsMobileWidth } from "../common/utils"; +import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { AppSidebar } from "../components/appSidebar/appSidebar"; interface AdditionalData { file: string; @@ -226,104 +228,108 @@ export default function Search() { }, [searchQuery]); return ( -
-
-
-
-
- setSearchQuery(e.currentTarget.value)} - onKeyDown={(e) => e.key === "Enter" && search()} - type="search" - placeholder="Search Documents" - /> - -
- {focusSearchResult && ( -
- - {focusNote(focusSearchResult)} -
- )} - {!focusSearchResult && searchResults && searchResults.length > 0 && ( -
- - {searchResults.map((result, index) => { - return ( - - ); - })} - + + Find +
- )} - {searchResults == null && ( - - - - - - - Search across your documents - - - - {exampleQuery} - - - )} - {searchResults && searchResults.length === 0 && ( - - - - - - - No documents found - - - -
- To use search, upload your docs to your account. -
- + + {focusNote(focusSearchResult)} +
+ )} + {!focusSearchResult && searchResults && searchResults.length > 0 && ( +
+ + {searchResults.map((result, index) => { + return ( + + ); + })} + +
+ )} + {searchResults == null && ( + + + + + + + Search across your documents + + + + {exampleQuery} + + + )} + {searchResults && searchResults.length === 0 && ( + + + + + + + No documents found + + + +
+ To use search, upload your docs to your account.
- - - - )} + +
+ Learn More +
+ + + + )} +
-
+ ); } From b8a9dcd600ca6fa271d43dbab4e3fedd5e03d0ff Mon Sep 17 00:00:00 2001 From: sabaimran Date: Thu, 19 Dec 2024 23:23:52 -0800 Subject: [PATCH 7/9] Improve mobile layout with sidebar inset and fix dark mode logo --- src/interface/web/app/agents/page.tsx | 192 +-- src/interface/web/app/automations/page.tsx | 233 +-- src/interface/web/app/chat/chat.module.css | 2 +- src/interface/web/app/chat/page.tsx | 93 +- .../web/app/components/logo/khojLogo.tsx | 71 +- src/interface/web/app/search/page.tsx | 206 +-- .../web/app/search/search.module.css | 2 +- src/interface/web/app/settings/page.tsx | 1254 +++++++++-------- src/interface/web/app/share/chat/page.tsx | 94 +- 9 files changed, 1149 insertions(+), 998 deletions(-) diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx index 614e4ef99..0ec768394 100644 --- a/src/interface/web/app/agents/page.tsx +++ b/src/interface/web/app/agents/page.tsx @@ -29,8 +29,10 @@ import { import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "../components/logo/khojLogo"; export interface AgentData { slug: string; @@ -279,72 +281,42 @@ export default function Agents() { return ( - -
-
-
-
-

Agents

-
- -
-
- {showLoginPrompt && ( - - )} - - - - How it works Use any of these - specialized personas to tune your conversation to your needs. - - -
-
- {personalAgents.map((agent) => ( - +
+ + + {isMobileWidth ? ( + + ) : ( +

Agents

+ )} +
+
+
+
+
+

Agents

+
+ - ))} +
-
-
-

Explore

-
- {publicAgents.map((agent) => ( - + )} + + + - ))} + How it works Use any of these + specialized personas to tune your conversation to your needs. + + +
+
+ {personalAgents.map((agent) => ( + + ))} +
+
+
+

Explore

+
+ {publicAgents.map((agent) => ( + + ))} +
-
-
+
+ ); } diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx index 2cc70399e..fa88958b3 100644 --- a/src/interface/web/app/automations/page.tsx +++ b/src/interface/web/app/automations/page.tsx @@ -67,8 +67,10 @@ import { useToast } from "@/components/ui/use-toast"; import { ToastAction } from "@/components/ui/toast"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "../components/logo/khojLogo"; const automationsFetcher = () => window @@ -1026,93 +1028,114 @@ export default function Automations() { return ( - -
-
-
-
-

Automations

-
+ +
+ + + {isMobileWidth ? ( + + ) : ( +

Automations

+ )} +
+
+
+
+
+

Automations

+
+ {authenticatedData ? ( + + + {authenticatedData.email} + + ) : null} + {locationData && ( + + + {locationData + ? `${locationData.city}, ${locationData.country}` + : "Unknown"} + + )} + {locationData && ( + + + {locationData ? `${locationData.timezone}` : "Unknown"} + + )} +
+
+ {showLoginPrompt && ( + + )} + + + + How it works Automations help + you structure your time by automating tasks you do regularly. + Build your own, or try out our presets. Get results straight to + your inbox. + + +
{authenticatedData ? ( - - - {authenticatedData.email} - - ) : null} - {locationData && ( - - - {locationData - ? `${locationData.city}, ${locationData.country}` - : "Unknown"} - - )} - {locationData && ( - - - {locationData ? `${locationData.timezone}` : "Unknown"} - + + ) : ( + )}
-
- {showLoginPrompt && ( - - )} - - - - How it works Automations help you - structure your time by automating tasks you do regularly. Build your - own, or try out our presets. Get results straight to your inbox. - - -
- {authenticatedData ? ( - + - ) : ( - - )} -
- - - - {isLoading && } -
- {personalAutomations && - personalAutomations.map((automation) => ( + + {isLoading && } +
+ {personalAutomations && + personalAutomations.map((automation) => ( + + ))} + {allNewAutomations.map((automation) => ( ))} - {allNewAutomations.map((automation) => ( - - ))} -
-

Explore

-
- {suggestedAutomations.map((automation) => ( - - ))} +
+

Explore

+
+ {suggestedAutomations.map((automation) => ( + + ))} +
-
-
+ + ); } diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css index 2a7a7ff1e..9bd954347 100644 --- a/src/interface/web/app/chat/chat.module.css +++ b/src/interface/web/app/chat/chat.module.css @@ -1,5 +1,5 @@ div.main { - height: 100dvh; + height: 100%; color: hsla(var(--foreground)); margin-left: auto; margin-right: auto; diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx index c86b4f45f..91a7c12b5 100644 --- a/src/interface/web/app/chat/page.tsx +++ b/src/interface/web/app/chat/page.tsx @@ -26,8 +26,10 @@ import { import { useAuthenticatedData } from "../common/auth"; import { AgentData } from "../agents/page"; import { ChatSessionActionMenu } from "../components/allConversations/allConversations"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "../components/logo/khojLogo"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -386,49 +388,60 @@ export default function Chat() { return ( - -
- - {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} - -
-
- {conversationId && ( -
- {title && ( -

- {title} -

- )} - +
+ + + {conversationId && ( +
+ {isMobileWidth ? ( + + ) : ( + title && ( + <> +

+ {title} +

+ + + ) + )} +
+ )} +
+
+ + {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`} + +
+
+ }> + -
- )} - }> - - + +
-
+ ); } diff --git a/src/interface/web/app/components/logo/khojLogo.tsx b/src/interface/web/app/components/logo/khojLogo.tsx index 66cb23966..297a55207 100644 --- a/src/interface/web/app/components/logo/khojLogo.tsx +++ b/src/interface/web/app/components/logo/khojLogo.tsx @@ -1,17 +1,17 @@ export function KhojLogoType({ className }: { className?: string }) { - const classes = className ?? "fill-zinc-950 dark:fill-zinc-300"; + const fillClasses = "fill-zinc-950 dark:fill-zinc-300"; return ( - - - - + + + + - + - - - - - - - - + + + + + + + + diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx index ab6a4443f..b700e5c11 100644 --- a/src/interface/web/app/search/page.tsx +++ b/src/interface/web/app/search/page.tsx @@ -29,8 +29,10 @@ import { Button } from "@/components/ui/button"; import Link from "next/link"; import { getIconFromFilename } from "../common/iconUtils"; import { useIsMobileWidth } from "../common/utils"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "../components/logo/khojLogo"; interface AdditionalData { file: string; @@ -90,7 +92,7 @@ function Note(props: NoteResultProps) { const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2"); return ( - + {getNoteTypeIcon(note.additional.source)} @@ -230,106 +232,120 @@ export default function Search() { return ( - -
-
-
-
-
- setSearchQuery(e.currentTarget.value)} - onKeyDown={(e) => e.key === "Enter" && search()} - type="search" - placeholder="Search Documents" - /> - -
- {focusSearchResult && ( -
- - {focusNote(focusSearchResult)} + + Find +
- )} - {!focusSearchResult && searchResults && searchResults.length > 0 && ( -
- - {searchResults.map((result, index) => { - return ( - - ); - })} - -
- )} - {searchResults == null && ( - - - - - - - Search across your documents - - - - {exampleQuery} - - - )} - {searchResults && searchResults.length === 0 && ( - - - - - - - No documents found - - - -
- To use search, upload your docs to your account. -
- + + {focusNote(focusSearchResult)} +
+ )} + {!focusSearchResult && + searchResults && + searchResults.length > 0 && ( +
+ + {searchResults.map((result, index) => { + return ( + + ); + })} + +
+ )} + {searchResults == null && ( + + + + + + + Search across your documents + + + + {exampleQuery} + + + )} + {searchResults && searchResults.length === 0 && ( + + + + + + + No documents found + + + +
+ To use search, upload your docs to your account.
- - - - )} + +
+ Learn More +
+ + + + )} +
-
+ ); } diff --git a/src/interface/web/app/search/search.module.css b/src/interface/web/app/search/search.module.css index b2e82d678..dc5073243 100644 --- a/src/interface/web/app/search/search.module.css +++ b/src/interface/web/app/search/search.module.css @@ -2,7 +2,7 @@ div.searchLayout { display: grid; grid-template-columns: 1fr; gap: 1rem; - height: 100vh; + height: 100%; } @media screen and (max-width: 768px) { diff --git a/src/interface/web/app/settings/page.tsx b/src/interface/web/app/settings/page.tsx index 3631533dc..3178824b1 100644 --- a/src/interface/web/app/settings/page.tsx +++ b/src/interface/web/app/settings/page.tsx @@ -76,8 +76,10 @@ import { } from "@/components/ui/alert-dialog"; import { Progress } from "@/components/ui/progress"; import Link from "next/link"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "../components/logo/khojLogo"; const ManageFilesModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const [syncedFiles, setSyncedFiles] = useState([]); @@ -857,676 +859,704 @@ export default function SettingsView() { return ( - -
- {title} -
-
- }> -
-
-
Profile
-
- - - - Name - - -

- What should Khoj refer to you as? -

- setName(e.target.value)} - value={name} - className="w-full border border-gray-300 rounded-lg p-4 py-6" - /> - - - - - - - - - Subscription - - -

Current Plan

- {(userConfig.subscription_state === "trial" && ( - <> -

- Futurist (Trial) -

-

- You are on a{" "} - {userConfig.length_of_free_trial} day - trial of the Khoj Futurist plan. Your - trial ends on{" "} - {userConfig.subscription_renewal_date}. - Check{" "} - - pricing page - {" "} - to compare plans. -

- - )) || - (userConfig.subscription_state === - "subscribed" && ( + +
+ + + {isMobileWidth ? ( + + ) : ( +

Settings

+ )} +
+
+ {title} +
+
+ }> +
+
+
Profile
+
+ + + + Name + + +

+ What should Khoj refer to you as? +

+ setName(e.target.value)} + value={name} + className="w-full border border-gray-300 rounded-lg p-4 py-6" + /> + + + + + + + + + Subscription + + +

Current Plan

+ {(userConfig.subscription_state === "trial" && ( <>

- Futurist + Futurist (Trial)

- Subscription renews on{" "} - - { - userConfig.subscription_renewal_date - } - -

- - )) || - (userConfig.subscription_state === - "unsubscribed" && ( - <> -

Futurist

-

- Subscription ends on{" "} - - { - userConfig.subscription_renewal_date - } - + You are on a{" "} + {userConfig.length_of_free_trial}{" "} + day trial of the Khoj Futurist plan. + Your trial ends on{" "} + { + userConfig.subscription_renewal_date + } + . Check{" "} + + pricing page + {" "} + to compare plans.

)) || - (userConfig.subscription_state === - "expired" && ( - <> -

Humanist

- {(userConfig.subscription_renewal_date && ( + (userConfig.subscription_state === + "subscribed" && ( + <> +

+ Futurist +

- Subscription expired on{" "} + Subscription renews on{" "} { userConfig.subscription_renewal_date }

- )) || ( + + )) || + (userConfig.subscription_state === + "unsubscribed" && ( + <> +

Futurist

- Check{" "} - - pricing page - {" "} - to compare plans. + Subscription ends on{" "} + + { + userConfig.subscription_renewal_date + } +

- )} - - ))} - - - {(userConfig.subscription_state == "subscribed" && ( - - )) || - (userConfig.subscription_state == - "unsubscribed" && ( + + )) || + (userConfig.subscription_state === + "expired" && ( + <> +

Humanist

+ {(userConfig.subscription_renewal_date && ( +

+ Subscription expired{" "} + on{" "} + + { + userConfig.subscription_renewal_date + } + +

+ )) || ( +

+ Check{" "} + + pricing page + {" "} + to compare plans. +

+ )} + + ))} + + + {(userConfig.subscription_state == + "subscribed" && ( )) || - (userConfig.subscription_enabled_trial_at && ( - - )) || ( - - )} - - + (userConfig.subscription_state == + "unsubscribed" && ( + + )) || + (userConfig.subscription_enabled_trial_at && ( + + )) || ( + + )} + + +
-
- {isManageFilesModalOpen && ( - setIsManageFilesModalOpen(false)} - /> - )} -
-
Content
-
- - - - Files - {userConfig.enabled_content_source.computer && ( - - )} - - - Manage your synced files - - - - - - - - - - Github - - - Set Github repositories to index - - - - - - - - - - Notion - {userConfig.enabled_content_source.notion && ( - - )} - - -

- Sync your Notion workspace. -

- {!userConfig.notion_oauth_url && ( - - setNotionToken(e.target.value) - } - value={notionToken || ""} - placeholder="Enter API Key of your Khoj integration on Notion" - className="w-full border border-gray-300 rounded-lg px-4 py-6" - /> - )} - - - { - /* Show connect to notion button if notion oauth url setup and user disconnected*/ - userConfig.notion_oauth_url && - !userConfig.enabled_content_source.notion ? ( - - ) : /* Show sync button if user connected to notion and API key unchanged */ - userConfig.enabled_content_source.notion && - notionToken === userConfig.notion_token ? ( - - ) : /* Show set API key button notion oauth url not set setup */ - !userConfig.notion_oauth_url ? ( - - ) : ( - <> - ) - } - - - -
-
-
-
Models
-
- {userConfig.chat_model_options.length > 0 && ( - - - - Chat - - -

- Pick the chat model to generate text - responses -

- + - )} - {userConfig.paint_model_options.length > 0 && ( - - - - Paint + + + + Github - -

- Pick the paint model to generate image - responses -

- + + Set Github repositories to index - {!userConfig.is_active && ( -

- Subscribe to switch model -

- )} + + - )} - {userConfig.voice_model_options.length > 0 && ( - + - - Voice + + Notion + {userConfig.enabled_content_source.notion && ( + + )} - +

- Pick the voice model to generate speech - responses + Sync your Notion workspace.

- + {!userConfig.notion_oauth_url && ( + + setNotionToken(e.target.value) + } + value={notionToken || ""} + placeholder="Enter API Key of your Khoj integration on Notion" + className="w-full border border-gray-300 rounded-lg px-4 py-6" + /> + )} - {!userConfig.is_active && ( -

- Subscribe to switch model -

- )} + { + /* Show connect to notion button if notion oauth url setup and user disconnected*/ + userConfig.notion_oauth_url && + !userConfig.enabled_content_source + .notion ? ( + + ) : /* Show sync button if user connected to notion and API key unchanged */ + userConfig.enabled_content_source.notion && + notionToken === + userConfig.notion_token ? ( + + ) : /* Show set API key button notion oauth url not set setup */ + !userConfig.notion_oauth_url ? ( + + ) : ( + <> + ) + } + - )} +
-
-
-
- Clients +
+
Models
+
+ {userConfig.chat_model_options.length > 0 && ( + + + + Chat + + +

+ Pick the chat model to generate text + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} + {userConfig.paint_model_options.length > 0 && ( + + + + Paint + + +

+ Pick the paint model to generate image + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} + {userConfig.voice_model_options.length > 0 && ( + + + + Voice + + +

+ Pick the voice model to generate speech + responses +

+ + + + {!userConfig.is_active && ( +

+ Subscribe to switch model +

+ )} + + + )} +
-
- {!userConfig.anonymous_mode && ( - - - - - API Keys - - + + +

+ Access Khoj from the{" "} + + Desktop + + ,{" "} + + Obsidian + + ,{" "} + + Emacs + {" "} + apps and more. +

+ + + {apiKeys.map((key) => ( + + + {key.name} + + + + {`${key.token.slice(0, 6)}...${key.token.slice(-4)}`} + +
+ { + toast({ + title: `🔑 Copied API Key: ${key.name}`, + description: `Set this API key in the Khoj apps you want to connect to this Khoj account`, + }); + copyAPIKey( + key.token, + ); + }} + /> + { + toast({ + title: `🔑 Deleted API Key: ${key.name}`, + description: `Apps using this API key will no longer connect to this Khoj account`, + }); + deleteAPIKey( + key.token, + ); + }} + /> +
+ + + ))} + +
+ + + + )} + + + + Chat on Whatsapp + {(numberValidationState === + PhoneNumberValidationState.Verified && ( + - Generate Key - + )) || + (numberValidationState !== + PhoneNumberValidationState.Setup && ( + + ))} - -

- Access Khoj from the{" "} - - Desktop - - ,{" "} - - Obsidian + +

+ Connect your number to chat with Khoj on + WhatsApp. Learn more about the integration{" "} + + here - ,{" "} - - Emacs - {" "} - apps and more. + .

- - - {apiKeys.map((key) => ( - - - {key.name} - - - - {`${key.token.slice(0, 6)}...${key.token.slice(-4)}`} - -
- { - toast({ - title: `🔑 Copied API Key: ${key.name}`, - description: `Set this API key in the Khoj apps you want to connect to this Khoj account`, - }); - copyAPIKey( - key.token, - ); - }} - /> - { - toast({ - title: `🔑 Deleted API Key: ${key.name}`, - description: `Apps using this API key will no longer connect to this Khoj account`, - }); - deleteAPIKey( - key.token, - ); - }} - /> -
- - - ))} - -
- - - - )} - - - - Chat on Whatsapp - {(numberValidationState === - PhoneNumberValidationState.Verified && ( - - )) || - (numberValidationState !== - PhoneNumberValidationState.Setup && ( - - ))} - - -

- Connect your number to chat with Khoj on - WhatsApp. Learn more about the integration{" "} - - here - - . -

-
- - {numberValidationState === - PhoneNumberValidationState.VerifyOTP && ( - <> -

{`Enter the OTP sent to your number: ${phoneNumber}`}

- - setNumberValidationState( - PhoneNumberValidationState.VerifyOTP, - ) - } - > - - - - - - - - - - - )} -
- - - {(numberValidationState === - PhoneNumberValidationState.VerifyOTP && ( - - )) || ( - - )} - {numberValidationState === - PhoneNumberValidationState.Verified && ( - - )} - - +
+ + + {(numberValidationState === + PhoneNumberValidationState.VerifyOTP && ( + + )) || ( + + )} + {numberValidationState === + PhoneNumberValidationState.Verified && ( + + )} + + +
-
- + +
-
+ ); } diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx index 4310d7109..1320fb95f 100644 --- a/src/interface/web/app/share/chat/page.tsx +++ b/src/interface/web/app/share/chat/page.tsx @@ -18,8 +18,10 @@ import { } from "@/app/components/chatInputArea/chatInputArea"; import { StreamMessage } from "@/app/components/chatMessage/chatMessage"; import { AgentData } from "@/app/agents/page"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "@/app/components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "@/app/components/logo/khojLogo"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -187,41 +189,65 @@ export default function SharedChat() { return ( - -
- {title} -
-
- {!isMobileWidth && title && ( -
- {title && ( -

- {title} -

- )} -
- )} - }> - - + +
+ + + {conversationId && ( +
+ {isMobileWidth ? ( + + ) : ( + title && ( + <> +

+ {title} +

+ + ) + )} +
+ )} +
+
+ {title} +
+
+ {!isMobileWidth && title && ( +
+ {title && ( +

+ {title} +

+ )} +
+ )} + }> + + +
-
+ ); } From 7770caa7932bccfb5f70f406a8d6519effc393a4 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Fri, 20 Dec 2024 11:37:23 -0800 Subject: [PATCH 8/9] Add side bar inset to home page. Simplify automations card. --- src/interface/web/app/automations/page.tsx | 4 +- src/interface/web/app/page.module.css | 2 +- src/interface/web/app/page.tsx | 44 ++++++++++++++-------- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/interface/web/app/automations/page.tsx b/src/interface/web/app/automations/page.tsx index fa88958b3..f7fbb906f 100644 --- a/src/interface/web/app/automations/page.tsx +++ b/src/interface/web/app/automations/page.tsx @@ -395,13 +395,13 @@ function AutomationsCard(props: AutomationsCardProps) {
-
+
{timeRecurrence}
-
+
{intervalString} diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css index b2696e4a0..faca97c7a 100644 --- a/src/interface/web/app/page.module.css +++ b/src/interface/web/app/page.module.css @@ -1,5 +1,5 @@ div.main { - height: 100dvh; + height: 100%; color: hsla(var(--foreground)); margin-left: auto; margin-right: auto; diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index a678c2f81..4571fb87d 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -34,8 +34,10 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { AgentCard } from "@/app/components/agentCard/agentCard"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import LoginPopup from "./components/loginPrompt/loginPopup"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "./components/appSidebar/appSidebar"; +import { Separator } from "@/components/ui/separator"; +import { KhojLogoType } from "./components/logo/khojLogo"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -461,23 +463,33 @@ export default function Home() { return ( - -
- Khoj AI - Your Second Brain -
-
- + +
+ + + {isMobileWidth ? ( + + ) : ( +

Ask Anything

+ )} +
+
+ Khoj AI - Your Second Brain +
+
+ +
-
+ ); } From ba792c02ba934dee0e0df391f1bea597f9c5599c Mon Sep 17 00:00:00 2001 From: sabaimran Date: Fri, 20 Dec 2024 12:28:31 -0800 Subject: [PATCH 9/9] Improve share chat UI for alignment --- .../allConversations/allConversations.tsx | 2 +- src/interface/web/app/share/chat/page.tsx | 17 ++--------------- .../web/app/share/chat/sharedChat.module.css | 12 +----------- 3 files changed, 4 insertions(+), 27 deletions(-) diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx index 3506d7a20..aa1294695 100644 --- a/src/interface/web/app/components/allConversations/allConversations.tsx +++ b/src/interface/web/app/components/allConversations/allConversations.tsx @@ -791,7 +791,7 @@ function ChatSessionsModal({ data, sideBarOpen }: ChatSessionsModalProps) { > - {sideBarOpen ? "Find Conversations" : ""} + {sideBarOpen ? "Find Conversation" : ""} diff --git a/src/interface/web/app/share/chat/page.tsx b/src/interface/web/app/share/chat/page.tsx index 1320fb95f..c64d8d3a6 100644 --- a/src/interface/web/app/share/chat/page.tsx +++ b/src/interface/web/app/share/chat/page.tsx @@ -92,7 +92,7 @@ function ChatBodyData(props: ChatBodyDataProps) { />
- {conversationId && ( + {paramSlug && (
@@ -217,19 +217,6 @@ export default function SharedChat() { {title}
- {!isMobileWidth && title && ( -
- {title && ( -

- {title} -

- )} -
- )} }>