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

changed chat input design

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-21 18:11:24 -03:00 • committed by Mike Fortman
parent c36fb44ce6
commit 3d56fd4932
1 changed files with 266 additions and 264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { Check, Funnel, Loader2, Plus, X } from "lucide-react"; import { Check, Funnel, Loader2, Plus, X } from "lucide-react";
import TextareaAutosize from "react-textarea-autosize";
import { forwardRef, useImperativeHandle, useRef } from "react"; import { forwardRef, useImperativeHandle, useRef } from "react";
import TextareaAutosize from "react-textarea-autosize";
import type { FilterColor } from "@/components/filter-icon-popover";
import { filterAccentClasses } from "@/components/knowledge-filter-panel"; import { filterAccentClasses } from "@/components/knowledge-filter-panel";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -9,7 +10,6 @@ import {
PopoverContent, PopoverContent,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import type { KnowledgeFilterData } from "../types"; import type { KnowledgeFilterData } from "../types";
import { FilterColor } from "@/components/filter-icon-popover";
export interface ChatInputHandle { export interface ChatInputHandle {
focusInput: () => void; focusInput: () => void;
@ -41,7 +41,8 @@ interface ChatInputProps {
setIsFilterDropdownOpen: (open: boolean) => void; setIsFilterDropdownOpen: (open: boolean) => void;
} }
export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(( export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
(
{ {
input, input,
loading, loading,
@ -66,8 +67,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
setIsFilterHighlighted, setIsFilterHighlighted,
setIsFilterDropdownOpen, setIsFilterDropdownOpen,
}, },
ref ref,
) => { ) => {
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
@ -81,7 +82,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
})); }));
return ( return (
<div className="pb-8 pt-4 flex px-6"> <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 w-full bg-muted/20 rounded-lg border border-border/50 focus-within:ring-1 focus-within:ring-ring">
@ -144,7 +145,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
variant="outline" variant="outline"
size="iconSm" size="iconSm"
className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50" className="absolute bottom-3 left-3 h-8 w-8 p-0 rounded-full hover:bg-muted/50"
onMouseDown={e => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
onClick={onAtClick} onClick={onAtClick}
@ -154,7 +155,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
</Button> </Button>
<Popover <Popover
open={isFilterDropdownOpen} open={isFilterDropdownOpen}
onOpenChange={open => { onOpenChange={(open) => {
setIsFilterDropdownOpen(open); setIsFilterDropdownOpen(open);
}} }}
> >
@ -179,7 +180,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
align="start" align="start"
sideOffset={6} sideOffset={6}
alignOffset={-18} alignOffset={-18}
onOpenAutoFocus={e => { onOpenAutoFocus={(e) => {
// Prevent auto focus on the popover content // Prevent auto focus on the popover content
e.preventDefault(); e.preventDefault();
// Keep focus on the input // Keep focus on the input
@ -212,10 +213,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
</button> </button>
)} )}
{availableFilters {availableFilters
.filter(filter => .filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase()),
) )
.map((filter, index) => ( .map((filter, index) => (
<button <button
@ -241,10 +242,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
)} )}
</button> </button>
))} ))}
{availableFilters.filter(filter => {availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()) .includes(filterSearchTerm.toLowerCase()),
).length === 0 && ).length === 0 &&
filterSearchTerm && ( filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground"> <div className="px-2 py-3 text-sm text-muted-foreground">
@ -277,6 +278,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>((
</div> </div>
</div> </div>
); );
}); },
);
ChatInput.displayName = "ChatInput"; ChatInput.displayName = "ChatInput";