@ai-group/chat-sdk 3.0.1-alpha.6 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/FileGallery/index.d.ts +33 -0
- package/dist/cjs/components/FileGallery/index.js +301 -0
- package/dist/cjs/components/FileGallery/index.js.map +7 -0
- package/dist/{esm/components/XAdkChatbot → cjs}/components/FileGallery/styles.d.ts +11 -6
- package/dist/cjs/components/FileGallery/styles.js +188 -0
- package/dist/cjs/components/FileGallery/styles.js.map +7 -0
- package/dist/cjs/components/XAdkChatbot/index.js +1 -1
- package/dist/cjs/components/XAdkChatbot/index.js.map +1 -1
- package/dist/cjs/components/XAdkSender/index.js +2 -2
- package/dist/cjs/components/XAdkSender/index.js.map +2 -2
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/types/FileGallery.d.ts +54 -0
- package/dist/cjs/types/FileGallery.js +18 -0
- package/dist/cjs/types/FileGallery.js.map +7 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/cjs/types/index.js +2 -0
- package/dist/cjs/types/index.js.map +2 -2
- package/dist/esm/components/FileGallery/index.d.ts +33 -0
- package/dist/esm/components/FileGallery/index.js +439 -0
- package/dist/esm/components/FileGallery/index.js.map +1 -0
- package/dist/{cjs/components/XAdkChatbot → esm}/components/FileGallery/styles.d.ts +11 -6
- package/dist/esm/components/FileGallery/styles.js +23 -0
- package/dist/esm/components/FileGallery/styles.js.map +1 -0
- package/dist/esm/components/XAdkChatbot/index.js +1 -1
- package/dist/esm/components/XAdkChatbot/index.js.map +1 -1
- package/dist/esm/components/XAdkSender/index.js +2 -1
- package/dist/esm/components/XAdkSender/index.js.map +1 -1
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/FileGallery.d.ts +54 -0
- package/dist/esm/types/FileGallery.js +2 -0
- package/dist/esm/types/FileGallery.js.map +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/index.js +1 -0
- package/dist/esm/types/index.js.map +1 -1
- package/dist/umd/chat-sdk.min.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/XAdkChatbot/components/FileGallery/index.d.ts +0 -12
- package/dist/cjs/components/XAdkChatbot/components/FileGallery/index.js +0 -92
- package/dist/cjs/components/XAdkChatbot/components/FileGallery/index.js.map +0 -7
- package/dist/cjs/components/XAdkChatbot/components/FileGallery/styles.js +0 -137
- package/dist/cjs/components/XAdkChatbot/components/FileGallery/styles.js.map +0 -7
- package/dist/cjs/components/XAdkSender/FileGallery.d.ts +0 -8
- package/dist/cjs/components/XAdkSender/FileGallery.js +0 -444
- package/dist/cjs/components/XAdkSender/FileGallery.js.map +0 -7
- package/dist/esm/components/XAdkChatbot/components/FileGallery/index.d.ts +0 -12
- package/dist/esm/components/XAdkChatbot/components/FileGallery/index.js +0 -104
- package/dist/esm/components/XAdkChatbot/components/FileGallery/index.js.map +0 -1
- package/dist/esm/components/XAdkChatbot/components/FileGallery/styles.js +0 -20
- package/dist/esm/components/XAdkChatbot/components/FileGallery/styles.js.map +0 -1
- package/dist/esm/components/XAdkSender/FileGallery.d.ts +0 -8
- package/dist/esm/components/XAdkSender/FileGallery.js +0 -347
- package/dist/esm/components/XAdkSender/FileGallery.js.map +0 -1
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FileGalleryProps } from "../../types";
|
|
3
|
+
/**
|
|
4
|
+
* FileGallery - 通用文件展示组件
|
|
5
|
+
*
|
|
6
|
+
* 功能特性:
|
|
7
|
+
* - 📁 支持多种文件类型展示 (图片、音频、视频、文档等)
|
|
8
|
+
* - 🖼️ 图片支持预览和缩略图
|
|
9
|
+
* - 🎵 音频文件支持内联播放
|
|
10
|
+
* - 🎬 视频文件支持内联播放
|
|
11
|
+
* - 📊 显示文件大小、类型图标
|
|
12
|
+
* - 🗑️ 支持删除操作
|
|
13
|
+
* - 📤 支持上传进度显示
|
|
14
|
+
* - 🎨 支持左右对齐
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // XAdkSender 场景 - 可删除的本地文件
|
|
18
|
+
* <FileGallery
|
|
19
|
+
* files={localFiles}
|
|
20
|
+
* removable
|
|
21
|
+
* onRemove={handleRemove}
|
|
22
|
+
* align="left"
|
|
23
|
+
* />
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* // XadkChatbot 场景 - 只读的远程文件
|
|
27
|
+
* <FileGallery
|
|
28
|
+
* files={remoteFiles}
|
|
29
|
+
* align="right"
|
|
30
|
+
* />
|
|
31
|
+
*/
|
|
32
|
+
declare const FileGallery: React.FC<FileGalleryProps>;
|
|
33
|
+
export default FileGallery;
|
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/FileGallery/index.tsx
|
|
20
|
+
var FileGallery_exports = {};
|
|
21
|
+
__export(FileGallery_exports, {
|
|
22
|
+
default: () => FileGallery_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(FileGallery_exports);
|
|
25
|
+
var import_react = require("react");
|
|
26
|
+
var import_antd = require("antd");
|
|
27
|
+
var import_icons = require("@ant-design/icons");
|
|
28
|
+
var import_styles = require("./styles");
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var getFileName = (file) => {
|
|
31
|
+
return file.displayName || file.name || "";
|
|
32
|
+
};
|
|
33
|
+
var getFileSize = (file) => {
|
|
34
|
+
return file.size || 0;
|
|
35
|
+
};
|
|
36
|
+
var getMimeType = (file) => {
|
|
37
|
+
return file.mimeType || file.type || "";
|
|
38
|
+
};
|
|
39
|
+
var getFileUrl = (file) => {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
return file.fileUri || ((_a = file.response) == null ? void 0 : _a.fileUrl) || ((_b = file.response) == null ? void 0 : _b.tempUrl) || file.tempUrl || "";
|
|
42
|
+
};
|
|
43
|
+
var getFileId = (file) => {
|
|
44
|
+
return file.id || file.uid || "";
|
|
45
|
+
};
|
|
46
|
+
var isImageFile = (file) => {
|
|
47
|
+
const mimeType = getMimeType(file);
|
|
48
|
+
if (mimeType && mimeType.startsWith("image/"))
|
|
49
|
+
return true;
|
|
50
|
+
const fileName = getFileName(file);
|
|
51
|
+
if (fileName && fileName.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i))
|
|
52
|
+
return true;
|
|
53
|
+
const url = getFileUrl(file);
|
|
54
|
+
if (url && url.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i))
|
|
55
|
+
return true;
|
|
56
|
+
return false;
|
|
57
|
+
};
|
|
58
|
+
var isAudioFile = (file) => {
|
|
59
|
+
const mimeType = getMimeType(file);
|
|
60
|
+
if (mimeType && mimeType.startsWith("audio/"))
|
|
61
|
+
return true;
|
|
62
|
+
const fileName = getFileName(file);
|
|
63
|
+
return !!(fileName == null ? void 0 : fileName.match(/\.(mp3|wav|m4a|aac|ogg|flac)$/i));
|
|
64
|
+
};
|
|
65
|
+
var isVideoFile = (file) => {
|
|
66
|
+
const mimeType = getMimeType(file);
|
|
67
|
+
if (mimeType && mimeType.startsWith("video/"))
|
|
68
|
+
return true;
|
|
69
|
+
const fileName = getFileName(file);
|
|
70
|
+
return !!(fileName == null ? void 0 : fileName.match(/\.(mp4|mov|webm|mkv|avi)$/i));
|
|
71
|
+
};
|
|
72
|
+
var getFileExtension = (filename) => {
|
|
73
|
+
const ext = filename.split(".").pop();
|
|
74
|
+
return ext ? ext.toLowerCase() : "";
|
|
75
|
+
};
|
|
76
|
+
var getFileIcon = (file) => {
|
|
77
|
+
const ext = getFileExtension(getFileName(file));
|
|
78
|
+
if (ext === "pdf") {
|
|
79
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePdfOutlined, {}), color: "#ff4d4f" };
|
|
80
|
+
}
|
|
81
|
+
if (["doc", "docx"].includes(ext)) {
|
|
82
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileWordOutlined, {}), color: "#1677ff" };
|
|
83
|
+
}
|
|
84
|
+
if (["xls", "xlsx", "csv"].includes(ext)) {
|
|
85
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileExcelOutlined, {}), color: "#22b35e" };
|
|
86
|
+
}
|
|
87
|
+
if (["ppt", "pptx"].includes(ext)) {
|
|
88
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePptOutlined, {}), color: "#ff6e31" };
|
|
89
|
+
}
|
|
90
|
+
if (["mp3", "wav", "m4a", "aac", "ogg", "flac"].includes(ext)) {
|
|
91
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AudioOutlined, {}), color: "#722ed1" };
|
|
92
|
+
}
|
|
93
|
+
if (["mp4", "mov", "webm", "mkv", "avi"].includes(ext)) {
|
|
94
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}), color: "#fa8c16" };
|
|
95
|
+
}
|
|
96
|
+
if (isImageFile(file)) {
|
|
97
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileImageOutlined, {}), color: "#8c8c8c" };
|
|
98
|
+
}
|
|
99
|
+
return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileOutlined, {}), color: "#8c8c8c" };
|
|
100
|
+
};
|
|
101
|
+
var formatFileSize = (bytes) => {
|
|
102
|
+
if (bytes < 1024)
|
|
103
|
+
return bytes + " B";
|
|
104
|
+
if (bytes < 1024 * 1024)
|
|
105
|
+
return (bytes / 1024).toFixed(1) + " KB";
|
|
106
|
+
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
|
107
|
+
};
|
|
108
|
+
var styles = (0, import_styles.useStyles)();
|
|
109
|
+
var FileItemComponent = ({
|
|
110
|
+
file,
|
|
111
|
+
removable,
|
|
112
|
+
onRemove
|
|
113
|
+
}) => {
|
|
114
|
+
const [objectUrl, setObjectUrl] = (0, import_react.useState)("");
|
|
115
|
+
(0, import_react.useEffect)(() => {
|
|
116
|
+
if (!file.file)
|
|
117
|
+
return;
|
|
118
|
+
const url2 = URL.createObjectURL(file.file);
|
|
119
|
+
setObjectUrl(url2);
|
|
120
|
+
return () => URL.revokeObjectURL(url2);
|
|
121
|
+
}, [file.file]);
|
|
122
|
+
const isImage = isImageFile(file);
|
|
123
|
+
const isAudio = isAudioFile(file);
|
|
124
|
+
const isVideo = isVideoFile(file);
|
|
125
|
+
const fileName = getFileName(file);
|
|
126
|
+
const fileSize = getFileSize(file);
|
|
127
|
+
const fileId = getFileId(file);
|
|
128
|
+
const url = getFileUrl(file) || objectUrl;
|
|
129
|
+
if (isImage) {
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, children: [
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.imageThumbnail, children: [
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
|
+
import_antd.Image,
|
|
134
|
+
{
|
|
135
|
+
src: url,
|
|
136
|
+
alt: fileName,
|
|
137
|
+
fallback: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
|
|
138
|
+
preview: {
|
|
139
|
+
src: url
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.imageOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
|
+
import_antd.Progress,
|
|
145
|
+
{
|
|
146
|
+
type: "circle",
|
|
147
|
+
percent: file.progress,
|
|
148
|
+
size: 30,
|
|
149
|
+
strokeColor: "#1677ff"
|
|
150
|
+
}
|
|
151
|
+
) })
|
|
152
|
+
] }),
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
|
|
154
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
|
|
155
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) })
|
|
156
|
+
] }),
|
|
157
|
+
removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
"button",
|
|
159
|
+
{
|
|
160
|
+
className: styles.fileRemoveBtn,
|
|
161
|
+
onClick: () => onRemove(fileId),
|
|
162
|
+
disabled: file.status === "uploading",
|
|
163
|
+
"aria-label": "删除文件",
|
|
164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
|
|
165
|
+
}
|
|
166
|
+
)
|
|
167
|
+
] });
|
|
168
|
+
}
|
|
169
|
+
if (isAudio) {
|
|
170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, children: [
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color: "#722ed1" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AudioOutlined, {}) }),
|
|
172
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
|
|
173
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName }) }),
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
|
+
"audio",
|
|
176
|
+
{
|
|
177
|
+
src: url,
|
|
178
|
+
controls: true,
|
|
179
|
+
className: styles.mediaWrapper,
|
|
180
|
+
style: { width: "100%", height: 28 }
|
|
181
|
+
}
|
|
182
|
+
)
|
|
183
|
+
] }),
|
|
184
|
+
removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
185
|
+
"button",
|
|
186
|
+
{
|
|
187
|
+
className: styles.fileRemoveBtn,
|
|
188
|
+
onClick: () => onRemove(fileId),
|
|
189
|
+
disabled: file.status === "uploading",
|
|
190
|
+
"aria-label": "删除文件",
|
|
191
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
|
|
192
|
+
}
|
|
193
|
+
)
|
|
194
|
+
] });
|
|
195
|
+
}
|
|
196
|
+
if (isVideo) {
|
|
197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, children: [
|
|
198
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color: "#fa8c16" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}) }),
|
|
199
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
|
|
200
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName }) }),
|
|
201
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
202
|
+
"video",
|
|
203
|
+
{
|
|
204
|
+
src: url,
|
|
205
|
+
controls: true,
|
|
206
|
+
className: styles.mediaWrapper,
|
|
207
|
+
style: { width: "100%", height: 40 }
|
|
208
|
+
}
|
|
209
|
+
)
|
|
210
|
+
] }),
|
|
211
|
+
removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
212
|
+
"button",
|
|
213
|
+
{
|
|
214
|
+
className: styles.fileRemoveBtn,
|
|
215
|
+
onClick: () => onRemove(fileId),
|
|
216
|
+
disabled: file.status === "uploading",
|
|
217
|
+
"aria-label": "删除文件",
|
|
218
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
|
|
219
|
+
}
|
|
220
|
+
)
|
|
221
|
+
] });
|
|
222
|
+
}
|
|
223
|
+
const { icon, color } = getFileIcon(file);
|
|
224
|
+
const isExternalUrl = url && url.startsWith("http");
|
|
225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, children: [
|
|
226
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color }, children: icon }),
|
|
227
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
|
|
228
|
+
isExternalUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
229
|
+
"a",
|
|
230
|
+
{
|
|
231
|
+
href: url,
|
|
232
|
+
target: "_blank",
|
|
233
|
+
rel: "noopener noreferrer",
|
|
234
|
+
className: styles.fileLink,
|
|
235
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) })
|
|
236
|
+
}
|
|
237
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
|
|
238
|
+
file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
239
|
+
import_antd.Progress,
|
|
240
|
+
{
|
|
241
|
+
percent: file.progress,
|
|
242
|
+
size: "small",
|
|
243
|
+
showInfo: false,
|
|
244
|
+
strokeColor: "#1677ff",
|
|
245
|
+
className: styles.progress
|
|
246
|
+
}
|
|
247
|
+
) : fileSize > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) }),
|
|
248
|
+
file.status === "error" && file.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
249
|
+
"div",
|
|
250
|
+
{
|
|
251
|
+
style: {
|
|
252
|
+
fontSize: "11px",
|
|
253
|
+
color: "#ff4d4f",
|
|
254
|
+
marginTop: "2px"
|
|
255
|
+
},
|
|
256
|
+
children: file.errorMessage
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
] }),
|
|
260
|
+
removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
261
|
+
"button",
|
|
262
|
+
{
|
|
263
|
+
className: styles.fileRemoveBtn,
|
|
264
|
+
onClick: () => onRemove(fileId),
|
|
265
|
+
disabled: file.status === "uploading",
|
|
266
|
+
"aria-label": "删除文件",
|
|
267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
|
|
268
|
+
}
|
|
269
|
+
)
|
|
270
|
+
] });
|
|
271
|
+
};
|
|
272
|
+
var FileGallery = ({
|
|
273
|
+
files,
|
|
274
|
+
align = "left",
|
|
275
|
+
removable = false,
|
|
276
|
+
onRemove = () => {
|
|
277
|
+
},
|
|
278
|
+
className,
|
|
279
|
+
style
|
|
280
|
+
}) => {
|
|
281
|
+
if (!files || files.length === 0)
|
|
282
|
+
return null;
|
|
283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
284
|
+
"div",
|
|
285
|
+
{
|
|
286
|
+
className: `${styles.container} ${align === "right" ? "align-right" : ""} ${className || ""}`,
|
|
287
|
+
style,
|
|
288
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileList, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Image.PreviewGroup, { children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
289
|
+
FileItemComponent,
|
|
290
|
+
{
|
|
291
|
+
file,
|
|
292
|
+
removable,
|
|
293
|
+
onRemove
|
|
294
|
+
},
|
|
295
|
+
getFileId(file) || index
|
|
296
|
+
)) }) })
|
|
297
|
+
}
|
|
298
|
+
);
|
|
299
|
+
};
|
|
300
|
+
var FileGallery_default = FileGallery;
|
|
301
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/FileGallery/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect } from \"react\";\nimport { Image, Tooltip, Progress } from \"antd\";\nimport {\n FileOutlined,\n FilePdfOutlined,\n FileWordOutlined,\n FileExcelOutlined,\n FilePptOutlined,\n FileImageOutlined,\n CloseOutlined,\n AudioOutlined,\n VideoCameraOutlined,\n} from \"@ant-design/icons\";\nimport { FileItem, FileGalleryProps, FileItemComponentProps } from \"@/types\";\nimport { useStyles } from \"./styles\";\n\n// ==================== 工具函数 ====================\n\n/**\n * 获取文件名\n */\nconst getFileName = (file: FileItem): string => {\n return file.displayName || file.name || \"\";\n};\n\n/**\n * 获取文件大小\n */\nconst getFileSize = (file: FileItem): number => {\n return file.size || 0;\n};\n\n/**\n * 获取文件 MIME 类型\n */\nconst getMimeType = (file: FileItem): string => {\n return file.mimeType || file.type || \"\";\n};\n\n/**\n * 获取文件 URL\n */\nconst getFileUrl = (file: FileItem): string => {\n return (\n file.fileUri ||\n file.response?.fileUrl ||\n file.response?.tempUrl ||\n file.tempUrl ||\n \"\"\n );\n};\n\n/**\n * 获取文件唯一标识\n */\nconst getFileId = (file: FileItem): string => {\n return file.id || file.uid || \"\";\n};\n\n/**\n * 判断是否是图片文件\n */\nconst isImageFile = (file: FileItem): boolean => {\n const mimeType = getMimeType(file);\n if (mimeType && mimeType.startsWith(\"image/\")) return true;\n\n const fileName = getFileName(file);\n if (fileName && fileName.match(/\\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i))\n return true;\n\n const url = getFileUrl(file);\n if (url && url.match(/\\.(jpg|jpeg|png|gif|webp|bmp|svg)(\\?.*)?$/i))\n return true;\n\n return false;\n};\n\n/**\n * 判断是否是音频文件\n */\nconst isAudioFile = (file: FileItem): boolean => {\n const mimeType = getMimeType(file);\n if (mimeType && mimeType.startsWith(\"audio/\")) return true;\n\n const fileName = getFileName(file);\n return !!fileName?.match(/\\.(mp3|wav|m4a|aac|ogg|flac)$/i);\n};\n\n/**\n * 判断是否是视频文件\n */\nconst isVideoFile = (file: FileItem): boolean => {\n const mimeType = getMimeType(file);\n if (mimeType && mimeType.startsWith(\"video/\")) return true;\n\n const fileName = getFileName(file);\n return !!fileName?.match(/\\.(mp4|mov|webm|mkv|avi)$/i);\n};\n\n/**\n * 获取文件扩展名\n */\nconst getFileExtension = (filename: string): string => {\n const ext = filename.split(\".\").pop();\n return ext ? ext.toLowerCase() : \"\";\n};\n\n/**\n * 获取文件图标和颜色\n */\nconst getFileIcon = (\n file: FileItem,\n): { icon: React.ReactNode; color: string } => {\n const ext = getFileExtension(getFileName(file));\n\n // PDF\n if (ext === \"pdf\") {\n return { icon: <FilePdfOutlined />, color: \"#ff4d4f\" };\n }\n\n // Word\n if ([\"doc\", \"docx\"].includes(ext)) {\n return { icon: <FileWordOutlined />, color: \"#1677ff\" };\n }\n\n // Excel\n if ([\"xls\", \"xlsx\", \"csv\"].includes(ext)) {\n return { icon: <FileExcelOutlined />, color: \"#22b35e\" };\n }\n\n // PPT\n if ([\"ppt\", \"pptx\"].includes(ext)) {\n return { icon: <FilePptOutlined />, color: \"#ff6e31\" };\n }\n\n // Audio\n if ([\"mp3\", \"wav\", \"m4a\", \"aac\", \"ogg\", \"flac\"].includes(ext)) {\n return { icon: <AudioOutlined />, color: \"#722ed1\" };\n }\n\n // Video\n if ([\"mp4\", \"mov\", \"webm\", \"mkv\", \"avi\"].includes(ext)) {\n return { icon: <VideoCameraOutlined />, color: \"#fa8c16\" };\n }\n\n // 图片\n if (isImageFile(file)) {\n return { icon: <FileImageOutlined />, color: \"#8c8c8c\" };\n }\n\n // 默认\n return { icon: <FileOutlined />, color: \"#8c8c8c\" };\n};\n\n/**\n * 格式化文件大小\n */\nconst formatFileSize = (bytes: number): string => {\n if (bytes < 1024) return bytes + \" B\";\n if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + \" KB\";\n return (bytes / (1024 * 1024)).toFixed(1) + \" MB\";\n};\n\nconst styles = useStyles();\n\n// ==================== 子组件 ====================\n\nconst FileItemComponent: React.FC<FileItemComponentProps> = ({\n file,\n removable,\n onRemove,\n}) => {\n const [objectUrl, setObjectUrl] = useState(\"\");\n\n useEffect(() => {\n if (!file.file) return;\n\n const url = URL.createObjectURL(file.file);\n setObjectUrl(url);\n\n return () => URL.revokeObjectURL(url);\n }, [file.file]);\n\n const isImage = isImageFile(file);\n const isAudio = isAudioFile(file);\n const isVideo = isVideoFile(file);\n const fileName = getFileName(file);\n const fileSize = getFileSize(file);\n const fileId = getFileId(file);\n const url = getFileUrl(file) || objectUrl;\n\n // 图片文件\n if (isImage) {\n return (\n <div className={styles.fileCard}>\n {/* 图片缩略图 */}\n <div className={styles.imageThumbnail}>\n <Image\n src={url}\n alt={fileName}\n fallback=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==\"\n preview={{\n src: url,\n }}\n />\n\n {/* 上传进度遮罩 */}\n {file.status === \"uploading\" && (\n <div className={styles.imageOverlay}>\n <Progress\n type=\"circle\"\n percent={file.progress}\n size={30}\n strokeColor=\"#1677ff\"\n />\n </div>\n )}\n </div>\n\n {/* 文件信息 */}\n <div className={styles.fileInfo}>\n <Tooltip title={fileName}>\n <div className={styles.fileName}>\n {fileName.length > 15\n ? `${fileName.substring(0, 15)}...`\n : fileName}\n </div>\n </Tooltip>\n <div className={styles.fileSize}>{formatFileSize(fileSize)}</div>\n </div>\n\n {/* 删除按钮 */}\n {removable && (\n <button\n className={styles.fileRemoveBtn}\n onClick={() => onRemove(fileId)}\n disabled={file.status === \"uploading\"}\n aria-label=\"删除文件\"\n >\n <CloseOutlined />\n </button>\n )}\n </div>\n );\n }\n\n // 音频文件\n if (isAudio) {\n return (\n <div className={styles.fileCard}>\n <div className={styles.fileIcon} style={{ color: \"#722ed1\" }}>\n <AudioOutlined />\n </div>\n\n <div className={styles.fileInfo}>\n <Tooltip title={fileName}>\n <div className={styles.fileName}>{fileName}</div>\n </Tooltip>\n\n <audio\n src={url}\n controls\n className={styles.mediaWrapper}\n style={{ width: \"100%\", height: 28 }}\n />\n </div>\n\n {removable && (\n <button\n className={styles.fileRemoveBtn}\n onClick={() => onRemove(fileId)}\n disabled={file.status === \"uploading\"}\n aria-label=\"删除文件\"\n >\n <CloseOutlined />\n </button>\n )}\n </div>\n );\n }\n\n // 视频文件\n if (isVideo) {\n return (\n <div className={styles.fileCard}>\n <div className={styles.fileIcon} style={{ color: \"#fa8c16\" }}>\n <VideoCameraOutlined />\n </div>\n\n <div className={styles.fileInfo}>\n <Tooltip title={fileName}>\n <div className={styles.fileName}>{fileName}</div>\n </Tooltip>\n\n <video\n src={url}\n controls\n className={styles.mediaWrapper}\n style={{ width: \"100%\", height: 40 }}\n />\n </div>\n\n {removable && (\n <button\n className={styles.fileRemoveBtn}\n onClick={() => onRemove(fileId)}\n disabled={file.status === \"uploading\"}\n aria-label=\"删除文件\"\n >\n <CloseOutlined />\n </button>\n )}\n </div>\n );\n }\n\n // 其他文件\n const { icon, color } = getFileIcon(file);\n const isExternalUrl = url && url.startsWith(\"http\");\n\n return (\n <div className={styles.fileCard}>\n <div className={styles.fileIcon} style={{ color }}>\n {icon}\n </div>\n\n <div className={styles.fileInfo}>\n {isExternalUrl ? (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={styles.fileLink}\n >\n <Tooltip title={fileName}>\n <div className={styles.fileName}>\n {fileName.length > 15\n ? `${fileName.substring(0, 15)}...`\n : fileName}\n </div>\n </Tooltip>\n </a>\n ) : (\n <Tooltip title={fileName}>\n <div className={styles.fileName}>\n {fileName.length > 15\n ? `${fileName.substring(0, 15)}...`\n : fileName}\n </div>\n </Tooltip>\n )}\n\n {file.status === \"uploading\" ? (\n <Progress\n percent={file.progress}\n size=\"small\"\n showInfo={false}\n strokeColor=\"#1677ff\"\n className={styles.progress}\n />\n ) : (\n fileSize > 0 && (\n <div className={styles.fileSize}>{formatFileSize(fileSize)}</div>\n )\n )}\n\n {file.status === \"error\" && file.errorMessage && (\n <div\n style={{\n fontSize: \"11px\",\n color: \"#ff4d4f\",\n marginTop: \"2px\",\n }}\n >\n {file.errorMessage}\n </div>\n )}\n </div>\n\n {removable && (\n <button\n className={styles.fileRemoveBtn}\n onClick={() => onRemove(fileId)}\n disabled={file.status === \"uploading\"}\n aria-label=\"删除文件\"\n >\n <CloseOutlined />\n </button>\n )}\n </div>\n );\n};\n\n// ==================== 主组件 ====================\n\n/**\n * FileGallery - 通用文件展示组件\n *\n * 功能特性:\n * - 📁 支持多种文件类型展示 (图片、音频、视频、文档等)\n * - 🖼️ 图片支持预览和缩略图\n * - 🎵 音频文件支持内联播放\n * - 🎬 视频文件支持内联播放\n * - 📊 显示文件大小、类型图标\n * - 🗑️ 支持删除操作\n * - 📤 支持上传进度显示\n * - 🎨 支持左右对齐\n *\n * @example\n * // XAdkSender 场景 - 可删除的本地文件\n * <FileGallery\n * files={localFiles}\n * removable\n * onRemove={handleRemove}\n * align=\"left\"\n * />\n *\n * @example\n * // XadkChatbot 场景 - 只读的远程文件\n * <FileGallery\n * files={remoteFiles}\n * align=\"right\"\n * />\n */\nconst FileGallery: React.FC<FileGalleryProps> = ({\n files,\n align = \"left\",\n removable = false,\n onRemove = () => {},\n className,\n style,\n}) => {\n if (!files || files.length === 0) return null;\n\n return (\n <div\n className={`${styles.container} ${align === \"right\" ? \"align-right\" : \"\"} ${className || \"\"}`}\n style={style}\n >\n <div className={styles.fileList}>\n <Image.PreviewGroup>\n {files.map((file, index) => (\n <FileItemComponent\n key={getFileId(file) || index}\n file={file}\n removable={removable}\n onRemove={onRemove}\n />\n ))}\n </Image.PreviewGroup>\n </div>\n </div>\n );\n};\n\nexport default FileGallery;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["url"]
|
|
7
|
+
}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
export declare const useStyles: () => {
|
|
2
|
-
|
|
3
|
-
imageGrid: string;
|
|
4
|
-
imageItem: string;
|
|
5
|
-
img: string;
|
|
2
|
+
container: string;
|
|
6
3
|
fileList: string;
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
fileCard: string;
|
|
5
|
+
imageThumbnail: string;
|
|
6
|
+
imageOverlay: string;
|
|
9
7
|
fileIcon: string;
|
|
8
|
+
fileInfo: string;
|
|
10
9
|
fileName: string;
|
|
10
|
+
fileSize: string;
|
|
11
|
+
progress: string;
|
|
12
|
+
fileRemoveBtn: string;
|
|
13
|
+
fileLink: string;
|
|
14
|
+
mediaWrapper: string;
|
|
11
15
|
} & {
|
|
12
16
|
w: (width: string | number) => string;
|
|
13
17
|
h: (height: string | number) => string;
|
|
@@ -42,3 +46,4 @@ export declare const useStyles: () => {
|
|
|
42
46
|
flexCenterGap2: string;
|
|
43
47
|
flexCenterGap4: string;
|
|
44
48
|
};
|
|
49
|
+
export default useStyles;
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/FileGallery/styles.tsx
|
|
20
|
+
var styles_exports = {};
|
|
21
|
+
__export(styles_exports, {
|
|
22
|
+
default: () => styles_default,
|
|
23
|
+
useStyles: () => useStyles
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(styles_exports);
|
|
26
|
+
var import_css = require("@emotion/css");
|
|
27
|
+
var import_common = require("../../styles/common");
|
|
28
|
+
var useStyles = (0, import_common.withBasicStyles)(() => ({
|
|
29
|
+
container: import_css.css`
|
|
30
|
+
padding: 12px 0;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 12px;
|
|
34
|
+
|
|
35
|
+
&.align-right {
|
|
36
|
+
align-items: flex-end;
|
|
37
|
+
}
|
|
38
|
+
`,
|
|
39
|
+
fileList: import_css.css`
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-wrap: wrap;
|
|
42
|
+
gap: 8px;
|
|
43
|
+
`,
|
|
44
|
+
fileCard: import_css.css`
|
|
45
|
+
position: relative;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 10px;
|
|
49
|
+
padding: 6px 12px;
|
|
50
|
+
background: #fafafa;
|
|
51
|
+
border: 1px solid #f0f0f0;
|
|
52
|
+
border-radius: 8px;
|
|
53
|
+
min-width: 260px;
|
|
54
|
+
max-width: 280px;
|
|
55
|
+
min-height: 64px;
|
|
56
|
+
transition: all 0.2s ease;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
background: #f5f5f5;
|
|
60
|
+
border-color: #e0e0e0;
|
|
61
|
+
}
|
|
62
|
+
`,
|
|
63
|
+
imageThumbnail: import_css.css`
|
|
64
|
+
position: relative;
|
|
65
|
+
width: 44px;
|
|
66
|
+
height: 44px;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
background-color: #f5f5f5;
|
|
71
|
+
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
72
|
+
|
|
73
|
+
.ant-image {
|
|
74
|
+
width: 100% !important;
|
|
75
|
+
height: 100% !important;
|
|
76
|
+
display: flex !important;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
align-items: center;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
img {
|
|
82
|
+
width: 100% !important;
|
|
83
|
+
height: 100% !important;
|
|
84
|
+
object-fit: cover !important;
|
|
85
|
+
display: block !important;
|
|
86
|
+
}
|
|
87
|
+
`,
|
|
88
|
+
imageOverlay: import_css.css`
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 0;
|
|
91
|
+
left: 0;
|
|
92
|
+
right: 0;
|
|
93
|
+
bottom: 0;
|
|
94
|
+
background: rgba(0, 0, 0, 0.05);
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
z-index: 10;
|
|
99
|
+
`,
|
|
100
|
+
fileIcon: import_css.css`
|
|
101
|
+
font-size: 24px;
|
|
102
|
+
flex-shrink: 0;
|
|
103
|
+
width: 36px;
|
|
104
|
+
height: 36px;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
`,
|
|
109
|
+
fileInfo: import_css.css`
|
|
110
|
+
flex: 1;
|
|
111
|
+
min-width: 0;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
`,
|
|
114
|
+
fileName: import_css.css`
|
|
115
|
+
font-size: 13px;
|
|
116
|
+
font-weight: 500;
|
|
117
|
+
color: #262626;
|
|
118
|
+
margin-bottom: 4px;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
text-overflow: ellipsis;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
`,
|
|
123
|
+
fileSize: import_css.css`
|
|
124
|
+
font-size: 11px;
|
|
125
|
+
color: #8c8c8c;
|
|
126
|
+
`,
|
|
127
|
+
progress: import_css.css`
|
|
128
|
+
margin-top: 4px;
|
|
129
|
+
|
|
130
|
+
.ant-progress-inner {
|
|
131
|
+
height: 4px !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.ant-progress-bg {
|
|
135
|
+
height: 4px !important;
|
|
136
|
+
}
|
|
137
|
+
`,
|
|
138
|
+
fileRemoveBtn: import_css.css`
|
|
139
|
+
position: absolute;
|
|
140
|
+
top: -6px;
|
|
141
|
+
right: -6px;
|
|
142
|
+
width: 18px;
|
|
143
|
+
height: 18px;
|
|
144
|
+
border-radius: 50%;
|
|
145
|
+
background: rgba(0, 0, 0, 0.75);
|
|
146
|
+
color: #fff;
|
|
147
|
+
border: none;
|
|
148
|
+
display: flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
justify-content: center;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
z-index: 1;
|
|
153
|
+
padding: 0;
|
|
154
|
+
font-size: 10px;
|
|
155
|
+
transition: all 0.2s ease;
|
|
156
|
+
|
|
157
|
+
&:hover {
|
|
158
|
+
background: rgba(0, 0, 0, 0.9);
|
|
159
|
+
transform: scale(1.1);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&:disabled {
|
|
163
|
+
opacity: 0.5;
|
|
164
|
+
cursor: not-allowed;
|
|
165
|
+
}
|
|
166
|
+
`,
|
|
167
|
+
fileLink: import_css.css`
|
|
168
|
+
display: flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
gap: 8px;
|
|
171
|
+
color: rgba(0, 0, 0, 0.85);
|
|
172
|
+
text-decoration: none;
|
|
173
|
+
font-size: 13px;
|
|
174
|
+
|
|
175
|
+
&:hover {
|
|
176
|
+
color: #1677ff;
|
|
177
|
+
}
|
|
178
|
+
`,
|
|
179
|
+
mediaWrapper: import_css.css`
|
|
180
|
+
margin-top: 6px;
|
|
181
|
+
`
|
|
182
|
+
}));
|
|
183
|
+
var styles_default = useStyles;
|
|
184
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
185
|
+
0 && (module.exports = {
|
|
186
|
+
useStyles
|
|
187
|
+
});
|
|
188
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/FileGallery/styles.tsx"],
|
|
4
|
+
"sourcesContent": ["import { css } from \"@emotion/css\";\nimport { withBasicStyles } from \"@/styles/common\";\n\nexport const useStyles = withBasicStyles(() => ({\n container: css`\n padding: 12px 0;\n display: flex;\n flex-direction: column;\n gap: 12px;\n\n &.align-right {\n align-items: flex-end;\n }\n `,\n\n fileList: css`\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n `,\n\n fileCard: css`\n position: relative;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 6px 12px;\n background: #fafafa;\n border: 1px solid #f0f0f0;\n border-radius: 8px;\n min-width: 260px;\n max-width: 280px;\n min-height: 64px;\n transition: all 0.2s ease;\n\n &:hover {\n background: #f5f5f5;\n border-color: #e0e0e0;\n }\n `,\n\n imageThumbnail: css`\n position: relative;\n width: 44px;\n height: 44px;\n flex-shrink: 0;\n border-radius: 4px;\n overflow: hidden;\n background-color: #f5f5f5;\n border: 1px solid rgba(0, 0, 0, 0.06);\n\n .ant-image {\n width: 100% !important;\n height: 100% !important;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n display: block !important;\n }\n `,\n\n imageOverlay: css`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.05);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n `,\n\n fileIcon: css`\n font-size: 24px;\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n `,\n\n fileInfo: css`\n flex: 1;\n min-width: 0;\n overflow: hidden;\n `,\n\n fileName: css`\n font-size: 13px;\n font-weight: 500;\n color: #262626;\n margin-bottom: 4px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n\n fileSize: css`\n font-size: 11px;\n color: #8c8c8c;\n `,\n\n progress: css`\n margin-top: 4px;\n\n .ant-progress-inner {\n height: 4px !important;\n }\n\n .ant-progress-bg {\n height: 4px !important;\n }\n `,\n\n fileRemoveBtn: css`\n position: absolute;\n top: -6px;\n right: -6px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.75);\n color: #fff;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 1;\n padding: 0;\n font-size: 10px;\n transition: all 0.2s ease;\n\n &:hover {\n background: rgba(0, 0, 0, 0.9);\n transform: scale(1.1);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n `,\n\n fileLink: css`\n display: flex;\n align-items: center;\n gap: 8px;\n color: rgba(0, 0, 0, 0.85);\n text-decoration: none;\n font-size: 13px;\n\n &:hover {\n color: #1677ff;\n }\n `,\n\n mediaWrapper: css`\n margin-top: 6px;\n `,\n}));\n\nexport default useStyles;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAgC;AAEzB,IAAM,gBAAY,+BAAgB,OAAO;AAAA,EAC9C,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWX,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBV,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BhB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAad,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUV,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYV,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8Bf,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaV,cAAc;AAAA;AAAA;AAGhB,EAAE;AAEF,IAAO,iBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -40,7 +40,7 @@ var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
|
|
|
40
40
|
var import_styles = require("./styles");
|
|
41
41
|
var import_MarkdownRender = __toESM(require("./components/MarkdownRender"));
|
|
42
42
|
var import_FunctionCallRender = __toESM(require("./components/FunctionCallRender"));
|
|
43
|
-
var import_FileGallery = __toESM(require("
|
|
43
|
+
var import_FileGallery = __toESM(require("../FileGallery"));
|
|
44
44
|
var import_XAiThoughtChain = __toESM(require("../XAiThoughtChain"));
|
|
45
45
|
var import_utils = require("../../utils");
|
|
46
46
|
var import_jsx_runtime = require("react/jsx-runtime");
|