Merge remote-tracking branch 'upstream/dev' into fix/onboarding

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

@@ -35,6 +35,7 @@ import {
 	useAllCitationMetadata,
 } from "@/components/assistant-ui/citation-metadata-context";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { MessageTimestamp } from "@/components/assistant-ui/message-timestamp";
 import { ReasoningMessagePart } from "@/components/assistant-ui/reasoning-message-part";
 import { RevertTurnButton } from "@/components/assistant-ui/revert-turn-button";
 import {
@@ -62,6 +63,7 @@ import { withArtifactAnchor } from "@/features/chat-artifacts";
 import { useComments } from "@/hooks/use-comments";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { useElectronAPI } from "@/hooks/use-platform";
+import { formatMessageTimestamp } from "@/lib/format-date";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { tryGetHostname } from "@/lib/url";
 import { cn } from "@/lib/utils";
@@ -249,16 +251,6 @@ export const MessageError: FC = () => {
 	);
 };
 
-function formatMessageDate(date: Date): string {
-	return date.toLocaleDateString(undefined, {
-		month: "short",
-		day: "numeric",
-		hour: "numeric",
-		minute: "2-digit",
-		hour12: true,
-	});
-}
-
 /**
  * Format provider USD cost (in micro-USD) for inline display next to a
  * token count. Falls back to ``"<$0.001"`` for sub-tenth-of-a-cent
@@ -367,7 +359,7 @@ const MessageInfoDropdown: FC<{ chatTurnId: string | null | undefined }> = ({ ch
 			>
 				{createdAt && (
 					<DropdownMenuLabel className="text-xs text-muted-foreground font-normal select-none">
-						{formatMessageDate(createdAt)}
+						{formatMessageTimestamp(createdAt)}
 					</DropdownMenuLabel>
 				)}
 				{hasUsage && (
@@ -463,6 +455,8 @@ const AssistantMessageInner: FC = () => {
 				<MessageError />
 			</div>
 
+			<MessageTimestamp className="ml-2 mt-2" />
+
 			{isMobile && (
 				<div className="ml-2 mt-2">
 					<MobileCitationDrawer />

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

@@ -0,0 +1,24 @@
+import { useAuiState } from "@assistant-ui/react";
+import { useAtomValue } from "jotai";
+import type { FC } from "react";
+import { showMessageTimestampsAtom } from "@/atoms/chat/show-timestamps.atom";
+import { formatMessageTimestamp } from "@/lib/format-date";
+import { cn } from "@/lib/utils";
+
+/**
+ * Muted, always-visible timestamp under a chat message. Renders only when the
+ * user has opted in via {@link showMessageTimestampsAtom} and the message
+ * carries a ``createdAt`` (absent on optimistic pre-persist messages).
+ */
+export const MessageTimestamp: FC<{ className?: string }> = ({ className }) => {
+	const show = useAtomValue(showMessageTimestampsAtom);
+	const createdAt = useAuiState(({ message }) => message?.createdAt);
+
+	if (!show || !createdAt) return null;
+
+	return (
+		<div className={cn("select-none text-[11px] text-muted-foreground", className)}>
+			{formatMessageTimestamp(createdAt)}
+		</div>
+	);
+};

surfsense_web/components/assistant-ui/thread.tsx

@@ -1070,10 +1070,7 @@ const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) =>
 					return (
 						<Tooltip key={platform.id}>
 							<TooltipTrigger asChild>
-								<Avatar
-									className="size-5"
-									style={{ zIndex: platforms.length - i }}
-								>
+								<Avatar className="size-5" style={{ zIndex: platforms.length - i }}>
 									<AvatarFallback className="bg-popover text-[10px]">
 										<Icon className="size-3" />
 									</AvatarFallback>

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

@@ -22,6 +22,7 @@ import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { messageDocumentsMapAtom } from "@/atoms/chat/mentioned-documents.atom";
 import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { MentionChip } from "@/components/assistant-ui/mention-chip";
+import { MessageTimestamp } from "@/components/assistant-ui/message-timestamp";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
@@ -182,6 +183,7 @@ export const UserMessage: FC = () => {
 						</div>
 					)}
 				</div>
+				<MessageTimestamp className="mt-1 pl-1" />
 			</div>
 		</MessagePrimitive.Root>
 	);