klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39: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(() => { useEffect(() => {
if (props.prefillMessage) { if (props.prefillMessage) {
setMessage(props.prefillMessage); setMessage(props.prefillMessage);
chatInputRef?.current?.focus();
} }
}, [props.prefillMessage]); }, [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 styles from "./suggestions.module.css";
import { convertSuggestionTitleToIconClass } from "./suggestionsData"; import { convertSuggestionTitleToIconClass } from "./suggestionsData";
import { ArrowLeft, ArrowRight } from "@phosphor-icons/react"; import { ArrowLeft, ArrowRight, MagicWand } from "@phosphor-icons/react";
interface StepOneSuggestionCardProps { interface StepOneSuggestionCardProps {
title: string; title: string;
@@ -47,10 +47,10 @@ export function StepTwoSuggestionCard(data: StepTwoSuggestionCardProps) {
return ( return (
<Card className={cardClassName}> <Card className={cardClassName}>
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<CardContent className="m-0 p-2 w-full flex flex-row items-center"> <CardContent className="m-0 p-1 w-full flex flex-row items-center">
<ArrowRight <MagicWand
weight="thin" 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 <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`} 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) { 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`; const descriptionClassName = `${styles.text} dark:text-white`;
return ( return (

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

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