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

Merge pull request #292 from langflow-ai/fix/chat-input-design

Browse source 
fix: makes chat input design, adds context files the right way
This commit is contained in:
Sebastián Estévez 2025-10-24 02:34:57 -04:00 • committed by GitHub
commit 3dc0d5d35d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 735 additions and 672 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
frontend/components/knowledge-search-input.tsx
View file

@ -1,100 +1,100 @@
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import {
ChangeEvent,
FormEvent,
useCallback,
useEffect,
useState,
} from "react";
import { filterAccentClasses } from "./knowledge-filter-panel";
import { ArrowRight, Search, X } from "lucide-react"; import { ArrowRight, Search, X } from "lucide-react";
import {
type ChangeEvent,
type FormEvent,
useCallback,
useEffect,
useState,
} from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { filterAccentClasses } from "./knowledge-filter-panel";
export const KnowledgeSearchInput = () => { export const KnowledgeSearchInput = () => {
const { const {
selectedFilter, selectedFilter,
setSelectedFilter, setSelectedFilter,
parsedFilterData, parsedFilterData,
queryOverride, queryOverride,
setQueryOverride, setQueryOverride,
} = useKnowledgeFilter(); } = useKnowledgeFilter();
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || ""); const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
const handleSearch = useCallback( const handleSearch = useCallback(
(e?: FormEvent<HTMLFormElement>) => { (e?: FormEvent<HTMLFormElement>) => {
if (e) e.preventDefault(); if (e) e.preventDefault();
setQueryOverride(searchQueryInput.trim()); setQueryOverride(searchQueryInput.trim());
}, },
[searchQueryInput, setQueryOverride] [searchQueryInput, setQueryOverride],
); );
// Reset the query text when the selected filter changes // Reset the query text when the selected filter changes
useEffect(() => { useEffect(() => {
setSearchQueryInput(queryOverride); setSearchQueryInput(queryOverride);
}, [queryOverride]); }, [queryOverride]);
return ( return (
<form <form
className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]" className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
onSubmit={handleSearch} onSubmit={handleSearch}
> >
<div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]"> <div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
{selectedFilter?.name && ( {selectedFilter?.name && (
<div <div
title={selectedFilter?.name} title={selectedFilter?.name}
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${ className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"] filterAccentClasses[parsedFilterData?.color || "zinc"]
}`} }`}
> >
<span className="truncate">{selectedFilter?.name}</span> <span className="truncate text-xs font-medium">{selectedFilter?.name}</span>
<X <X
aria-label="Remove filter" aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer" className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)} onClick={() => setSelectedFilter(null)}
/> />
</div> </div>
)} )}
<Search <Search
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
strokeWidth={1.5} strokeWidth={1.5}
/> />
<input <input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono" className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query" name="search-query"
id="search-query" id="search-query"
type="text" type="text"
placeholder="Search your documents..." placeholder="Search your documents..."
value={searchQueryInput} value={searchQueryInput}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQueryInput(e.target.value) setSearchQueryInput(e.target.value)
} }
/> />
{queryOverride && ( {queryOverride && (
<Button <Button
variant="ghost" variant="ghost"
className="h-full rounded-sm !px-1.5 !py-0" className="h-full rounded-sm !px-1.5 !py-0"
type="button" type="button"
onClick={() => { onClick={() => {
setSearchQueryInput(""); setSearchQueryInput("");
setQueryOverride(""); setQueryOverride("");
}} }}
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
)} )}
<Button <Button
variant="ghost" variant="ghost"
className={cn( className={cn(
"h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block", "h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
searchQueryInput && "block" searchQueryInput && "block",
)} )}
type="submit" type="submit"
> >
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</div> </div>
</form> </form>
); );
}; };

952
frontend/components/navigation.tsx
View file

File diff suppressed because it is too large Load diff

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>
); );
}, },
); );

12
frontend/src/app/chat/components/user-message.tsx
View file

