klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 05:29:12 +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

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}`} />;
}