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

Make suggestion cards a little more minimal

Browse Source
This commit is contained in:
sabaimran
2024-12-22 11:54:27 -08:00
parent 90b02b4cfe
commit 4c4f4401b1
3 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -138,6 +138,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
useEffect(() => {
if (props.prefillMessage) {
setMessage(props.prefillMessage);
chatInputRef?.current?.focus();
}
}, [props.prefillMessage]);

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

@@ -3,7 +3,7 @@ import { Card, CardContent, CardDescription } from "@/components/ui/card";
import styles from "./suggestions.module.css";
import { convertSuggestionTitleToIconClass } from "./suggestionsData";
import { ArrowLeft, ArrowRight } from "@phosphor-icons/react";
import { ArrowLeft, ArrowRight, MagicWand } from "@phosphor-icons/react";
interface StepOneSuggestionCardProps {
title: string;
@@ -47,10 +47,10 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
return (
<Card className={cardClassName}>
<div className="flex w-full items-center">
<CardContent className="m-0 p-2 w-full flex flex-row items-center">
<ArrowRight
<CardContent className="m-0 p-1 w-full flex flex-row items-center">
<MagicWand
weight="thin"
className="w-6 h-6 text-muted-foreground inline-flex mr-1 text-opacity-40"
className="w-4 h-4 text-muted-foreground inline-flex mr-1 text-opacity-40"
/>
<CardDescription
className={`sm:line-clamp-2 md:line-clamp-4 break-words whitespace-pre-wrap max-w-full text-sm text-wrap text-black dark:text-white`}
@@ -64,7 +64,7 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
}
export function StepOneSuggestionRevertCard(data: StepOneSuggestionRevertCardProps) {
const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer m-2 md:p-2 animate-fade-in-up border-none`;
const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-fit cursor-pointer m-2 md:p-2 animate-fade-in-up border-none shadow-none`;
const descriptionClassName = `${styles.text} dark:text-white`;
return (

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

@@ -323,11 +323,11 @@ function ChatBodyData(props: ChatBodyDataProps) {
/>
</div>
)}
<div
className={`${styles.suggestions} w-full ${props.isMobileWidth ? "grid grid-cols-2" : "grid grid-cols-3"} justify-center items-center`}
>
{stepTwoSuggestionOptions.length == 0 &&
stepOneSuggestionOptions.map((suggestion, index) => (
{stepTwoSuggestionOptions.length == 0 && (
<div
className={`${styles.suggestions} w-full ${props.isMobileWidth ? "grid grid-cols-2" : "grid grid-cols-3"} justify-center items-center`}
>
{stepOneSuggestionOptions.map((suggestion, index) => (
<div
key={`${suggestion.type} ${suggestion.actionTagline}`}
onClick={(event) => {
@@ -348,7 +348,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
/>
</div>
))}
</div>
</div>
)}
{stepTwoSuggestionOptions.length == 0 &&
stepOneSuggestionOptions.length < stepOneSuggestions.length && (
<div className="flex items-center justify-center margin-auto">
@@ -369,6 +370,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
setSelectedStepOneSuggestion(null);
setStepTwoSuggestionOptions([]);
setChatInputFocus(ChatInputFocus.MESSAGE);
setPrefilledMessage("");
}}
/>
)}