@ -1,4 +1,4 @@
import { User } from "lucide-react"; import { FileText, User } from "lucide-react";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
@ -9,12 +9,12 @@ interface UserMessageProps {
content: string; content: string;
isCompleted?: boolean; isCompleted?: boolean;
animate?: boolean; animate?: boolean;
files?: string;
} }
export function UserMessage({ content, isCompleted, animate = true }: UserMessageProps) { export function UserMessage({ content, isCompleted, animate = true, files }: UserMessageProps) {
const { user } = useAuth(); const { user } = useAuth();
console.log("animate", animate);
return ( return (
<motion.div <motion.div
@ -38,6 +38,12 @@ export function UserMessage({ content, isCompleted, animate = true }: UserMessag
</Avatar> </Avatar>
} }
> >
{files && (
<p className="text-muted-foreground flex items-center gap-2 font-normal text-mmd py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300">
<FileText className="h-4 w-4" />
{files}
</p>
)}
<p <p
className={cn( className={cn(
"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300", "text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300",

124
frontend/src/app/chat/page.tsx
View file

@ -9,6 +9,7 @@ import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { useChatStreaming } from "@/hooks/useChatStreaming"; import { useChatStreaming } from "@/hooks/useChatStreaming";
import { FILES_REGEX } from "@/lib/constants";
import { useLoadingStore } from "@/stores/loadingStore"; import { useLoadingStore } from "@/stores/loadingStore";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery"; import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
import { AssistantMessage } from "./components/assistant-message"; import { AssistantMessage } from "./components/assistant-message";
@ -1182,29 +1183,53 @@ function ChatPage() {
) : ( ) : (
<> <>
{messages.map((message, index) => ( {messages.map((message, index) => (
<div <>
key={`${ {message.role === "user" &&
message.role (messages[index]?.content.match(FILES_REGEX)?.[0] ??
}-${index}-${message.timestamp?.getTime()}`} null) === null && (
className="space-y-6 group" <div
> key={`${
{message.role === "user" && ( message.role
<UserMessage animate={message.source !== "langflow"} content={message.content} /> }-${index}-${message.timestamp?.getTime()}`}
)} className="space-y-6 group"
>
<UserMessage
animate={message.source !== "langflow"}
content={message.content}
files={
index >= 2
? (messages[index - 2]?.content.match(
FILES_REGEX,
)?.[0] ?? undefined)
: undefined
}
/>
</div>
)}
{message.role === "assistant" && ( {message.role === "assistant" &&
<AssistantMessage (index < 1 ||
content={message.content} (messages[index - 1]?.content.match(FILES_REGEX)?.[0] ??
functionCalls={message.functionCalls} null) === null) && (
messageIndex={index} <div
expandedFunctionCalls={expandedFunctionCalls} key={`${
onToggle={toggleFunctionCall} message.role
showForkButton={endpoint === "chat"} }-${index}-${message.timestamp?.getTime()}`}
onFork={(e) => handleForkConversation(index, e)} className="space-y-6 group"
animate={false} >
/> <AssistantMessage
)} content={message.content}
</div> functionCalls={message.functionCalls}
messageIndex={index}
expandedFunctionCalls={expandedFunctionCalls}
onToggle={toggleFunctionCall}
showForkButton={endpoint === "chat"}
onFork={(e) => handleForkConversation(index, e)}
animate={false}
/>
</div>
)}
</>
))} ))}
{/* Streaming Message Display */} {/* Streaming Message Display */}
@ -1231,33 +1256,34 @@ function ChatPage() {
)} )}
</div> </div>
</StickToBottom.Content> </StickToBottom.Content>
<div className="p-6 pt-0 max-w-[960px] mx-auto w-full">
{/* Input Area - Fixed at bottom */} {/* Input Area - Fixed at bottom */}
<ChatInput <ChatInput
ref={chatInputRef} ref={chatInputRef}
input={input} input={input}
loading={loading} loading={loading}
isUploading={isUploading} isUploading={isUploading}
selectedFilter={selectedFilter} selectedFilter={selectedFilter}
isFilterDropdownOpen={isFilterDropdownOpen} isFilterDropdownOpen={isFilterDropdownOpen}
availableFilters={availableFilters} availableFilters={availableFilters}
filterSearchTerm={filterSearchTerm} filterSearchTerm={filterSearchTerm}
selectedFilterIndex={selectedFilterIndex} selectedFilterIndex={selectedFilterIndex}
anchorPosition={anchorPosition} anchorPosition={anchorPosition}
textareaHeight={textareaHeight} textareaHeight={textareaHeight}
parsedFilterData={parsedFilterData} parsedFilterData={parsedFilterData}
onSubmit={handleSubmit} onSubmit={handleSubmit}
onChange={onChange} onChange={onChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onHeightChange={(height) => setTextareaHeight(height)} onHeightChange={(height) => setTextareaHeight(height)}
onFilterSelect={handleFilterSelect} onFilterSelect={handleFilterSelect}
onAtClick={onAtClick} onAtClick={onAtClick}
onFilePickerChange={handleFilePickerChange} onFilePickerChange={handleFilePickerChange}
onFilePickerClick={handleFilePickerClick} onFilePickerClick={handleFilePickerClick}
setSelectedFilter={setSelectedFilter} setSelectedFilter={setSelectedFilter}
setIsFilterHighlighted={setIsFilterHighlighted} setIsFilterHighlighted={setIsFilterHighlighted}
setIsFilterDropdownOpen={setIsFilterDropdownOpen} setIsFilterDropdownOpen={setIsFilterDropdownOpen}
/> />
</div>
</> </>
); );
} }

5
frontend/src/lib/constants.ts
View file

@ -32,4 +32,7 @@ export const TOTAL_ONBOARDING_STEPS = 3;
/** /**
* Local Storage Keys * Local Storage Keys
*/ */
export const ONBOARDING_STEP_KEY = "onboarding_current_step"; export const ONBOARDING_STEP_KEY = "onboarding_current_step";
export const FILES_REGEX =
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;

5
src/api/upload.py
View file

@ -99,13 +99,12 @@ async def upload_context(
# Get optional parameters # Get optional parameters
previous_response_id = form.get("previous_response_id") previous_response_id = form.get("previous_response_id")
endpoint = form.get("endpoint", "langflow") endpoint = form.get("endpoint", "langflow")
jwt_token = session_manager.get_effective_jwt_token(user_id, request.state.jwt_token)
# Get user info from request state (set by auth middleware) # Get user info from request state (set by auth middleware)
user = request.state.user user = request.state.user
user_id = user.user_id if user else None user_id = user.user_id if user else None
jwt_token = session_manager.get_effective_jwt_token(user_id, request.state.jwt_token)
# Process document and extract content # Process document and extract content
doc_result = await document_service.process_upload_context(upload_file, filename) doc_result = await document_service.process_upload_context(upload_file, filename)