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

fix: makes chat input design, adds context files the right way
2025-10-24 02:34:57 -04:00 · 2025-10-24 02:34:57 -04:00 · 3dc0d5d35d
commit 3dc0d5d35d
parent e7e2856c26 13040a4b8f
7 changed files with 735 additions and 672 deletions
--- a/frontend/components/knowledge-search-input.tsx
+++ b/frontend/components/knowledge-search-input.tsx
@ -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 {
+	type ChangeEvent,
+	type FormEvent,
+	useCallback,
+	useEffect,
+	useState,
+} from "react";
 import { Button } from "@/components/ui/button";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { cn } from "@/lib/utils";
+import { filterAccentClasses } from "./knowledge-filter-panel";

 export const KnowledgeSearchInput = () => {
-  const {
-    selectedFilter,
-    setSelectedFilter,
-    parsedFilterData,
-    queryOverride,
-    setQueryOverride,
-  } = useKnowledgeFilter();
+	const {
+		selectedFilter,
+		setSelectedFilter,
+		parsedFilterData,
+		queryOverride,
+		setQueryOverride,
+	} = useKnowledgeFilter();

-  const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
+	const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");

-  const handleSearch = useCallback(
-    (e?: FormEvent<HTMLFormElement>) => {
-      if (e) e.preventDefault();
-      setQueryOverride(searchQueryInput.trim());
-    },
-    [searchQueryInput, setQueryOverride]
-  );
+	const handleSearch = useCallback(
+		(e?: FormEvent<HTMLFormElement>) => {
+			if (e) e.preventDefault();
+			setQueryOverride(searchQueryInput.trim());
+		},
+		[searchQueryInput, setQueryOverride],
+	);

-  // Reset the query text when the selected filter changes
-  useEffect(() => {
-    setSearchQueryInput(queryOverride);
-  }, [queryOverride]);
+	// Reset the query text when the selected filter changes
+	useEffect(() => {
+		setSearchQueryInput(queryOverride);
+	}, [queryOverride]);

-  return (
-    <form
-      className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
-      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]">
-        {selectedFilter?.name && (
-          <div
-            title={selectedFilter?.name}
-            className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
-              filterAccentClasses[parsedFilterData?.color || "zinc"]
-            }`}
-          >
-            <span className="truncate">{selectedFilter?.name}</span>
-            <X
-              aria-label="Remove filter"
-              className="h-4 w-4 flex-shrink-0 cursor-pointer"
-              onClick={() => setSelectedFilter(null)}
-            />
-          </div>
-        )}
-        <Search
-          className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
-          strokeWidth={1.5}
-        />
-        <input
-          className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
-          name="search-query"
-          id="search-query"
-          type="text"
-          placeholder="Search your documents..."
-          value={searchQueryInput}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setSearchQueryInput(e.target.value)
-          }
-        />
-        {queryOverride && (
-          <Button
-            variant="ghost"
-            className="h-full rounded-sm !px-1.5 !py-0"
-            type="button"
-            onClick={() => {
-              setSearchQueryInput("");
-              setQueryOverride("");
-            }}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        )}
-        <Button
-          variant="ghost"
-          className={cn(
-            "h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
-            searchQueryInput && "block"
-          )}
-          type="submit"
-        >
-          <ArrowRight className="h-4 w-4" />
-        </Button>
-      </div>
-    </form>
-  );
+	return (
+		<form
+			className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
+			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]">
+				{selectedFilter?.name && (
+					<div
+						title={selectedFilter?.name}
+						className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
+							filterAccentClasses[parsedFilterData?.color || "zinc"]
+						}`}
+					>
+						<span className="truncate text-xs font-medium">{selectedFilter?.name}</span>
+						<X
+							aria-label="Remove filter"
+							className="h-4 w-4 flex-shrink-0 cursor-pointer"
+							onClick={() => setSelectedFilter(null)}
+						/>
+					</div>
+				)}
+				<Search
+					className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
+					strokeWidth={1.5}
+				/>
+				<input
+					className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
+					name="search-query"
+					id="search-query"
+					type="text"
+					placeholder="Search your documents..."
+					value={searchQueryInput}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						setSearchQueryInput(e.target.value)
+					}
+				/>
+				{queryOverride && (
+					<Button
+						variant="ghost"
+						className="h-full rounded-sm !px-1.5 !py-0"
+						type="button"
+						onClick={() => {
+							setSearchQueryInput("");
+							setQueryOverride("");
+						}}
+					>
+						<X className="h-4 w-4" />
+					</Button>
+				)}
+				<Button
+					variant="ghost"
+					className={cn(
+						"h-full rounded-sm !px-1.5 !py-0 hidden group-focus-within/input:block",
+						searchQueryInput && "block",
+					)}
+					type="submit"
+				>
+					<ArrowRight className="h-4 w-4" />
+				</Button>
+			</div>
+		</form>
+	);
 };
