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

Update the home page suggestion cards

Browse Source 
- Rather than chunky generic cards, make the suggested actions more action oriented, around the problem a user might want to solve. Give them follow-up options. Design still in progress.
This commit is contained in:
sabaimran
2024-12-21 18:57:19 -08:00
parent 2c7c16d93e
commit 95826393e1
6 changed files with 387 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,6 +65,12 @@ export interface AttachedFileText {
size: number;
}
export enum ChatInputFocus {
MESSAGE = "message",
FILE = "file",
RESEARCH = "research",
}
interface ChatInputProps {
sendMessage: (message: string) => void;
sendImage: (image: string) => void;
@@ -77,11 +83,15 @@ interface ChatInputProps {
agentColor?: string;
isResearchModeEnabled?: boolean;
setTriggeredAbort: (value: boolean) => void;
prefillMessage?: string;
focus?: ChatInputFocus;
}
export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((props, ref) => {
const [message, setMessage] = useState("");
const fileInputRef = useRef<HTMLInputElement>(null);
const fileInputButtonRef = useRef<HTMLButtonElement>(null);
const researchModeRef = useRef<HTMLButtonElement>(null);
const [warning, setWarning] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
@@ -125,6 +135,22 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
}
}, [uploading]);
useEffect(() => {
if (props.prefillMessage) {
setMessage(props.prefillMessage);
}
}, [props.prefillMessage]);
useEffect(() => {
if (props.focus === ChatInputFocus.MESSAGE) {
chatInputRef?.current?.focus();
} else if (props.focus === ChatInputFocus.FILE) {
fileInputButtonRef.current?.focus();
} else if (props.focus === ChatInputFocus.RESEARCH) {
researchModeRef.current?.focus();
}
}, [props.focus]);
useEffect(() => {
async function fetchImageData() {
if (imagePaths.length > 0) {
@@ -630,6 +656,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
className="!bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled || !props.isLoggedIn}
onClick={handleFileButtonClick}
ref={fileInputButtonRef}
>
<Paperclip className="w-8 h-8" />
</Button>
@@ -732,6 +759,7 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
variant="ghost"
className="float-right justify-center gap-1 flex items-center p-1.5 mr-2 h-fit"
disabled={props.sendDisabled || !props.isLoggedIn}
ref={researchModeRef}
onClick={() => {
setUseResearchMode(!useResearchMode);
chatInputRef?.current?.focus();