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 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

2
src/interface/web/app/common/colorUtils.ts
View File

@@ -38,7 +38,7 @@ export function convertToBGClass(color: string) {
return `bg-background`;
}
export function convertSuggestionColorToTextClass(color: string) {
export function converColorToBgGradient(color: string) {
return `${convertToBGGradientClass(color)} dark:border dark:border-neutral-700`;
}

8
src/interface/web/app/common/iconUtils.tsx
View File

@@ -19,6 +19,10 @@ import {
Globe,
Palette,
LinkBreak,
Book,
Confetti,
House,
Translate,
} from "@phosphor-icons/react";
interface IconMap {
@@ -40,6 +44,10 @@ const iconMap: IconMap = {
ClockCounterClockwise: (color: string, width: string, height: string) => <ClockCounterClockwise className={`${width} ${height} ${color} mr-2`} />,
Globe: (color: string, width: string, height: string) => <Globe className={`${width} ${height} ${color} mr-2`} />,
Palette: (color: string, width: string, height: string) => <Palette className={`${width} ${height} ${color} mr-2`} />,
Book: (color: string, width: string, height: string) => <Book className={`${width} ${height} ${color} mr-2`} />,
Confetti: (color: string, width: string, height: string) => <Confetti className={`${width} ${height} ${color} mr-2`} />,
House: (color: string, width: string, height: string) => <House className={`${width} ${height} ${color} mr-2`} />,
Translate: (color: string, width: string, height: string) => <Translate className={`${width} ${height} ${color} mr-2`} />,
};
function getIconFromIconName(iconName: string, color: string = 'gray', width: string = 'w-6', height: string = 'h-6') {

26
src/interface/web/app/components/suggestions/suggestionCard.tsx
View File

@@ -9,13 +9,23 @@ import {
import styles from "./suggestions.module.css";
import { getIconFromIconName } from "@/app/common/iconUtils";
import { converColorToBgGradient } from "@/app/common/colorUtils";
function convertSuggestionColorToIconClass(color: string) {
if (color.includes('blue')) return getIconFromIconName('Robot', 'blue', 'w-8', 'h-8');
if (color.includes('yellow')) return getIconFromIconName('Globe', 'yellow', 'w-8', 'h-8');
if (color.includes('green')) return getIconFromIconName('Palette', 'green', 'w-8', 'h-8');
else return getIconFromIconName('Lightbulb', 'orange', 'w-8', 'h-8');
function convertSuggestionTitleToIconClass(title: string, color: string) {
if (title.includes('automation')) return getIconFromIconName('Robot', color, 'w-8', 'h-8');
if (title.includes('online')) return getIconFromIconName('Globe', color, 'w-8', 'h-8');
if (title.includes('paint')) return getIconFromIconName('Palette', color, 'w-8', 'h-8');
if (title.includes('pop')) return getIconFromIconName('Confetti', color, 'w-8', 'h-8');
if (title.includes('travel')) return getIconFromIconName('Jeep', color, 'w-8', 'h-8');
if (title.includes('learn')) return getIconFromIconName('Book', color, 'w-8', 'h-8');
if (title.includes('health')) return getIconFromIconName('Asclepius', color, 'w-8', 'h-8');
if (title.includes('fun')) return getIconFromIconName('Island', color, 'w-8', 'h-8');
if (title.includes('home')) return getIconFromIconName('House', color, 'w-8', 'h-8');
if (title.includes('language')) return getIconFromIconName('Translate', color, 'w-8', 'h-8');
if (title.includes('code')) return getIconFromIconName('Code', color, 'w-8', 'h-8');
else return getIconFromIconName('Lightbulb', color, 'w-8', 'h-8');
}
@@ -23,12 +33,12 @@ interface SuggestionCardProps {
title: string;
body: string;
link: string;
image: string;
color: string;
}
export default function SuggestionCard(data: SuggestionCardProps) {
const cardClassName = `${styles.card} ${data.color} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
const bgColors = converColorToBgGradient(data.color);
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
const titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
const descriptionClassName = `${styles.text} dark:text-white`;
@@ -36,7 +46,7 @@ export default function SuggestionCard(data: SuggestionCardProps) {
<Card className={cardClassName}>
<CardHeader className="m-0 p-2 pb-1 relative">
<div className="flex flex-row md:flex-col">
{convertSuggestionColorToIconClass(data.image)}
{convertSuggestionTitleToIconClass(data.title.toLowerCase(), data.color.toLowerCase())}
<CardTitle className={titleClassName}>{data.title}</CardTitle>
</div>
</CardHeader>

154
src/interface/web/app/components/suggestions/suggestionsData.ts
View File

@@ -27,14 +27,14 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Travel",
color: "yellow",
description: "Search for the best attractions in Austria Hungary",
link: "",
},
{
type: "Automation",
color: "blue",
type: "Health",
color: "orange",
description: "Generate a weekly meal plan with recipes.",
link: "/automations?subject=Weekly Meal Plan&query=Create a weekly meal plan with 7 dinner recipes, including ingredients and brief instructions. Focus on balanced, healthy meals.&crontime=0 18 * * 0",
},
@@ -45,7 +45,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Travel",
color: "yellow",
description: "Find the top-rated coffee shops in Seattle.",
link: "",
@@ -63,7 +63,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Learning",
color: "yellow",
description: "Research the history of the Eiffel Tower.",
link: "",
@@ -81,7 +81,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Travel",
color: "yellow",
description: "Find beginner-friendly hiking trails near Los Angeles.",
link: "",
@@ -99,7 +99,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Learning",
color: "yellow",
description: "Research the benefits and drawbacks of electric vehicles.",
link: "",
@@ -117,7 +117,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Pop Culture",
color: "yellow",
description: "Find the best-rated science fiction books of the last decade.",
link: "",
@@ -129,7 +129,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Travel",
color: "yellow",
description: "Research the most eco-friendly cities in Europe.",
link: "",
@@ -147,13 +147,13 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Learning",
color: "yellow",
description: "Summarize the biography of this figure: https://en.wikipedia.org/wiki/Jean_Baptiste_Point_du_Sable",
link: "",
},
{
type: "Automation",
type: "Language",
color: "blue",
description: "Send daily Spanish phrases used in Latin America.",
link: "/automations?subject=Daily Latin American Spanish&query=Provide a common Spanish phrase or slang term used in Latin America, its meaning, and an example of usage. Include which countries it's most common in.&crontime=0 8 * * *",
@@ -165,9 +165,9 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Food",
color: "yellow",
description: "Find the best empanada recipee from Colombia countries.",
description: "Find the best empanada recipe from Colombia countries.",
link: "",
},
{
@@ -183,7 +183,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Automation",
type: "Language",
color: "blue",
description: "Daily Swahili phrase with English translation.",
link: "/automations?subject=Daily Swahili Lesson&query=Provide a common Swahili phrase or proverb, its English translation, and a brief explanation of its cultural significance in East Africa.&crontime=0 7 * * *",
@@ -195,7 +195,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Learning",
color: "yellow",
description: "Research the top M-Pesa alternatives in East Africa.",
link: "",
@@ -237,7 +237,7 @@ export const suggestionsData: Suggestion[] = [
link: "",
},
{
type: "Online Search",
type: "Pop Culture",
color: "yellow",
description: "Research the latest trends in K-pop and its global influence.",
link: "",
@@ -261,7 +261,7 @@ export const suggestionsData: Suggestion[] = [
link: "/automations?subject=South Asian Culinary Journey&query=Provide a traditional South Asian recipe (rotating through Indian, Pakistani, Bangladeshi, Sri Lankan, etc. cuisines), including ingredients, brief instructions, and its cultural significance or origin story.&crontime=0 10 * * *",
},
{
type: "Online Search",
type: "Pop Culture",
color: "yellow",
description: "Research the impact of Bollywood on global cinema and fashion.",
link: "",
@@ -272,4 +272,124 @@ export const suggestionsData: Suggestion[] = [
description: "Weekly update on South Asian startup ecosystems and innovations.",
link: "/automations?subject=South Asian Startup Pulse&query=Summarize the most significant developments in South Asian startup ecosystems this week. Include notable funding rounds, innovative solutions to local challenges, and any policy changes affecting the tech landscape in countries like India, Bangladesh, Pakistan, and Sri Lanka.&crontime=0 18 * * 5",
},
{
type: "Interviewing",
color: "purple",
description: "Create interview prep questions for a consulting job.",
link: "",
},
{
type: "Home",
color: "purple",
description: "Recommend plants that can grow well indoors.",
link: "",
},
{
type: "Health",
color: "purple",
description: "Suggest healthy meal prep ideas for a busy work week.",
link: "",
},
{
type: "Learning",
color: "purple",
description: "List effective time management techniques for students.",
link: "",
},
{
type: "Learning",
color: "purple",
description: "Provide tips for improving public speaking skills.",
link: "",
},
{
type: "Learning",
color: "purple",
description: "Recommend books for learning about personal finance.",
link: "",
},
{
type: "Home",
color: "purple",
description: "Suggest ways to reduce plastic waste in daily life.",
link: "",
},
{
type: "Health",
color: "purple",
description: "Create a beginner's guide to meditation and mindfulness.",
link: "",
},
{
type: "Fun",
color: "purple",
description: "List creative date ideas for couples on a budget.",
link: "",
},
{
type: "Interviewing",
color: "purple",
description: "Provide tips for writing an effective resume.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Explain the concept of recursion with a simple coding example.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Provide a coding challenge to reverse a string without using built-in functions.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Explain the difference between 'let', 'const', and 'var' in JavaScript.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Create a coding exercise to implement a basic sorting algorithm (e.g., bubble sort).",
link: "",
},
{
type: "Code",
color: "purple",
description: "Explain object-oriented programming principles with a simple class example.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Provide a coding challenge to find the longest palindromic substring in a given string.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Explain the concept of asynchronous programming with a JavaScript Promise example.",
link: "",
},
{
type: "Code",
color: "purple",
description: "Create a coding exercise to implement a basic data structure (e.g., linked list or stack).",
link: "",
},
{
type: "Code",
color: "purple",
description: "Explain the time and space complexity of common algorithms (e.g., binary search).",
link: "",
},
{
type: "Code",
color: "purple",
description: "Provide a coding challenge to implement a simple REST API using Node.js and Express.",
link: "",
},
];

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>
))}