--- a/frontend/components/navigation.tsx
+++ b/frontend/components/navigation.tsx
--- a/frontend/src/app/chat/components/chat-input.tsx
+++ b/frontend/src/app/chat/components/chat-input.tsx
@ -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 TextareaAutosize from "react-textarea-autosize";
 import type { FilterColor } from "@/components/filter-icon-popover";
@ -82,34 +82,45 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 		}));

 		return (
-			<div className="pb-8 flex px-6">
 				<div className="w-full">
 					<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">
-							{selectedFilter && (
-								<div className="flex items-center gap-2 px-4 pt-3 pb-1">
-									<span
-										className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${
-											filterAccentClasses[parsedFilterData?.color || "zinc"]
-										}`}
+						<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 ? (
+								<span
+									className={`inline-flex items-center p-1 rounded-sm text-xs font-medium transition-colors ${
+										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}
-										<button
-											type="button"
-											onClick={() => {
-												setSelectedFilter(null);
-												setIsFilterHighlighted(false);
-											}}
-											className="ml-1 rounded-full p-0.5"
-										>
-											<X className="h-3 w-3" />
-										</button>
-									</span>
-								</div>
+										<X className="h-4 w-4" />
+									</button>
+								</span>
+							) : (
+								<Button
+									type="button"
+									variant="ghost"
+									size="iconSm"
+									className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
+									onMouseDown={(e) => {
+										e.preventDefault();
+									}}
+									onClick={onAtClick}
+									data-filter-button
+								>
+									<Funnel className="h-4 w-4" />
+								</Button>
 							)}
 							<div
-								className="relative"
-								style={{ height: `${textareaHeight + 60}px` }}
+								className="relative flex-1"
+								style={{ height: `${textareaHeight}px` }}
 							>
 								<TextareaAutosize
 									ref={inputRef}
@ -118,20 +129,36 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 									onKeyDown={onKeyDown}
 									onHeightChange={onHeightChange}
 									maxRows={7}
-									minRows={2}
-									placeholder="Type to ask a question..."
+									minRows={1}
+									placeholder="Ask a question..."
 									disabled={loading}
-									className={`w-full bg-transparent px-4 ${
-										selectedFilter ? "pt-2" : "pt-4"
-									} 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" }}
+									className={`w-full text-sm bg-transparent focus-visible:outline-none resize-none`}
+									rows={1}
 								/>
 							</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>
 						<input
 							ref={fileInputRef}
@ -140,19 +167,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 							className="hidden"
 							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
 							open={isFilterDropdownOpen}
 							onOpenChange={(open) => {
@ -257,26 +272,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 								</div>
 							</PopoverContent>
 						</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>
 				</div>
-			</div>
 		);
 	},
 );
--- a/frontend/src/app/chat/components/user-message.tsx
+++ b/frontend/src/app/chat/components/user-message.tsx
@ -1,4 +1,4 @@
-import { User } from "lucide-react";
+import { FileText, User } from "lucide-react";
 import { motion } from "motion/react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useAuth } from "@/contexts/auth-context";
@ -9,12 +9,12 @@ interface UserMessageProps {
 	content: string;
 	isCompleted?: 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();

-	console.log("animate", animate);

 	return (
 		<motion.div
@ -38,6 +38,12 @@ export function UserMessage({ content, isCompleted, animate = true }: UserMessag
 					</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
 					className={cn(
 						"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300",
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@ -9,6 +9,7 @@ import { type EndpointType, useChat } from "@/contexts/chat-context";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import { useChatStreaming } from "@/hooks/useChatStreaming";
+import { FILES_REGEX } from "@/lib/constants";
 import { useLoadingStore } from "@/stores/loadingStore";
 import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
 import { AssistantMessage } from "./components/assistant-message";
@ -1182,29 +1183,53 @@ function ChatPage() {
 					) : (
 						<>
 							{messages.map((message, index) => (
-								<div
-									key={`${
-										message.role
-									}-${index}-${message.timestamp?.getTime()}`}
-									className="space-y-6 group"
-								>
-									{message.role === "user" && (
-										<UserMessage animate={message.source !== "langflow"} content={message.content} />
-									)}
+								<>
+									{message.role === "user" &&
+										(messages[index]?.content.match(FILES_REGEX)?.[0] ??
+											null) === null && (
+											<div
+												key={`${
+													message.role
+												}-${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" && (
-										<AssistantMessage
-											content={message.content}
-											functionCalls={message.functionCalls}
-											messageIndex={index}
-											expandedFunctionCalls={expandedFunctionCalls}
-											onToggle={toggleFunctionCall}
-											showForkButton={endpoint === "chat"}
-											onFork={(e) => handleForkConversation(index, e)}
-											animate={false}
-										/>
-									)}
-								</div>
+									{message.role === "assistant" &&
+										(index < 1 ||
+											(messages[index - 1]?.content.match(FILES_REGEX)?.[0] ??
+												null) === null) && (
+											<div
+												key={`${
+													message.role
+												}-${index}-${message.timestamp?.getTime()}`}
+												className="space-y-6 group"
+											>
+												<AssistantMessage
+													content={message.content}
+													functionCalls={message.functionCalls}
+													messageIndex={index}
+													expandedFunctionCalls={expandedFunctionCalls}
+													onToggle={toggleFunctionCall}
+													showForkButton={endpoint === "chat"}
+													onFork={(e) => handleForkConversation(index, e)}
+													animate={false}
+												/>
+											</div>
+										)}
+								</>
 							))}

 							{/* Streaming Message Display */}
