diff --git a/css/style.css b/css/style.css index e004ec2..8d90aa5 100644 --- a/css/style.css +++ b/css/style.css @@ -739,6 +739,24 @@ body::before { margin-top: 8px; } +/* 消息内的文件 chip 展示 */ +.msg-files { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 8px; +} + +.msg-files .file-chip { + background: rgba(123, 47, 247, 0.08); + border-color: rgba(123, 47, 247, 0.2); +} + +.msg-files .file-chip:hover { + border-color: rgba(123, 47, 247, 0.35); + background: rgba(123, 47, 247, 0.12); +} + .msg-img { max-width: 200px; max-height: 200px; diff --git a/js/components/chat-area.js b/js/components/chat-area.js index 098b29b..b9f5421 100644 --- a/js/components/chat-area.js +++ b/js/components/chat-area.js @@ -9,6 +9,28 @@ import { escapeHtml, formatTime, downloadFile } from '../utils.js'; let chatAreaEl, messagesContainerEl, emptyStateEl; +/** 根据文件名返回合适的图标 */ +function getFileIcon(filename) { + const ext = filename.split('.').pop().toLowerCase(); + const iconMap = { + py: '🐍', pyw: '🐍', pyi: '🐍', + js: '💛', mjs: '💛', cjs: '💛', + ts: '🔷', tsx: '⚛️', jsx: '⚛️', + java: '☕', go: '🐹', rs: '🦀', rb: '💎', + php: '🐘', sh: '🐚', bash: '🐚', zsh: '🐚', + html: '🌐', htm: '🌐', css: '🎨', svg: '🎨', + json: '📋', yaml: '📋', yml: '📋', toml: '📋', + xml: '📰', sql: '🗃️', md: '📝', markdown: '📝', + txt: '📄', log: '📜', csv: '📊', tsv: '📊', + cpp: '⚙️', c: '⚙️', h: '⚙️', hpp: '⚙️', + swift: '🍎', kt: '🤖', lua: '🌙', + dockerfile: '🐳', makefile: '🔨', + }; + if (filename.toLowerCase() === 'dockerfile') return '🐳'; + if (filename.toLowerCase() === 'makefile') return '🔨'; + return iconMap[ext] || '📄'; +} + export function initChatArea() { chatAreaEl = document.querySelector('#chatArea'); messagesContainerEl = document.querySelector('#messagesContainer'); @@ -98,15 +120,27 @@ export function appendMessageDOM(msg, index) { // 图片 if (msg.images && msg.images.length > 0) { contentHtml += '
${formatTime(session.createdAt)} · ${session.model}