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

Add mroe card suggestions and simplify color selection for suggestion cards

Browse Source
This commit is contained in:
sabaimran
2024-07-29 19:11:39 +05:30
parent 551630f0f1
commit a6339bb973
5 changed files with 166 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/web/app/page.tsx
View File

@@ -16,7 +16,7 @@ import 'katex/dist/katex.min.css';
import ChatInputArea, { ChatOptions } from './components/chatInputArea/chatInputArea';
import { useAuthenticatedData } from './common/auth';
import { Card, CardTitle } from '@/components/ui/card';
import { convertSuggestionColorToTextClass, colorMap, convertColorToBorderClass } from './common/colorUtils';
import { converColorToBgGradient, colorMap, convertColorToBorderClass } from './common/colorUtils';
import { getIconFromIconName } from './common/iconUtils';
import { ClockCounterClockwise } from '@phosphor-icons/react';
import { AgentData } from './agents/page';
@@ -66,7 +66,6 @@ function ChatBodyData(props: ChatBodyDataProps) {
const [message, setMessage] = useState('');
const [processingMessage, setProcessingMessage] = useState(false);
const [shuffledOptions, setShuffledOptions] = useState<Suggestion[]>([]);
const [shuffledColors, setShuffledColors] = useState<string[]>([]);
const [selectedAgent, setSelectedAgent] = useState<string | null>("khoj");
const agentsFetcher = () => window.fetch('/api/agents').then(res => res.json()).catch(err => console.log(err));
@@ -75,10 +74,6 @@ function ChatBodyData(props: ChatBodyDataProps) {
function shuffleAndSetOptions() {
const shuffled = [...suggestionsData].sort(() => 0.5 - Math.random());
setShuffledOptions(shuffled.slice(0, 3));
// Use the text to color function above convertSuggestionColorToTextClass
const colors = shuffled.map(option => convertSuggestionColorToTextClass(option.color));
setShuffledColors(colors);
}
useEffect(() => {
@@ -212,8 +207,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
title={suggestion.type}
body={suggestion.description}
link={suggestion.link}
color={shuffledColors[index]}
image={shuffledColors[index]}
color={suggestion.color}
/>
</div>
))}