diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx index 0f316698..9868c81c 100644 --- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx +++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx @@ -136,10 +136,9 @@ export const ChatInputArea = forwardRef((pr }, [uploading]); useEffect(() => { - if (props.prefillMessage) { - setMessage(props.prefillMessage); - chatInputRef?.current?.focus(); - } + if (props.prefillMessage === undefined) return; + setMessage(props.prefillMessage); + chatInputRef?.current?.focus(); }, [props.prefillMessage]); useEffect(() => { diff --git a/src/interface/web/app/components/suggestions/suggestionCard.tsx b/src/interface/web/app/components/suggestions/suggestionCard.tsx index b1d885d6..354647f5 100644 --- a/src/interface/web/app/components/suggestions/suggestionCard.tsx +++ b/src/interface/web/app/components/suggestions/suggestionCard.tsx @@ -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, MagicWand } from "@phosphor-icons/react"; +import { ArrowLeft, ArrowRight, MagicWand, XCircle } from "@phosphor-icons/react"; interface StepOneSuggestionCardProps { title: string; @@ -64,20 +64,20 @@ 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-fit cursor-pointer m-2 md:p-2 animate-fade-in-up border-none shadow-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-1 animate-fade-in-up border-opacity-50 shadow-none`; const descriptionClassName = `${styles.text} dark:text-white`; return ( -
- - +
+ {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())} {data.body} +
diff --git a/src/interface/web/app/components/suggestions/suggestionsData.ts b/src/interface/web/app/components/suggestions/suggestionsData.ts index cacd57cb..ba870c24 100644 --- a/src/interface/web/app/components/suggestions/suggestionsData.ts +++ b/src/interface/web/app/components/suggestions/suggestionsData.ts @@ -440,7 +440,7 @@ export const stepTwoSuggestion: { [key: string]: StepTwoSuggestion[] } = { prompt: "Find the main arguments in this document.", }, { - prompt: "Explain the relevance of this document to the topic at hand.", + prompt: "Explain the relevance of this document to various other disciplines.", }, ], }; diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css index faca97c7..eb1b09fe 100644 --- a/src/interface/web/app/page.module.css +++ b/src/interface/web/app/page.module.css @@ -98,16 +98,24 @@ div.homeGreetings { div.chatBox { padding: 0; - height: 100vh; + height: 100%; } div.chatLayout { gap: 0; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr; + display: flex; + height: 100%; } div.homeGreetings { - grid-template-rows: auto 1fr; + display: flex; + flex-direction: column; + } + + div.inputBox { + margin-bottom: 0; + height: fit-content; + align-items: flex-end; + margin-top: auto; } } diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx index 98c45a58..6374c162 100644 --- a/src/interface/web/app/page.tsx +++ b/src/interface/web/app/page.tsx @@ -49,7 +49,6 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/s import { AppSidebar } from "./components/appSidebar/appSidebar"; import { Separator } from "@/components/ui/separator"; import { KhojLogoType } from "./components/logo/khojLogo"; -import { Button } from "@/components/ui/button"; interface ChatBodyDataProps { chatOptionsData: ChatOptions | null; @@ -61,17 +60,9 @@ interface ChatBodyDataProps { isLoadingUserConfig: boolean; } -function FisherYatesShuffle(array: any[]) { - for (let i = array.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [array[i], array[j]] = [array[j], array[i]]; - } - return array; -} - function ChatBodyData(props: ChatBodyDataProps) { const [message, setMessage] = useState(""); - const [prefilledMessage, setPrefilledMessage] = useState(""); + const [prefillMessage, setPrefillMessage] = useState(""); const [chatInputFocus, setChatInputFocus] = useState(ChatInputFocus.MESSAGE); const [images, setImages] = useState([]); const [processingMessage, setProcessingMessage] = useState(false); @@ -156,7 +147,7 @@ function ChatBodyData(props: ChatBodyDataProps) { // generate colored icons for the available agents const agentIcons = agents.map((agent) => getIconFromIconName(agent.icon, agent.color)!); setAgentIcons(agentIcons); - }, [agentsData, props.isMobileWidth]); + }, [agentsData]); function showAllSuggestionsCards() { setStepOneSuggestionOptions(stepOneSuggestions); @@ -204,7 +195,7 @@ function ChatBodyData(props: ChatBodyDataProps) { }, []); function clickStepOneSuggestion(suggestion: StepOneSuggestion) { - setPrefilledMessage(suggestion.intent); + setPrefillMessage(suggestion.intent); const stepTwoSuggestions = getStepTwoSuggestions(suggestion.type); setSelectedStepOneSuggestion(suggestion); setStepTwoSuggestionOptions(stepTwoSuggestions); @@ -308,7 +299,7 @@ function ChatBodyData(props: ChatBodyDataProps) { > setMessage(message)} sendImage={(image) => setImages((prevImages) => [...prevImages, image])} @@ -367,10 +358,10 @@ function ChatBodyData(props: ChatBodyDataProps) { body={selectedStepOneSuggestion.actionTagline} color={selectedStepOneSuggestion.color} onClick={() => { + setPrefillMessage(""); setSelectedStepOneSuggestion(null); setStepTwoSuggestionOptions([]); setChatInputFocus(ChatInputFocus.MESSAGE); - setPrefilledMessage(""); }} /> )}