klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 13:19:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode toggle! And improve experience for train of thought

Browse Source
This commit is contained in:
sabaimran
2024-07-04 18:29:21 +05:30
parent 465ef0b772
commit aec44a0b89
14 changed files with 166 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/web/app/chat/chat.module.css
View File

@@ -15,7 +15,7 @@ div.inputBox {
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);
box-shadow: 0 4px 10px var(--box-shadow-color);
margin-bottom: 20px;
gap: 12px;
padding-left: 20px;

2
src/interface/web/app/components/chatHistory/chatHistory.module.css
View File

@@ -26,5 +26,5 @@ div.trainOfThought {
border-radius: 16px;
padding: 16px;
margin: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
box-shadow: 0 4px 10px var(--box-shadow-color);
}

25
src/interface/web/app/components/chatHistory/chatHistory.tsx
View File

@@ -101,13 +101,17 @@ export default function ChatHistory(props: ChatHistoryProps) {
}
return () => observer.disconnect();
}, [sentinelRef.current, hasMoreMessages, currentPage, props.conversationId, fetchingData]);
}, [sentinelRef.current, hasMoreMessages, currentPage, fetchingData]);
useEffect(() => {
setHasMoreMessages(true);
setFetchingData(false);
setCurrentPage(0);
setData(null);
}, [props.conversationId]);
const fetchMoreMessages = (currentPage: number) => {
if (!hasMoreMessages || fetchingData) return;
console.log("fetchMoreMessages", currentPage);
const nextPage = currentPage + 1;
fetch(`/api/chat/history?client=web&conversation_id=${props.conversationId}&n=${10 * nextPage}`)
.then(response => response.json())
@@ -117,6 +121,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
if (chatData.response.chat.length === data?.chat.length) {
setHasMoreMessages(false);
setFetchingData(false);
return;
}
@@ -124,12 +129,10 @@ export default function ChatHistory(props: ChatHistoryProps) {
setLoading(false);
if (currentPage < 2) {
console.log("call scroll to bottom");
scrollToBottom();
}
setFetchingData(false);
} else {
console.log("No more messages");
setHasMoreMessages(false);
}
})
@@ -146,8 +149,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
}
}
console.log("isUserAtBottom", isUserAtBottom());
if (isUserAtBottom()) {
scrollToBottom();
}
@@ -222,7 +223,9 @@ export default function ChatHistory(props: ChatHistoryProps) {
<ScrollArea className={`h-[80vh]`}>
<div ref={ref}>
<div className={styles.chatHistory} ref={chatHistoryRef}>
<div ref={sentinelRef} style={{ height: '1px' }}></div>
<div ref={sentinelRef} style={{ height: '1px' }}>
{fetchingData && <InlineLoading />}
</div>
{(data && data.chat) && data.chat.map((chatMessage, index) => (
<ChatMessage
key={`${index}fullHistory`}
@@ -306,9 +309,9 @@ export default function ChatHistory(props: ChatHistoryProps) {
<ReferencePanel referencePanelData={referencePanelData} setShowReferencePanel={setShowReferencePanel} />
}
<div className={`${styles.agentIndicator}`}>
<a className='no-underline mx-2 flex' href={constructAgentLink()} target="_blank" rel="noreferrer">
<a className='no-underline mx-2 flex text-muted-foreground' href={constructAgentLink()} target="_blank" rel="noreferrer">
<Lightbulb color='orange' weight='fill' />
<span className='text-neutral-600'>{constructAgentName()}</span>
<span>{constructAgentName()}</span>
</a>
</div>
</div>

15
src/interface/web/app/components/chatMessage/chatMessage.module.css
View File

@@ -4,7 +4,7 @@ div.chatMessageContainer {
margin: 12px;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
box-shadow: 0 4px 10px var(--box-shadow-color)
}
div.chatMessageWrapper {
@@ -12,7 +12,6 @@ div.chatMessageWrapper {
}
div.khojfullHistory {
border-color: var(--border-color);
border-width: 1px;
padding-left: 4px;
}
@@ -26,14 +25,14 @@ div.chatMessageContainer.youfullHistory {
}
div.you {
background-color: var(--frosted-background-color);
background-color: hsla(var(--secondary));
align-self: flex-end;
border-radius: 16px;
}
div.khoj {
background-color: transparent;
color: #000000;
color: hsl(var(--accent-foreground));
align-self: flex-start;
}
@@ -50,8 +49,8 @@ div.chatMessageContainer h3 img {
width: 24px;
}
div.you .author {
color: var(--frosted-background-color);
div.you {
color: hsla(var(--secondary-foreground));
}
div.author {
@@ -87,7 +86,7 @@ div.chatFooter button {
}
div.chatFooter button:hover {
background-color: var(--frosted-background-color);
background-color: hsla(var(--frosted-background-color));
}
div.chatTimestamp {
@@ -101,7 +100,7 @@ button.codeCopyButton {
}
button.codeCopyButton:hover {
color: var(--frosted-background-color);
color: hsla(var(--frosted-background-color));
}
div.feedbackButtons img,

12
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -12,7 +12,9 @@ import 'highlight.js/styles/github.css'
import { hasValidReferences } from '../referencePanel/referencePanel';
import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book } from '@phosphor-icons/react';
import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture } from '@phosphor-icons/react';
import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr';
import { compare } from 'swr/_internal';
const md = new markdownIt({
html: true,
@@ -170,6 +172,14 @@ function chooseIconFromHeader(header: string, iconColor: string) {
return <Book className={`inline mr-2 ${iconColor}`} />;
}
if (compareHeader.includes("search")) {
return <MagnifyingGlass className={`inline mr-2 ${iconColor}`} />;
}
if (compareHeader.includes("summary") || compareHeader.includes("summarize")) {
return <Aperture className={`inline mr-2 ${iconColor}`} />;
}
return <Brain className={`inline mr-2 ${iconColor}`} />;
}

4
src/interface/web/app/components/loading/loading.tsx
View File

@@ -14,8 +14,8 @@ interface InlineLoadingProps {
export function InlineLoading(props: InlineLoadingProps) {
return (
<button>
<CircleNotch className={`animate-spin h-5 w-5 mr-3 ${props.className}`} />
<button className={`${props.className}`}>
<CircleNotch className={`animate-spin h-5 w-5 mr-3`} />
</button>
)
}

88
src/interface/web/app/components/navMenu/navMenu.tsx
View File

@@ -22,6 +22,8 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Toggle } from '@/components/ui/toggle';
import { Moon } from '@phosphor-icons/react';
interface NavMenuProps {
@@ -36,6 +38,7 @@ export default function NavMenu(props: NavMenuProps) {
const [displayTitle, setDisplayTitle] = useState<string>(props.title || props.selected.toUpperCase());
const [isMobileWidth, setIsMobileWidth] = useState(false);
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
setIsMobileWidth(window.innerWidth < 768);
@@ -43,6 +46,31 @@ export default function NavMenu(props: NavMenuProps) {
}, [props.title]);
useEffect(() => {
window.addEventListener('resize', () => {
setIsMobileWidth(window.innerWidth < 768);
});
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
setDarkMode(true);
}
}, []);
useEffect(() => {
toggleDarkMode(darkMode);
}, [darkMode]);
function toggleDarkMode(darkMode: boolean) {
if (darkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
}
return (
<div className={styles.titleBar}>
<div className={`text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8`}>
@@ -94,30 +122,42 @@ export default function NavMenu(props: NavMenuProps) {
<MenubarTrigger>Automations</MenubarTrigger>
</Link>
</MenubarMenu>
{userData &&
<MenubarMenu>
<MenubarTrigger>Profile</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<Link href="/config">
Settings
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="https://docs.khoj.dev">
Help
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="/auth/logout">
Logout
</Link>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
}
<MenubarMenu>
<MenubarTrigger>Profile</MenubarTrigger>
<MenubarContent>
<MenubarItem>
<Toggle
pressed={darkMode}
onClick={() => {
console.log("clicked on dark mode method");
setDarkMode(!darkMode)}
}>
<Moon />
</Toggle>
</MenubarItem>
{userData &&
<>
<MenubarItem>
<Link href="/config">
Settings
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="https://docs.khoj.dev">
Help
</Link>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
<Link href="/auth/logout">
Logout
</Link>
</MenubarItem>
</>
}
</MenubarContent>
</MenubarMenu>
</Menubar>
}
</div>

2
src/interface/web/app/components/referencePanel/referencePanel.module.css
View File

@@ -25,7 +25,7 @@ div.contextReference:hover {
div.singleReference {
padding: 8px;
border-radius: 8px;
background-color: var(--frosted-background-color);
background-color: hsla(var(--frosted-background-color));
margin-top: 8px;
}

12
src/interface/web/app/components/sidePanel/sidePanel.module.css
View File

@@ -14,11 +14,12 @@ div.compressed {
}
div.sessionHover {
background-color: var(--secondary-accent);
background-color: hsla(var(--popover));
}
div.session:hover {
background-color: var(--secondary-accent);
background-color: hsla(var(--popover));
color: hsla(var(--popover-foreground));
}
div.session a {
@@ -43,8 +44,7 @@ div.panel {
display: grid;
grid-auto-flow: row;
padding: 1rem;
background-color: hsla(var(--primary-foreground));
background-color: var(--secondary-background-color);
background-color: hsla(var(--muted));
height: 100%;
overflow-y: auto;
max-width: auto;
@@ -94,7 +94,7 @@ div.modalSessionsList {
left: 0;
width: 100%;
height: 100%;
background-color: var(--frosted-background-color);
background-color: hsla(var(--frosted-background-color));
z-index: 1;
display: flex;
justify-content: center;
@@ -105,7 +105,7 @@ div.modalSessionsList {
div.modalSessionsList div.content {
max-width: 80%;
max-height: 80%;
background-color: var(--frosted-background-color);
background-color: hsla(var(--frosted-background-color));
overflow: auto;
padding: 20px;
border-radius: 10px;

4
src/interface/web/app/globals.css
View File

@@ -29,11 +29,12 @@
/* Khoj Custom Colors */
--primary-hover: #fee285;
--frosted-background-color: #F5F3F2;
--frosted-background-color: 20 13% 95%;
--secondary-background-color: #F7F7F5;
--secondary-accent: #EDEDED;
--khoj-orange: #FFE7D1;
--border-color: #e2e2e2;
--box-shadow-color: rgba(0, 0, 0, 0.03);
}
.dark {
@@ -57,6 +58,7 @@
--input: 215 27.9% 16.9%;
--ring: 263.4 70% 50.4%;
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
--box-shadow-color: rgba(255, 255, 255, 0.05);
}
}

45
src/interface/web/components/ui/toggle.tsx Normal file
View File

@@ -0,0 +1,45 @@
"use client"
import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-3",
sm: "h-9 px-2.5",
lg: "h-11 px-5",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
))
Toggle.displayName = TogglePrimitive.Root.displayName
export { Toggle, toggleVariants }

1
src/interface/web/package.json
View File

@@ -29,6 +29,7 @@
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-toggle": "^1.1.0",
"@types/katex": "^0.16.7",
"@types/markdown-it": "^14.1.1",
"autoprefixer": "^10.4.19",

9
src/interface/web/yarn.lock
View File

@@ -803,6 +803,15 @@
dependencies:
"@radix-ui/react-compose-refs" "1.1.0"
"@radix-ui/react-toggle@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz#1f7697b82917019330a16c6f96f649f46b4606cf"
integrity sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==
dependencies:
"@radix-ui/primitive" "1.1.0"
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-use-controllable-state" "1.1.0"
"@radix-ui/react-use-callback-ref@1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"