fix chat issue and change view icon (#5525)

Author: Subash-Mohan

backend/onyx/agents/agent_search/dr/nodes/dr_a0_clarification.py

@@ -643,9 +643,16 @@ def clarifier(
                         datetime_aware=True,
                     )
 
-                system_prompt_to_use = build_citations_system_message(
+                system_prompt_to_use_content = build_citations_system_message(
                     prompt_config
                 ).content
+                system_prompt_to_use: str = cast(str, system_prompt_to_use_content)
+                if graph_config.inputs.project_instructions:
+                    system_prompt_to_use = (
+                        system_prompt_to_use
+                        + PROJECT_INSTRUCTIONS_SEPARATOR
+                        + graph_config.inputs.project_instructions
+                    )
                 user_prompt_to_use = build_citations_user_message(
                     user_query=original_question,
                     files=[],

backend/onyx/chat/process_message.py

@@ -503,7 +503,8 @@ def stream_chat_message_objects(
             for fd in new_msg_req.current_message_files:
                 uid = fd.get("user_file_id")
                 if uid is not None:
-                    user_file_ids.append(uid)
+                    user_file_id = UUID(uid)
+                    user_file_ids.append(user_file_id)
 
         # Load in user files into memory and create search tool override kwargs if needed
         # if we have enough tokens, we don't need to use search

backend/onyx/file_store/models.py

@@ -1,7 +1,6 @@
 import base64
 from enum import Enum
 from typing import NotRequired
-from uuid import UUID
 from typing_extensions import TypedDict  # noreorder
 
 from pydantic import BaseModel
@@ -36,7 +35,7 @@ class FileDescriptor(TypedDict):
     id: str
     type: ChatFileType
     name: NotRequired[str | None]
-    user_file_id: NotRequired[UUID | None]
+    user_file_id: NotRequired[str | None]
 
 
 class InMemoryChatFile(BaseModel):
@@ -58,5 +57,5 @@ def to_file_descriptor(self) -> FileDescriptor:
             "id": str(self.file_id),
             "type": self.file_type,
             "name": self.filename,
-            "user_file_id": UUID(str(self.file_id)) if self.file_id else None,
+            "user_file_id": str(self.file_id) if self.file_id else None,
         }

web/src/app/chat/components/files/FilePicker.tsx

@@ -10,7 +10,8 @@ import {
 } from "@/components/ui/menubar";
 import { FileUploadIcon } from "@/components/icons/icons";
 import { Files } from "@phosphor-icons/react";
-import { FileIcon, Paperclip, Loader2, Eye } from "lucide-react";
+import { FileIcon, Paperclip, Loader2 } from "lucide-react";
+import { OpenInNewIcon } from "@/components/icons/CustomIcons";
 import { cn } from "@/lib/utils";
 import { ChatInputOption } from "../input/ChatInputOption";
 import FilesList from "./FilesList";
@@ -149,7 +150,10 @@ export default function FilePicker({
                               onFileClick && onFileClick(f);
                             }}
                           >
-                            <Eye className="h-4 w-4 text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200" />
+                            <OpenInNewIcon
+                              size={16}
+                              className="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
+                            />
                           </button>
                         )}
                     </div>
@@ -191,14 +195,14 @@ export default function FilePicker({
 
       <Dialog open={showRecentFiles} onOpenChange={setShowRecentFiles}>
         <DialogContent
-          className="w-full max-w-lg focus:outline-none focus-visible:outline-none"
+          className="w-full max-w-lg px-6 py-3 sm:px-6 sm:py-4 focus:outline-none focus-visible:outline-none"
           tabIndex={-1}
           onOpenAutoFocus={(e) => {
             // Prevent auto-focus which can interfere with input
             e.preventDefault();
           }}
         >
-          <DialogHeader>
+          <DialogHeader className="px-0 pt-0 pb-2">
             <Files size={32} />
             <DialogTitle>Recent Files</DialogTitle>
           </DialogHeader>

web/src/app/chat/components/files/FilesList.tsx

@@ -4,15 +4,15 @@ import React, { useMemo, useRef, useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import { Search, Loader2, Trash2, Eye } from "lucide-react";
+import { Search, Loader2, Trash2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ProjectFile } from "../../projects/ProjectsContext";
 import { formatRelativeTime } from "../projects/project_utils";
 import {
   FileUploadIcon,
   ImageIcon as ImageFileIcon,
 } from "@/components/icons/icons";
-import { DocumentIcon } from "@/components/icons/CustomIcons";
+import { DocumentIcon, OpenInNewIcon } from "@/components/icons/CustomIcons";
 
 interface FilesListProps {
   className?: string;
@@ -101,7 +101,7 @@ export default function FilesList({
 
   return (
     <div
-      className={cn("flex flex-col gap-3 focus:outline-none w-full", className)}
+      className={cn("flex flex-col gap-2 focus:outline-none w-full", className)}
       tabIndex={-1}
       onMouseDown={(e) => {
         // Prevent parent dialog from intercepting mouse events
@@ -169,7 +169,7 @@ export default function FilesList({
           maxHeight: "588px", // ~10.5 items * 56px per item
         }}
       >
-        <ScrollArea ref={scrollAreaRef} className="h-full pr-2">
+        <ScrollArea ref={scrollAreaRef} className="h-full pr-1">
           <div className="flex flex-col">
             {filtered.map((f) => (
               <button
@@ -245,7 +245,10 @@ export default function FilesList({
                           onFileClick && onFileClick(f);
                         }}
                       >
-                        <Eye className="h-4 w-4 text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200" />
+                        <OpenInNewIcon
+                          size={16}
+                          className="text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
+                        />
                       </button>
                     )}
                   {showRemove &&

web/src/components/icons/CustomIcons.tsx

@@ -153,3 +153,32 @@ export const DocumentIcon = React.forwardRef<SVGSVGElement, IconProps>(
 );
 
 DocumentIcon.displayName = "DocumentIcon";
+
+export const OpenInNewIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ size = 14, color = "currentColor", title, className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      width={size}
+      height={size}
+      fill="none"
+      role={title ? "img" : "presentation"}
+      aria-label={title}
+      className={className}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M11 7.66667V11.6667C11 12.0203 10.8595 12.3594 10.6095 12.6095C10.3594 12.8595 10.0203 13 9.66667 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V4.33333C1 3.97971 1.14048 3.64057 1.39052 3.39052C1.64057 3.14048 1.97971 3 2.33333 3H6.33333M9 1H13M13 1V5M13 1L5.66667 8.33333"
+        stroke={color}
+        strokeOpacity={1}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+);
+
+OpenInNewIcon.displayName = "OpenInNewIcon";