Merge remote-tracking branch 'upstream/dev' into feat/replace-logs

surfsense_web/components/assistant-ui/thread.tsx

@@ -19,9 +19,7 @@ import {
 	ChevronRightIcon,
 	CopyIcon,
 	DownloadIcon,
-	FileText,
 	Loader2,
-	PencilIcon,
 	RefreshCwIcon,
 	SquareIcon,
 } from "lucide-react";
@@ -31,7 +29,6 @@ import { createPortal } from "react-dom";
 import {
 	mentionedDocumentIdsAtom,
 	mentionedDocumentsAtom,
-	messageDocumentsMapAtom,
 } from "@/atoms/chat/mentioned-documents.atom";
 import {
 	globalNewLLMConfigsAtom,
@@ -42,8 +39,8 @@ import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import {
 	ComposerAddAttachment,
 	ComposerAttachments,
-	UserMessageAttachments,
 } from "@/components/assistant-ui/attachment";
+import { UserMessage } from "@/components/assistant-ui/user-message";
 import { ConnectorIndicator } from "@/components/assistant-ui/connector-popup";
 import {
 	InlineMentionEditor,
@@ -639,69 +636,6 @@ const AssistantActionBar: FC = () => {
 	);
 };
 
-const UserMessage: FC = () => {
-	const messageId = useAssistantState(({ message }) => message?.id);
-	const messageDocumentsMap = useAtomValue(messageDocumentsMapAtom);
-	const mentionedDocs = messageId ? messageDocumentsMap[messageId] : undefined;
-	const hasAttachments = useAssistantState(
-		({ message }) => message?.attachments && message.attachments.length > 0
-	);
-
-	return (
-		<MessagePrimitive.Root
-			className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
-			data-role="user"
-		>
-			<div className="aui-user-message-content-wrapper col-start-2 min-w-0">
-				{/* Display attachments and mentioned documents */}
-				{(hasAttachments || (mentionedDocs && mentionedDocs.length > 0)) && (
-					<div className="flex flex-wrap items-end gap-2 mb-2 justify-end">
-						{/* Attachments (images show as thumbnails, documents as chips) */}
-						<UserMessageAttachments />
-						{/* Mentioned documents as chips */}
-						{mentionedDocs?.map((doc) => (
-							<span
-								key={`${doc.document_type}:${doc.id}`}
-								className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium text-primary border border-primary/20"
-								title={doc.title}
-							>
-								<FileText className="size-3" />
-								<span className="max-w-[150px] truncate">{doc.title}</span>
-							</span>
-						))}
-					</div>
-				)}
-				{/* Message bubble with action bar positioned relative to it */}
-				<div className="relative">
-					<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
-						<MessagePrimitive.Parts />
-					</div>
-					<div className="aui-user-action-bar-wrapper absolute top-1/2 right-full -translate-y-1/2 pr-1">
-						<UserActionBar />
-					</div>
-				</div>
-			</div>
-
-			<BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />
-		</MessagePrimitive.Root>
-	);
-};
-
-const UserActionBar: FC = () => {
-	return (
-		<ActionBarPrimitive.Root
-			hideWhenRunning
-			autohide="not-last"
-			className="aui-user-action-bar-root flex flex-col items-end"
-		>
-			<ActionBarPrimitive.Edit asChild>
-				<TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
-					<PencilIcon />
-				</TooltipIconButton>
-			</ActionBarPrimitive.Edit>
-		</ActionBarPrimitive.Root>
-	);
-};
 
 const EditComposer: FC = () => {
 	return (

surfsense_web/components/assistant-ui/user-message.tsx

@@ -1,16 +1,54 @@
 import { ActionBarPrimitive, MessagePrimitive, useAssistantState } from "@assistant-ui/react";
 import { useAtomValue } from "jotai";
 import { FileText, PencilIcon } from "lucide-react";
-import type { FC } from "react";
+import { type FC, useState } from "react";
 import { messageDocumentsMapAtom } from "@/atoms/chat/mentioned-documents.atom";
 import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
 import { BranchPicker } from "@/components/assistant-ui/branch-picker";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 
+interface AuthorMetadata {
+	displayName: string | null;
+	avatarUrl: string | null;
+}
+
+const UserAvatar: FC<AuthorMetadata> = ({ displayName, avatarUrl }) => {
+	const [hasError, setHasError] = useState(false);
+
+	const initials = displayName
+		? displayName
+				.split(" ")
+				.map((n) => n[0])
+				.join("")
+				.toUpperCase()
+				.slice(0, 2)
+		: "U";
+
+	if (avatarUrl && !hasError) {
+		return (
+			<img
+				src={avatarUrl}
+				alt={displayName || "User"}
+				className="size-8 rounded-full object-cover"
+				referrerPolicy="no-referrer"
+				onError={() => setHasError(true)}
+			/>
+		);
+	}
+
+	return (
+		<div className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+			{initials}
+		</div>
+	);
+};
+
 export const UserMessage: FC = () => {
 	const messageId = useAssistantState(({ message }) => message?.id);
 	const messageDocumentsMap = useAtomValue(messageDocumentsMapAtom);
 	const mentionedDocs = messageId ? messageDocumentsMap[messageId] : undefined;
+	const metadata = useAssistantState(({ message }) => message?.metadata);
+	const author = metadata?.custom?.author as AuthorMetadata | undefined;
 	const hasAttachments = useAssistantState(
 		({ message }) => message?.attachments && message.attachments.length > 0
 	);
@@ -20,34 +58,42 @@ export const UserMessage: FC = () => {
 			className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
 			data-role="user"
 		>
-			<div className="aui-user-message-content-wrapper col-start-2 min-w-0">
-				{/* Display attachments and mentioned documents */}
-				{(hasAttachments || (mentionedDocs && mentionedDocs.length > 0)) && (
-					<div className="flex flex-wrap items-end gap-2 mb-2 justify-end">
-						{/* Attachments (images show as thumbnails, documents as chips) */}
-						<UserMessageAttachments />
-						{/* Mentioned documents as chips */}
-						{mentionedDocs?.map((doc) => (
-							<span
-								key={`${doc.document_type}:${doc.id}`}
-								className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium text-primary border border-primary/20"
-								title={doc.title}
-							>
-								<FileText className="size-3" />
-								<span className="max-w-[150px] truncate">{doc.title}</span>
-							</span>
-						))}
-					</div>
-				)}
-				{/* Message bubble with action bar positioned relative to it */}
-				<div className="relative">
-					<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
-						<MessagePrimitive.Parts />
-					</div>
-					<div className="aui-user-action-bar-wrapper absolute top-1/2 right-full -translate-y-1/2 pr-1">
-						<UserActionBar />
+			<div className="aui-user-message-content-wrapper col-start-2 min-w-0 flex items-end gap-2">
+				<div className="flex-1 min-w-0">
+					{/* Display attachments and mentioned documents */}
+					{(hasAttachments || (mentionedDocs && mentionedDocs.length > 0)) && (
+						<div className="flex flex-wrap items-end gap-2 mb-2 justify-end">
+							{/* Attachments (images show as thumbnails, documents as chips) */}
+							<UserMessageAttachments />
+							{/* Mentioned documents as chips */}
+							{mentionedDocs?.map((doc) => (
+								<span
+									key={`${doc.document_type}:${doc.id}`}
+									className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-xs font-medium text-primary border border-primary/20"
+									title={doc.title}
+								>
+									<FileText className="size-3" />
+									<span className="max-w-[150px] truncate">{doc.title}</span>
+								</span>
+							))}
+						</div>
+					)}
+					{/* Message bubble with action bar positioned relative to it */}
+					<div className="relative">
+						<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+							<MessagePrimitive.Parts />
+						</div>
+						<div className="aui-user-action-bar-wrapper absolute top-1/2 right-full -translate-y-1/2 pr-1">
+							<UserActionBar />
+						</div>
 					</div>
 				</div>
+				{/* User avatar - only shown in shared chats */}
+				{author && (
+					<div className="shrink-0">
+						<UserAvatar displayName={author.displayName} avatarUrl={author.avatarUrl} />
+					</div>
+				)}
 			</div>
 
 			<BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -354,7 +354,11 @@ export function LayoutDataProvider({
 				onChatDelete={handleChatDelete}
 				onViewAllSharedChats={handleViewAllSharedChats}
 				onViewAllPrivateChats={handleViewAllPrivateChats}
-				user={{ email: user?.email || "", name: user?.email?.split("@")[0] }}
+				user={{
+					email: user?.email || "",
+					name: user?.display_name || user?.email?.split("@")[0],
+					avatarUrl: user?.avatar_url || undefined,
+				}}
 				onSettings={handleSettings}
 				onManageMembers={handleManageMembers}
 				onUserSettings={handleUserSettings}

surfsense_web/components/layout/types/layout.types.ts

@@ -12,6 +12,7 @@ export interface SearchSpace {
 export interface User {
 	email: string;
 	name?: string;
+	avatarUrl?: string;
 }
 
 export interface NavItem {

surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx

@@ -61,6 +61,39 @@ function getInitials(email: string): string {
 	return name.slice(0, 2).toUpperCase();
 }
 
+/**
+ * User avatar component - shows image if available, otherwise falls back to initials
+ */
+function UserAvatar({
+	avatarUrl,
+	initials,
+	bgColor,
+}: {
+	avatarUrl?: string;
+	initials: string;
+	bgColor: string;
+}) {
+	if (avatarUrl) {
+		return (
+			<img
+				src={avatarUrl}
+				alt="User avatar"
+				className="h-8 w-8 shrink-0 rounded-lg object-cover"
+				referrerPolicy="no-referrer"
+			/>
+		);
+	}
+
+	return (
+		<div
+			className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
+			style={{ backgroundColor: bgColor }}
+		>
+			{initials}
+		</div>
+	);
+}
+
 export function SidebarUserProfile({
 	user,
 	onUserSettings,
@@ -88,12 +121,7 @@ export function SidebarUserProfile({
 										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 									)}
 								>
-									<div
-										className="flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold text-white"
-										style={{ backgroundColor: bgColor }}
-									>
-										{initials}
-									</div>
+									<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 									<span className="sr-only">{displayName}</span>
 								</button>
 							</DropdownMenuTrigger>
@@ -104,12 +132,7 @@ export function SidebarUserProfile({
 					<DropdownMenuContent className="w-56" side="right" align="end" sideOffset={8}>
 						<DropdownMenuLabel className="font-normal">
 							<div className="flex items-center gap-2">
-								<div
-									className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-									style={{ backgroundColor: bgColor }}
-								>
-									{initials}
-								</div>
+								<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 								<div className="flex-1 min-w-0">
 									<p className="truncate text-sm font-medium">{displayName}</p>
 									<p className="truncate text-xs text-muted-foreground">{user.email}</p>
@@ -149,13 +172,7 @@ export function SidebarUserProfile({
 							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
 						)}
 					>
-						{/* Avatar */}
-						<div
-							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-							style={{ backgroundColor: bgColor }}
-						>
-							{initials}
-						</div>
+						<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 
 						{/* Name and email */}
 						<div className="flex-1 min-w-0">
@@ -171,12 +188,7 @@ export function SidebarUserProfile({
 				<DropdownMenuContent className="w-56" side="top" align="start" sideOffset={4}>
 					<DropdownMenuLabel className="font-normal">
 						<div className="flex items-center gap-2">
-							<div
-								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
-								style={{ backgroundColor: bgColor }}
-							>
-								{initials}
-							</div>
+							<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
 							<div className="flex-1 min-w-0">
 								<p className="truncate text-sm font-medium">{displayName}</p>
 								<p className="truncate text-xs text-muted-foreground">{user.email}</p>

surfsense_web/components/new-chat/document-mention-picker.tsx

@@ -215,6 +215,16 @@ export const DocumentMentionPicker = forwardRef<
 			isSurfsenseDocsLoading) &&
 		currentPage === 0;
 
+	// Split documents into SurfSense docs and user docs for grouped rendering
+	const surfsenseDocsList = useMemo(
+		() => actualDocuments.filter((doc) => doc.document_type === "SURFSENSE_DOCS"),
+		[actualDocuments]
+	);
+	const userDocsList = useMemo(
+		() => actualDocuments.filter((doc) => doc.document_type !== "SURFSENSE_DOCS"),
+		[actualDocuments]
+	);
+
 	// Track already selected documents using unique key (document_type:id) to avoid ID collisions
 	const selectedKeys = useMemo(
 		() => new Set(initialSelectedDocuments.map((d) => `${d.document_type}:${d.id}`)),
@@ -324,47 +334,102 @@ export const DocumentMentionPicker = forwardRef<
 					</div>
 				) : (
 					<div className="py-1">
-						{actualDocuments.map((doc) => {
-							const docKey = `${doc.document_type}:${doc.id}`;
-							const isAlreadySelected = selectedKeys.has(docKey);
-							const selectableIndex = selectableDocuments.findIndex(
-								(d) => d.document_type === doc.document_type && d.id === doc.id
-							);
-							const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+						{/* SurfSense Documentation Section */}
+						{surfsenseDocsList.length > 0 && (
+							<>
+								<div className="sticky top-0 z-10 px-3 py-2 text-xs font-bold uppercase tracking-wider bg-muted text-foreground/80 border-b border-border">
+									SurfSense Docs
+								</div>
+								{surfsenseDocsList.map((doc) => {
+									const docKey = `${doc.document_type}:${doc.id}`;
+									const isAlreadySelected = selectedKeys.has(docKey);
+									const selectableIndex = selectableDocuments.findIndex(
+										(d) => d.document_type === doc.document_type && d.id === doc.id
+									);
+									const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+
+									return (
+										<button
+											key={docKey}
+											ref={(el) => {
+												if (el && selectableIndex >= 0) {
+													itemRefs.current.set(selectableIndex, el);
+												}
+											}}
+											type="button"
+											onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
+											onMouseEnter={() => {
+												if (!isAlreadySelected && selectableIndex >= 0) {
+													setHighlightedIndex(selectableIndex);
+												}
+											}}
+											disabled={isAlreadySelected}
+											className={cn(
+												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
+												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+												isHighlighted && "bg-accent"
+											)}
+										>
+											<span className="shrink-0 text-muted-foreground text-sm">
+												{getConnectorIcon(doc.document_type)}
+											</span>
+											<span className="flex-1 text-sm truncate" title={doc.title}>
+												{doc.title}
+											</span>
+										</button>
+									);
+								})}
+							</>
+						)}
+
+						{/* User Documents Section */}
+						{userDocsList.length > 0 && (
+							<>
+								<div className="sticky top-0 z-10 px-3 py-2 text-xs font-bold uppercase tracking-wider bg-muted text-foreground/80 border-b border-border">
+									Your Documents
+								</div>
+								{userDocsList.map((doc) => {
+									const docKey = `${doc.document_type}:${doc.id}`;
+									const isAlreadySelected = selectedKeys.has(docKey);
+									const selectableIndex = selectableDocuments.findIndex(
+										(d) => d.document_type === doc.document_type && d.id === doc.id
+									);
+									const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
+
+									return (
+										<button
+											key={docKey}
+											ref={(el) => {
+												if (el && selectableIndex >= 0) {
+													itemRefs.current.set(selectableIndex, el);
+												}
+											}}
+											type="button"
+											onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
+											onMouseEnter={() => {
+												if (!isAlreadySelected && selectableIndex >= 0) {
+													setHighlightedIndex(selectableIndex);
+												}
+											}}
+											disabled={isAlreadySelected}
+											className={cn(
+												"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
+												isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+												isHighlighted && "bg-accent"
+											)}
+										>
+											<span className="shrink-0 text-muted-foreground text-sm">
+												{getConnectorIcon(doc.document_type)}
+											</span>
+											<span className="flex-1 text-sm truncate" title={doc.title}>
+												{doc.title}
+											</span>
+										</button>
+									);
+								})}
+							</>
+						)}
 
-							return (
-								<button
-									key={docKey}
-									ref={(el) => {
-										if (el && selectableIndex >= 0) {
-											itemRefs.current.set(selectableIndex, el);
-										}
-									}}
-									type="button"
-									onClick={() => !isAlreadySelected && handleSelectDocument(doc)}
-									onMouseEnter={() => {
-										if (!isAlreadySelected && selectableIndex >= 0) {
-											setHighlightedIndex(selectableIndex);
-										}
-									}}
-									disabled={isAlreadySelected}
-									className={cn(
-										"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors",
-										isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-										isHighlighted && "bg-accent"
-									)}
-								>
-									{/* Type icon */}
-									<span className="flex-shrink-0 text-muted-foreground text-sm">
-										{getConnectorIcon(doc.document_type)}
-									</span>
-									{/* Title */}
-									<span className="flex-1 text-sm truncate" title={doc.title}>
-										{doc.title}
-									</span>
-								</button>
-							);
-						})}
 						{/* Loading indicator for additional pages */}
 						{isLoadingMore && (
 							<div className="flex items-center justify-center py-2">