mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-14 13:25:20 +00:00
modified: src/lib/components/layout/ImportChatsModal.svelte
This commit is contained in:
xinyan
parent
631f18b6c8
commit
5538cc1953
1 changed files with 158 additions and 199 deletions
|
|
@ -2,8 +2,6 @@
|
|||
import { toast } from 'svelte-sonner';
|
||||
import Modal from '../common/Modal.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
import { extractChatsFromFile } from '$lib/utils/chatImport';
|
||||
import { getImportOrigin, convertOpenAIChats, convertDeepseekChats } from '$lib/utils';
|
||||
|
||||
export let show = false;
|
||||
export let onImport: (chats: any[]) => Promise<void>;
|
||||
|
|
@ -15,9 +13,15 @@
|
|||
let errorMsg = '';
|
||||
let successMsg = '';
|
||||
let fileName = '';
|
||||
|
||||
// 对应 HTML 版本中的 rawData
|
||||
let rawChats: any[] = [];
|
||||
// 对应 HTML 版本中的 selectedIndices
|
||||
let selectedIndices: Set<number> = new Set();
|
||||
|
||||
let fileInputEl: HTMLInputElement;
|
||||
|
||||
// 重置状态
|
||||
const resetState = () => {
|
||||
errorMsg = '';
|
||||
successMsg = '';
|
||||
|
|
@ -25,93 +29,64 @@
|
|||
rawChats = [];
|
||||
selectedIndices = new Set();
|
||||
filterOpen = true;
|
||||
if (fileInputEl) fileInputEl.value = '';
|
||||
};
|
||||
|
||||
$: if (!show) {
|
||||
resetState();
|
||||
}
|
||||
|
||||
const parseJsonOrJsonlText = async (file: File) => {
|
||||
const text = await file.text();
|
||||
try {
|
||||
const parsed = JSON.parse(text);
|
||||
return Array.isArray(parsed) ? parsed : [parsed];
|
||||
} catch (jsonError) {
|
||||
const lines = text
|
||||
.split('\n')
|
||||
.map((l) => l.trim())
|
||||
.filter((l) => l.length > 0);
|
||||
|
||||
if (lines.length === 0) {
|
||||
throw new Error('File is empty, nothing to parse');
|
||||
}
|
||||
|
||||
try {
|
||||
return lines.map((line) => JSON.parse(line));
|
||||
} catch (lineError) {
|
||||
throw new Error('Plain text JSONL must contain one valid JSON object per line');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const normalizeChats = (chats: any) => {
|
||||
if (Array.isArray(chats)) return chats;
|
||||
|
||||
if (chats && typeof chats === 'object') {
|
||||
if (Array.isArray((chats as any).conversations)) {
|
||||
return (chats as any).conversations;
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('File content must be a JSON array of chats');
|
||||
};
|
||||
|
||||
// 核心逻辑：读取并解析 JSON 数组
|
||||
const handleFiles = async (files: FileList | File[]) => {
|
||||
if (!files || files.length === 0) return;
|
||||
const file = files[0];
|
||||
|
||||
loading = true;
|
||||
errorMsg = '';
|
||||
successMsg = '';
|
||||
fileName = file.name;
|
||||
rawChats = [];
|
||||
selectedIndices = new Set();
|
||||
|
||||
try {
|
||||
const ext = file.name.split('.').pop()?.toLowerCase();
|
||||
let chats: any = null;
|
||||
const text = await file.text();
|
||||
let parsed: any;
|
||||
|
||||
if (ext === 'txt' || ext === 'jsonl') {
|
||||
chats = await parseJsonOrJsonlText(file);
|
||||
} else {
|
||||
chats = await extractChatsFromFile(file);
|
||||
try {
|
||||
parsed = JSON.parse(text);
|
||||
} catch (e) {
|
||||
throw new Error('JSON 解析失败，请检查文件格式');
|
||||
}
|
||||
|
||||
chats = normalizeChats(chats);
|
||||
|
||||
if (chats.length === 0) {
|
||||
throw new Error('File contained zero chat records');
|
||||
// 校验格式：必须是数组 [{}, {}]
|
||||
if (!Array.isArray(parsed)) {
|
||||
throw new Error('文件格式错误：JSON 根节点必须是数组 `[...]`');
|
||||
}
|
||||
|
||||
const origin = getImportOrigin(chats);
|
||||
|
||||
if (origin === 'openai') {
|
||||
chats = convertOpenAIChats(chats);
|
||||
} else if (origin === 'deepseek') {
|
||||
chats = convertDeepseekChats(chats);
|
||||
if (parsed.length === 0) {
|
||||
throw new Error('JSON 数组为空');
|
||||
}
|
||||
|
||||
rawChats = chats;
|
||||
selectedIndices = new Set(rawChats.map((_, idx) => idx));
|
||||
rawChats = parsed;
|
||||
successMsg = `解析成功，共 ${rawChats.length} 条记录`;
|
||||
|
||||
// 默认不全选，或者全选，取决于你的偏好。这里保持原有逻辑（不选或全选）
|
||||
// 这里改为：解析后默认显示列表，但不选中（等待用户操作），或者全选
|
||||
// 之前的 HTML 逻辑是空的，这里为了方便用户，可以默认不选，或者全选。
|
||||
// 让我们默认不选，让用户决定。
|
||||
selectedIndices = new Set();
|
||||
filterOpen = true;
|
||||
successMsg = '解析成功';
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorMsg = error instanceof Error ? error.message : `${error}`;
|
||||
successMsg = '';
|
||||
rawChats = [];
|
||||
selectedIndices = new Set();
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 行选择切换
|
||||
const toggleRow = (idx: number) => {
|
||||
const next = new Set(selectedIndices);
|
||||
if (next.has(idx)) {
|
||||
|
|
@ -122,39 +97,48 @@
|
|||
selectedIndices = next;
|
||||
};
|
||||
|
||||
// 全选/取消全选
|
||||
const toggleSelectAll = (checked: boolean) => {
|
||||
selectedIndices = checked ? new Set(rawChats.map((_, idx) => idx)) : new Set();
|
||||
};
|
||||
|
||||
// 导出并导入 (Export & Import)
|
||||
const confirmImport = async () => {
|
||||
if (!rawChats.length) {
|
||||
toast.error('Please upload a chat history file first');
|
||||
toast.error('请先上传文件');
|
||||
return;
|
||||
}
|
||||
const chatsToImport =
|
||||
selectedIndices.size > 0 ? rawChats.filter((_, idx) => selectedIndices.has(idx)) : rawChats;
|
||||
|
||||
if (!chatsToImport.length) {
|
||||
toast.error('No records selected');
|
||||
if (selectedIndices.size === 0) {
|
||||
toast.error('未选择任何记录');
|
||||
return;
|
||||
}
|
||||
|
||||
// 筛选数据
|
||||
const chatsToImport = rawChats.filter((_, idx) => selectedIndices.has(idx));
|
||||
|
||||
try {
|
||||
importing = true;
|
||||
const jsonlString = chatsToImport.map((item) => JSON.stringify(item)).join('\n');
|
||||
const blob = new Blob([jsonlString], { type: 'application/json' });
|
||||
|
||||
// 1. 生成并下载 JSON 文件 (对应 HTML 工具的导出功能)
|
||||
// 使用 null, 2 进行美化输出
|
||||
const jsonString = JSON.stringify(chatsToImport, null, 2);
|
||||
const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `filtered_chats_${new Date().toISOString().slice(0, 10)}.jsonl`;
|
||||
a.download = `filtered_chats_${new Date().toISOString().slice(0, 10)}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
toast.success(`已导出 ${chatsToImport.length} 条记录`);
|
||||
|
||||
// 2. 执行回调，将数据导入应用
|
||||
await onImport(chatsToImport);
|
||||
show = false;
|
||||
toast.success('Starting import for the filtered chats');
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
toast.error(error instanceof Error ? error.message : `${error}`);
|
||||
|
|
@ -163,29 +147,15 @@
|
|||
}
|
||||
};
|
||||
|
||||
// 辅助显示函数 (对应 HTML 中的 renderTable)
|
||||
const displayRows = () =>
|
||||
rawChats.map((chat, idx) => {
|
||||
const meta = chat?.meta ?? chat?.chat?.meta ?? chat;
|
||||
const title =
|
||||
meta?.title ??
|
||||
chat?.title ??
|
||||
chat?.chat?.title ??
|
||||
meta?.subject ??
|
||||
'Untitled chat';
|
||||
const date =
|
||||
meta?.inserted_at ??
|
||||
meta?.created_at ??
|
||||
meta?.updated_at ??
|
||||
chat?.inserted_at ??
|
||||
chat?.created_at ??
|
||||
chat?.updated_at ??
|
||||
'-';
|
||||
|
||||
// 宽容处理字段
|
||||
const title = chat.title || '<无标题>';
|
||||
const date = chat.inserted_at || '-';
|
||||
return { idx, title, date };
|
||||
});
|
||||
|
||||
let fileInputEl: HTMLInputElement;
|
||||
|
||||
const handleFileInputChange = (event: Event) => {
|
||||
const input = event.currentTarget as HTMLInputElement;
|
||||
handleFiles(input.files ?? []);
|
||||
|
|
@ -201,42 +171,27 @@
|
|||
<div class="p-6 space-y-6 font-primary">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white">Chat Import Center</div>
|
||||
<div class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.6)]"></span>
|
||||
Chat Filter & Import
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Upload your exported history, filter the records you need, then import.
|
||||
导入 JSON 数组，筛选所需的聊天记录，自动下载并导入。
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||
on:click={() => (show = false)}
|
||||
aria-label="Close import modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/60 p-4">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">1. Prepare file</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed space-y-1">
|
||||
<p>
|
||||
Supported formats: <strong>JSON (.json)</strong>, <strong>JSONL (.jsonl/.txt)</strong>, or
|
||||
OpenAI ZIP export (auto-converted).
|
||||
</p>
|
||||
<p>Large exports can be filtered below to speed up the import.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">2. Filter records</div>
|
||||
<button
|
||||
class="text-xs px-3 py-1.5 rounded-full border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-850"
|
||||
on:click={() => (filterOpen = !filterOpen)}
|
||||
type="button"
|
||||
>
|
||||
{filterOpen ? 'Hide filters' : 'Show filters'}
|
||||
</button>
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">1. 读取文件 (JSON Array)</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -251,98 +206,109 @@
|
|||
dropActive = false;
|
||||
handleFiles(e.dataTransfer?.files ?? []);
|
||||
}}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
<div class="font-medium text-gray-900 dark:text-white">
|
||||
{fileName ? `Selected: ${fileName}` : 'Drag a file here or click to upload'}
|
||||
<div class="font-medium text-gray-900 dark:text-white font-mono">
|
||||
{fileName ? `Current: ${fileName}` : '拖入 .json 文件'}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-lg bg-gray-900 text-white text-xs hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
|
||||
class="px-3 py-1.5 rounded-lg bg-gray-900 text-white text-xs hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200 transition-colors"
|
||||
on:click={() => fileInputEl.click()}
|
||||
type="button"
|
||||
>
|
||||
Choose file
|
||||
选择文件
|
||||
</button>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
Supports .json / .jsonl / .txt / .zip exports
|
||||
格式要求: <code>[{...}, {...}]</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-300">
|
||||
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-300 mt-2">
|
||||
<Spinner className="size-4" />
|
||||
<span>Parsing file...</span>
|
||||
<span>正在解析...</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if errorMsg}
|
||||
<div class="text-xs text-red-500">{errorMsg}</div>
|
||||
<div class="text-xs text-red-500 mt-1">{errorMsg}</div>
|
||||
{/if}
|
||||
{#if successMsg}
|
||||
<div class="text-xs text-green-600 dark:text-green-400">{successMsg}</div>
|
||||
<div class="text-xs text-green-600 dark:text-green-400 mt-1">{successMsg}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
bind:this={fileInputEl}
|
||||
type="file"
|
||||
accept=".json,.jsonl,.zip,.txt,application/json"
|
||||
accept=".json,application/json"
|
||||
hidden
|
||||
on:change={handleFileInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if filterOpen}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
|
||||
<div>
|
||||
Total: {rawChats.length} | Selected: {selectedIndices.size}
|
||||
{selectedIndices.size === 0 && rawChats.length > 0
|
||||
? ' (none selected will import all)'
|
||||
: ''}
|
||||
</div>
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||
|
||||
<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">
|
||||
2. 筛选记录
|
||||
</div>
|
||||
|
||||
{#if rawChats.length > 0}
|
||||
<div class="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
|
||||
<span class="font-mono">Total: {rawChats.length} | Selected: {selectedIndices.size}</span>
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none hover:text-gray-900 dark:hover:text-white transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="accent-blue-600"
|
||||
class="accent-blue-600 rounded"
|
||||
checked={rawChats.length > 0 && selectedIndices.size === rawChats.length}
|
||||
indeterminate={selectedIndices.size > 0 && selectedIndices.size < rawChats.length}
|
||||
on:change={handleSelectAllChange}
|
||||
/>
|
||||
<span>Select / Deselect all</span>
|
||||
<span>全选</span>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="max-h-64 overflow-auto rounded-xl border border-gray-100 dark:border-gray-800">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
|
||||
{#if filterOpen}
|
||||
<div class="max-h-64 overflow-auto rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/30 dark:bg-black/20">
|
||||
<table class="w-full text-sm border-collapse">
|
||||
<thead class="text-left bg-gray-50 dark:bg-gray-800/50 text-gray-500 dark:text-gray-400 sticky top-0 backdrop-blur-md">
|
||||
<tr>
|
||||
<th class="w-14 py-2 px-3">Pick</th>
|
||||
<th class="py-2 px-3">Title / Summary</th>
|
||||
<th class="w-48 py-2 px-3">Timestamp</th>
|
||||
<th class="w-12 py-2 px-3 text-center">#</th>
|
||||
<th class="py-2 px-3 font-medium text-xs uppercase tracking-wider">Title</th>
|
||||
<th class="w-48 py-2 px-3 font-medium text-xs uppercase tracking-wider">Inserted At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#if !rawChats.length}
|
||||
<tr>
|
||||
<td colspan="3" class="py-4 text-center text-gray-500 dark:text-gray-400">
|
||||
Upload a file to see filterable records
|
||||
<td colspan="3" class="py-8 text-center text-gray-500 dark:text-gray-500 text-xs">
|
||||
暂无数据，请先导入文件
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
{#each displayRows() as row}
|
||||
<tr class="border-t border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-900/60">
|
||||
<td class="py-2 px-3">
|
||||
{#each displayRows() as row (row.idx)}
|
||||
<tr
|
||||
class="border-b border-gray-100 dark:border-gray-800 last:border-0 hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors group"
|
||||
>
|
||||
<td class="py-2 px-3 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="accent-blue-600 cursor-pointer"
|
||||
checked={selectedIndices.has(row.idx)}
|
||||
on:change={() => toggleRow(row.idx)}
|
||||
/>
|
||||
</td>
|
||||
<td class="py-2 px-3">
|
||||
<div class="text-sm text-gray-900 dark:text-white line-clamp-2">
|
||||
<div class="text-gray-900 dark:text-gray-200 font-medium truncate max-w-[300px]" title={row.title}>
|
||||
{row.title}
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-2 px-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<td class="py-2 px-3 text-xs font-mono text-blue-600 dark:text-blue-400">
|
||||
{row.date}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -351,36 +317,29 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-2">
|
||||
<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">3. Import</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
Confirmed records will be imported into your current account.
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<div class="flex items-center justify-end gap-3 pt-2">
|
||||
<button
|
||||
class="px-4 py-2 text-sm rounded-xl border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-850"
|
||||
class="px-4 py-2 text-sm rounded-xl border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-850 text-gray-700 dark:text-gray-300 transition-all"
|
||||
on:click={() => (show = false)}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm rounded-xl bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
class="px-4 py-2 text-sm rounded-xl bg-green-600 text-white hover:bg-green-700 hover:shadow-[0_0_12px_rgba(22,163,74,0.4)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center gap-2 transition-all font-medium"
|
||||
on:click={confirmImport}
|
||||
disabled={loading || importing || (!rawChats.length && !loading)}
|
||||
disabled={loading || importing || selectedIndices.size === 0}
|
||||
type="button"
|
||||
>
|
||||
{#if importing}
|
||||
<Spinner className="size-4" />
|
||||
{/if}
|
||||
<span>{importing ? 'Importing...' : 'Confirm import'}</span>
|
||||
<span>导出并导入 ({selectedIndices.size})</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
Loading…
Reference in a new issue