gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

changed chat input design

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-23 16:36:27 -03:00
parent b56cf0deb4
commit 185f50af2f
1 changed files with 63 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
frontend/src/app/chat/components/chat-input.tsx
View file

@ -1,4 +1,4 @@
import { Check, Funnel, Loader2, Plus, X } from "lucide-react"; import { ArrowRight, Check, Funnel, Loader2, Plus, X } from "lucide-react";
import { forwardRef, useImperativeHandle, useRef } from "react"; import { forwardRef, useImperativeHandle, useRef } from "react";
import TextareaAutosize from "react-textarea-autosize"; import TextareaAutosize from "react-textarea-autosize";
import type { FilterColor } from "@/components/filter-icon-popover"; import type { FilterColor } from "@/components/filter-icon-popover";
@ -82,34 +82,45 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
})); }));
return ( return (
<div className="pb-8 flex px-6">
<div className="w-full"> <div className="w-full">
<form onSubmit={onSubmit} className="relative"> <form onSubmit={onSubmit} className="relative">
<div className="relative w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring"> <div className="relative flex items-center w-full p-2 gap-2 rounded-xl border border-input focus-within:ring-1 focus-within:ring-ring">
{selectedFilter && ( {selectedFilter ? (
<div className="flex items-center gap-2 px-4 pt-3 pb-1"> <span
<span className={`inline-flex items-center p-1 rounded-sm text-xs font-medium transition-colors ${
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${ filterAccentClasses[parsedFilterData?.color || "zinc"]
filterAccentClasses[parsedFilterData?.color || "zinc"] }`}
}`} >
{selectedFilter.name}
<button
type="button"
onClick={() => {
setSelectedFilter(null);
setIsFilterHighlighted(false);
}}
className="ml-0.5 rounded-full p-0.5"
> >
@filter:{selectedFilter.name} <X className="h-4 w-4" />
<button </button>
type="button" </span>
onClick={() => { ) : (
setSelectedFilter(null); <Button
setIsFilterHighlighted(false); type="button"
}} variant="ghost"
className="ml-1 rounded-full p-0.5" size="iconSm"
> className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
<X className="h-3 w-3" /> onMouseDown={(e) => {
</button> e.preventDefault();
</span> }}
</div> onClick={onAtClick}
data-filter-button
>
<Funnel className="h-4 w-4" />
</Button>
)} )}
<div <div
className="relative" className="relative flex-1"
style={{ height: `${textareaHeight + 60}px` }} style={{ height: `${textareaHeight}px` }}
> >
<TextareaAutosize <TextareaAutosize
ref={inputRef} ref={inputRef}
@ -118,20 +129,36 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onHeightChange={onHeightChange} onHeightChange={onHeightChange}
maxRows={7} maxRows={7}
minRows={2} minRows={1}
placeholder="Type to ask a question..." placeholder="Ask a question..."
disabled={loading} disabled={loading}
className={`w-full bg-transparent px-4 ${ className={`w-full text-sm bg-transparent focus-visible:outline-none resize-none`}
selectedFilter ? "pt-2" : "pt-4" rows={1}
} focus-visible:outline-none resize-none`}
rows={2}
/>
{/* Safe area at bottom for buttons */}
<div
className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
style={{ height: "60px" }}
/> />
</div> </div>
<Button
type="button"
variant="ghost"
size="iconSm"
onClick={onFilePickerClick}
disabled={isUploading}
className="h-8 w-8 p-0 !rounded-md hover:bg-muted/50"
>
<Plus className="h-4 w-4" />
</Button>
<Button
variant="default"
type="submit"
size="iconSm"
disabled={!input.trim() || loading}
className="!rounded-md h-8 w-8 p-0"
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowRight className="h-4 w-4" />
)}
</Button>
</div> </div>
<input <input
ref={fileInputRef} ref={fileInputRef}
@ -140,19 +167,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
className="hidden" className="hidden"
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt" accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
/> />
<Button
type="button"
variant="outline"
size="iconSm"
className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
onMouseDown={(e) => {
e.preventDefault();
}}
onClick={onAtClick}
data-filter-button
>
<Funnel className="h-4 w-4" />
</Button>
<Popover <Popover
open={isFilterDropdownOpen} open={isFilterDropdownOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
@ -257,26 +272,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<Button
type="button"
variant="outline"
size="iconSm"
onClick={onFilePickerClick}
disabled={isUploading}
className="absolute bottom-3 left-12 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
>
<Plus className="h-4 w-4" />
</Button>
<Button
type="submit"
disabled={!input.trim() || loading}
className="absolute bottom-3 right-3 rounded-lg h-10 px-4"
>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Send"}
</Button>
</form> </form>
</div> </div>
</div>
); );
}, },
); );