sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a research mode toggle to the chat input area

Browse source
This commit is contained in:
sabaimran 2024-10-27 16:37:40 -07:00
parent 68499e253b
commit 2924909692
2 changed files with 164 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/components/chatHistory/chatHistory.tsx
View file

@ -419,7 +419,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
</div> </div>
)} )}
</div> </div>
<div className={`${props.customClassName} fixed bottom-[15%] z-10`}> <div className={`${props.customClassName} fixed bottom-[20%] z-10`}>
{!isNearBottom && ( {!isNearBottom && (
<button <button
title="Scroll to bottom" title="Scroll to bottom"

55
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -3,7 +3,15 @@ import React, { useEffect, useRef, useState, forwardRef } from "react";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import { ArrowUp, Microphone, Paperclip, X, Stop } from "@phosphor-icons/react"; import {
ArrowUp,
Microphone,
Paperclip,
X,
Stop,
ToggleLeft,
ToggleRight,
} from "@phosphor-icons/react";
import { import {
Command, Command,
@ -29,7 +37,7 @@ import { Popover, PopoverContent } from "@/components/ui/popover";
import { PopoverTrigger } from "@radix-ui/react-popover"; import { PopoverTrigger } from "@radix-ui/react-popover";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { convertToBGClass } from "@/app/common/colorUtils"; import { convertColorToTextClass, convertToBGClass } from "@/app/common/colorUtils";
import LoginPrompt from "../loginPrompt/loginPrompt"; import LoginPrompt from "../loginPrompt/loginPrompt";
import { uploadDataForIndexing } from "../../common/chatFunctions"; import { uploadDataForIndexing } from "../../common/chatFunctions";
@ -73,6 +81,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
const [isDragAndDropping, setIsDragAndDropping] = useState(false); const [isDragAndDropping, setIsDragAndDropping] = useState(false);
const [showCommandList, setShowCommandList] = useState(false); const [showCommandList, setShowCommandList] = useState(false);
const [useResearchMode, setUseResearchMode] = useState(false);
const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>; const chatInputRef = ref as React.MutableRefObject<HTMLTextAreaElement>;
useEffect(() => { useEffect(() => {
@ -130,7 +139,12 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
return; return;
} }
props.sendMessage(message.trim()); let messageToSend = message.trim();
if (useResearchMode) {
messageToSend = `/research ${messageToSend}`;
}
props.sendMessage(messageToSend);
setMessage(""); setMessage("");
} }
@ -416,6 +430,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
</Popover> </Popover>
</div> </div>
)} )}
<div>
<div <div
className={`${styles.actualInputArea} justify-between dark:bg-neutral-700 relative ${isDragAndDropping && "animate-pulse"}`} className={`${styles.actualInputArea} justify-between dark:bg-neutral-700 relative ${isDragAndDropping && "animate-pulse"}`}
onDragOver={handleDragOver} onDragOver={handleDragOver}
@ -443,7 +458,10 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
<div className="flex items-center gap-2 overflow-x-auto"> <div className="flex items-center gap-2 overflow-x-auto">
{imageUploaded && {imageUploaded &&
imagePaths.map((path, index) => ( imagePaths.map((path, index) => (
<div key={index} className="relative flex-shrink-0 pb-3 pt-2 group"> <div
key={index}
className="relative flex-shrink-0 pb-3 pt-2 group"
>
<img <img
src={path} src={path}
alt={`img-${index}`} alt={`img-${index}`}
@ -533,6 +551,35 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
</Button> </Button>
</div> </div>
</div> </div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
className="float-right justify-center flex items-center p-0"
onClick={() => setUseResearchMode(!useResearchMode)}
>
<span className="text-muted-foreground text-sm mr-1">
Research Mode
</span>
{useResearchMode ? (
<ToggleRight
className={`w-6 h-6 inline-block mr-1 ${props.agentColor ? convertColorToTextClass(props.agentColor) : convertColorToTextClass("orange")} rounded-full`}
/>
) : (
<ToggleLeft
className={`w-6 h-6 inline-block mr-1 rounded-full`}
/>
)}
</Button>
</TooltipTrigger>
<TooltipContent>
Research Mode allows you to get more deeply researched, detailed
responses. Response times may be longer.
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</> </>
); );
}); });