@ -1231,33 +1256,34 @@ function ChatPage() {
 					)}
 				</div>
 			</StickToBottom.Content>
-
-			{/* Input Area - Fixed at bottom */}
-			<ChatInput
-				ref={chatInputRef}
-				input={input}
-				loading={loading}
-				isUploading={isUploading}
-				selectedFilter={selectedFilter}
-				isFilterDropdownOpen={isFilterDropdownOpen}
-				availableFilters={availableFilters}
-				filterSearchTerm={filterSearchTerm}
-				selectedFilterIndex={selectedFilterIndex}
-				anchorPosition={anchorPosition}
-				textareaHeight={textareaHeight}
-				parsedFilterData={parsedFilterData}
-				onSubmit={handleSubmit}
-				onChange={onChange}
-				onKeyDown={handleKeyDown}
-				onHeightChange={(height) => setTextareaHeight(height)}
-				onFilterSelect={handleFilterSelect}
-				onAtClick={onAtClick}
-				onFilePickerChange={handleFilePickerChange}
-				onFilePickerClick={handleFilePickerClick}
-				setSelectedFilter={setSelectedFilter}
-				setIsFilterHighlighted={setIsFilterHighlighted}
-				setIsFilterDropdownOpen={setIsFilterDropdownOpen}
-			/>
+			<div className="p-6 pt-0 max-w-[960px] mx-auto w-full">
+				{/* Input Area - Fixed at bottom */}
+				<ChatInput
+					ref={chatInputRef}
+					input={input}
+					loading={loading}
+					isUploading={isUploading}
+					selectedFilter={selectedFilter}
+					isFilterDropdownOpen={isFilterDropdownOpen}
+					availableFilters={availableFilters}
+					filterSearchTerm={filterSearchTerm}
+					selectedFilterIndex={selectedFilterIndex}
+					anchorPosition={anchorPosition}
+					textareaHeight={textareaHeight}
+					parsedFilterData={parsedFilterData}
+					onSubmit={handleSubmit}
+					onChange={onChange}
+					onKeyDown={handleKeyDown}
+					onHeightChange={(height) => setTextareaHeight(height)}
+					onFilterSelect={handleFilterSelect}
+					onAtClick={onAtClick}
+					onFilePickerChange={handleFilePickerChange}
+					onFilePickerClick={handleFilePickerClick}
+					setSelectedFilter={setSelectedFilter}
+					setIsFilterHighlighted={setIsFilterHighlighted}
+					setIsFilterDropdownOpen={setIsFilterDropdownOpen}
+				/>
+			</div>
 		</>
 	);
 }
--- a/frontend/src/lib/constants.ts
+++ b/frontend/src/lib/constants.ts
@ -32,4 +32,7 @@ export const TOTAL_ONBOARDING_STEPS = 3;
 /**
 * 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:)/;
--- a/src/api/upload.py
+++ b/src/api/upload.py
@ -99,13 +99,12 @@ async def upload_context(
    # Get optional parameters
    previous_response_id = form.get("previous_response_id")
    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)
    user = request.state.user
    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
    doc_result = await document_service.process_upload_context(upload_file, filename)