can't attach a
- * custom header, so an externally-referenced (non-inline) attachment needs an authenticated fetch
- * into a blob URL rather than a direct URL. Inline (base64 `val`) attachments skip this path entirely.
- */
-function useAuthedBlobUrl(ref: string | undefined): { url: string | null; loading: boolean; error: boolean } {
- const [state, setState] = useState<{ url: string | null; loading: boolean; error: boolean }>({ url: null, loading: !!ref, error: false });
-
- useEffect(() => {
- if (!ref) return undefined;
- let cancelled = false;
- let objectUrl: string | null = null;
- setState({ url: null, loading: true, error: false });
- fetch(fileDownloadUrl(ref), { headers: fileAuthHeaders() })
- .then((res) => {
- if (!res.ok) throw new Error('download failed');
- return res.blob();
- })
- .then((blob) => {
- if (cancelled) return;
- objectUrl = URL.createObjectURL(blob);
- setState({ url: objectUrl, loading: false, error: false });
- })
- .catch(() => {
- if (!cancelled) setState({ url: null, loading: false, error: true });
- });
- return () => {
- cancelled = true;
- if (objectUrl) URL.revokeObjectURL(objectUrl);
- };
- }, [ref]);
-
- return state;
-}
-
interface ImageData {
val?: string;
ref?: string;
@@ -60,7 +24,8 @@ export function ImageAttachment({ data }: { data: ImageData }) {
);
}
- return 
;
+ // README §3.2: fixed 260x170, not a same-aspect-ratio-preserving max-height/width box.
+ return ;
}
interface FileData {
diff --git a/web/src/features/messages/HistorySearchModal.tsx b/web/src/features/messages/HistorySearchModal.tsx
index 76b9b56d..77a44549 100644
--- a/web/src/features/messages/HistorySearchModal.tsx
+++ b/web/src/features/messages/HistorySearchModal.tsx
@@ -1,11 +1,12 @@
import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
import { Icon } from '@/app/Icon';
-import { getTopicMedia, searchTopicMessages, type MediaType, type SearchFileHit, type SearchTextHit } from '@/lib/api/messages';
-import { useDebouncedValue } from '@/lib/hooks';
-import { formatFileSize } from '@/lib/messages/attachments';
+import { getTopicMedia, searchTopicMessages, type MediaFetchType, type MediaItem, type MediaType, type SearchHit } from '@/lib/api/messages';
+import { checkUrlSafety } from '@/lib/api/security';
+import { useAuthedBlobUrl, useDebouncedValue } from '@/lib/hooks';
+import { renderDrafty } from '@/lib/messages/drafty';
import { formatEventTimestamp } from '@/lib/messages/time';
type Tab = 'text' | MediaType;
@@ -18,8 +19,104 @@ const TABS: { key: Tab; label: string; icon: string }[] = [
{ key: 'link', label: '链接', icon: 'link' },
];
-function isFileHit(item: SearchTextHit | SearchFileHit): item is SearchFileHit {
- return 'file' in item;
+function formatDuration(ms: number | undefined): string {
+ const totalSeconds = Math.round((ms || 0) / 1000);
+ return `${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, '0')}`;
+}
+
+/** README §3.4 grid thumbnails -- same inline-vs-authenticated-fetch duality as AttachmentPreview's
+ * ImageAttachment (a grid cell needs its own aspect-square crop, so this doesn't reuse that
+ * component directly, but reads the same `ent[0].data.{val,ref}` shape). */
+function MediaThumb({ item, isVideo }: { item: MediaItem; isVideo: boolean }) {
+ const data = item.ent?.[0]?.data;
+ const inline = typeof data?.val === 'string' ? `data:${data.mime || 'image/jpeg'};base64,${data.val}` : null;
+ const remote = useAuthedBlobUrl(inline ? undefined : data?.ref);
+ const src = inline || remote.url;
+
+ return (
+
+ {src ? (
+
+ ) : (
+
+
+
+ )}
+ {isVideo && src ? (
+
+
+ {data?.duration ? (
+ {formatDuration(data.duration)}
+ ) : null}
+
+ ) : null}
+
+ {renderDrafty({
+ txt: content.txt || ' ',
+ fmt: (content.fmt as { at?: number; len?: number; tp?: string; key?: number }[] | undefined) || [{ at: -1 }],
+ ent: (content.ent || []).map((e) => ({ tp: e.tp || '', data: (e.data || {}) as Record })),
+ })}
+
+ );
+}
+
+/**
+ * docs/IM-前后端对接文档.md:1822,1898 -- links found in chat history must pass a server-side risk
+ * check before opening (the server fetches/classifies the URL out-of-band; the client never probes
+ * it directly). `warn` still lets the user proceed after an explicit confirm; `block` does not.
+ * This only guards the enrichment shape (`item.url` etc, per docs) -- if a hit doesn't carry that
+ * (unconfirmed live, see SearchHit's doc comment), it falls back to the plain snapshot rendering,
+ * whose inline links aren't gated here (same as any other chat-bubble link).
+ */
+function LinkResult({ item }: { item: SearchHit & { url?: string; title?: string; summary?: string } }) {
+ const safetyCheck = useMutation({ mutationFn: (url: string) => checkUrlSafety(url, 'history_search') });
+
+ if (!item.url) return ;
+
+ const open = async () => {
+ let result;
+ try {
+ result = await safetyCheck.mutateAsync(item.url!);
+ } catch {
+ window.alert('链接安全检查失败，请稍后重试。');
+ return;
+ }
+ if (result.decision === 'block') {
+ window.alert('该链接存在安全风险，已被拦截。');
+ return;
+ }
+ if (result.decision === 'warn' && !window.confirm('该链接可能存在风险，是否仍要打开？')) return;
+ window.open(item.url, '_blank', 'noopener,noreferrer');
+ };
+
+ return (
+
+
{formatEventTimestamp(new Date(item.ts))}
+ {item.title ?
{item.title}
: null}
+
+ {item.summary ?
{item.summary}
: null}
+
{formatEventTimestamp(new Date(item.ts))}
-
- {isFileHit(item) ? `[文件] ${item.file.name} · ${formatFileSize(item.file.size)}` : item.snippet}
+
+
))}
@@ -109,22 +212,34 @@ export function HistorySearchModal({ topicId, initialTab = 'text', onClose }: Hi
)}
{mediaQuery.isLoading ? (
加载中…
) : !mediaQuery.data?.items.length ? (
暂无内容
) : (
-
+
{mediaQuery.data.items.map((item) => (
-
- t.key === tab)?.icon || 'description'} className="text-[28px] text-text-tertiary-3" />
-
+
))}
)}
+ ) : (
+
+ {fileLinkQuery.isLoading ? (
+
加载中…
+ ) : !fileLinkQuery.data?.items.length ? (
+
暂无内容
+ ) : (
+
+ {fileLinkQuery.data.items.map((item) =>
+ tab === 'link' ? : ,
+ )}
+
+ )}
+
)}
or can't attach a
+ * custom header, so an externally-referenced (non-inline) attachment needs an authenticated fetch
+ * into a blob URL rather than a direct URL. `ref` is anything fileDownloadUrl accepts: a full
+ * "/v0/file/s/xxx" path (Drafty `refurl`), or an absolute URL.
+ */
+export function useAuthedBlobUrl(ref: string | undefined): { url: string | null; loading: boolean; error: boolean } {
+ const [state, setState] = useState<{ url: string | null; loading: boolean; error: boolean }>({ url: null, loading: !!ref, error: false });
+
+ useEffect(() => {
+ if (!ref) return undefined;
+ let cancelled = false;
+ let objectUrl: string | null = null;
+ setState({ url: null, loading: true, error: false });
+ fetch(fileDownloadUrl(ref), { headers: fileAuthHeaders() })
+ .then((res) => {
+ if (!res.ok) throw new Error('download failed');
+ return res.blob();
+ })
+ .then((blob) => {
+ if (cancelled) return;
+ objectUrl = URL.createObjectURL(blob);
+ setState({ url: objectUrl, loading: false, error: false });
+ })
+ .catch(() => {
+ if (!cancelled) setState({ url: null, loading: false, error: true });
+ });
+ return () => {
+ cancelled = true;
+ if (objectUrl) URL.revokeObjectURL(objectUrl);
+ };
+ }, [ref]);
+
+ return state;
+}
+
/** Ported from the old app's use-cached-data.js -- debounces a fast-changing value (e.g. search input). */
export function useDebouncedValue(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);