wanghanlin
/
RAG
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(client): SDK 悬浮窗口对话视觉对齐 TDesign Chat 规范 

- styles.ts 对齐气泡圆角/头像/时间戳/输入框/发送按钮/加载态/操作栏/来源卡片/快捷芯片视觉
- dom.ts 微调时间戳与操作栏相对位置
- 保持零依赖 IIFE、csk-* 类名零增删改、主色变量与暗色模式同步
master
wanghanlin 6 days ago
parent
940caedea8
commit
2f09b3fabf
2 changed files with 132 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      client/src/dom.ts
  2. 231
      client/src/styles.ts

10
client/src/dom.ts
View File

@ -831,8 +831,8 @@ export function renderUserBubble(container: HTMLElement, text: string, timestamp
time.className = 'csk-msg__time';
time.textContent = formatTime(timestamp);
content.appendChild(bubble);
content.appendChild(time);
content.appendChild(bubble);
wrapper.appendChild(avatar);
wrapper.appendChild(content);
container.appendChild(wrapper);
@ -866,11 +866,11 @@ export function renderAIBubble(container: HTMLElement, text: string, timestamp:
time.className = 'csk-msg__time';
time.textContent = formatTime(timestamp);
content.appendChild(time);
content.appendChild(bubble);
// 元信息行：时间戳居左，操作按钮居右
// 操作栏：位于气泡下方
const meta = document.createElement('div');
meta.className = 'csk-msg__meta';
meta.appendChild(time);
meta.appendChild(buildAIActions(bubble, wrapper));
content.appendChild(meta);
wrapper.appendChild(avatar);
@ -904,11 +904,11 @@ export function createEmptyAIBubble(container: HTMLElement, timestamp: number, m
time.className = 'csk-msg__time';
time.textContent = formatTime(timestamp);
content.appendChild(time);
content.appendChild(bubble);
// 元信息行：时间戳居左，操作按钮居右
// 操作栏：位于气泡下方
const meta = document.createElement('div');
meta.className = 'csk-msg__meta';
meta.appendChild(time);
meta.appendChild(buildAIActions(bubble, wrapper));
content.appendChild(meta);
wrapper.appendChild(avatar);

231
client/src/styles.ts
View File

@ -27,16 +27,19 @@ function cssVars(config: ResolvedConfig): string {
--csk-primary-light: ${lighter};
--csk-primary-rgb: ${rgb};
--csk-bg-user: linear-gradient(135deg, ${config.primaryColor}, ${darker});
--csk-bg-ai: #ffffff;
--csk-bg-ai: #F3F3F3;
--csk-text-user: #ffffff;
--csk-text-ai: #1F2937;
--csk-text-ai: rgba(0, 0, 0, 0.9);
--csk-window-width: ${config.width}px;
--csk-window-height: ${config.height}px;
--csk-radius: 16px;
--csk-shadow-window: 0 12px 48px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
--csk-shadow-bubble: 0 1px 2px rgba(15, 23, 42, 0.06);
--csk-border: #ECEEF2;
--csk-bg-app: #F6F7F9;
--csk-shadow-bubble: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08);
--csk-border: #E8E8E8;
--csk-border-strong: #DDDDDD;
--csk-text-secondary: rgba(0, 0, 0, 0.6);
--csk-text-muted: rgba(0, 0, 0, 0.4);
--csk-bg-app: #FFFFFF;
`;
}
@ -320,7 +323,7 @@ function getStyles(config: ResolvedConfig): string {
.csk-messages {
flex: 1;
overflow-y: auto;
padding: 20px 16px 12px;
padding: 16px;
background: var(--csk-bg-app);
scroll-behavior: smooth;
}
@ -392,7 +395,7 @@ function getStyles(config: ResolvedConfig): string {
/* 消息气泡 */
.csk-msg {
display: flex;
margin-bottom: 12px;
margin-bottom: 16px;
max-width: 100%;
word-break: break-word;
animation: csk-msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
@ -406,8 +409,8 @@ function getStyles(config: ResolvedConfig): string {
align-items: flex-start;
}
.csk-msg__avatar {
width: 30px;
height: 30px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
@ -426,17 +429,19 @@ function getStyles(config: ResolvedConfig): string {
background: var(--csk-bg-user);
color: #fff;
}
/* AI 头像与气泡顶部对齐（时间戳位于气泡上方时下移） */
.csk-msg--ai .csk-msg__avatar { margin-top: 20px; }
.csk-msg__content {
display: flex;
flex-direction: column;
min-width: 0;
max-width: calc(100% - 46px);
max-width: calc(100% - 48px);
}
.csk-msg--user .csk-msg__content { align-items: flex-end; }
.csk-msg--ai .csk-msg__content { align-items: flex-start; }
.csk-msg__bubble {
padding: 10px 14px;
border-radius: 16px;
padding: 12px 16px;
border-radius: 12px;
font-size: 14px;
line-height: 1.6;
box-shadow: var(--csk-shadow-bubble);
@ -444,30 +449,27 @@ function getStyles(config: ResolvedConfig): string {
.csk-msg--user .csk-msg__bubble {
background: var(--csk-bg-user);
color: var(--csk-text-user);
border-radius: 16px 16px 4px 16px;
}
.csk-msg--ai .csk-msg__bubble {
background: var(--csk-bg-ai);
color: var(--csk-text-ai);
border-radius: 16px 16px 16px 4px;
border: 1px solid var(--csk-border);
}
.csk-msg__time {
font-size: 11px;
color: #9CA3AF;
margin-top: 3px;
padding: 0 4px;
font-size: 12px;
line-height: 1.4;
color: var(--csk-text-muted);
margin-bottom: 4px;
padding: 0 2px;
user-select: none;
}
/* 元信息行：时间戳居左，操作按钮居右，共用一行 */
/* 操作栏容器：位于气泡下方 */
.csk-msg__meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3px;
margin-top: 6px;
width: 100%;
}
.csk-msg__meta .csk-msg__time { margin-top: 0; }
@keyframes csk-msg-in {
from { opacity: 0; transform: translateY(8px); }
@ -482,12 +484,12 @@ function getStyles(config: ResolvedConfig): string {
.csk-loading {
display: flex;
align-items: center;
margin-bottom: 12px;
margin-bottom: 16px;
animation: csk-msg-in 0.28s ease;
}
.csk-loading__avatar {
width: 30px;
height: 30px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
color: var(--csk-primary);
@ -501,28 +503,37 @@ function getStyles(config: ResolvedConfig): string {
}
.csk-loading__avatar svg { width: 18px; height: 18px; }
.csk-loading__bubble {
background: #fff;
border: 1px solid var(--csk-border);
border-radius: 16px 16px 16px 4px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 5px;
position: relative;
width: 40px;
height: 40px;
padding: 0;
background: var(--csk-bg-ai);
border-radius: 12px;
box-shadow: var(--csk-shadow-bubble);
}
.csk-loading__dot {
width: 7px;
height: 7px;
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #B4B9C2;
animation: csk-bounce 1.4s ease-in-out infinite both;
background: var(--csk-primary);
}
.csk-loading__dot:nth-child(1) { animation-delay: 0s; }
.csk-loading__dot:nth-child(2) { animation-delay: 0.16s; }
.csk-loading__dot:nth-child(3) { animation-delay: 0.32s; }
/* TDesign 三点加载：三圆呈三角排列并向中心聚拢 */
.csk-loading__dot:nth-child(1) { top: 9px; left: 16px; animation: csk-dot-top 0.6s ease-in-out alternate infinite; }
.csk-loading__dot:nth-child(2) { bottom: 9px; left: 9px; animation: csk-dot-left 0.6s ease-in-out alternate infinite; }
.csk-loading__dot:nth-child(3) { bottom: 9px; right: 9px; animation: csk-dot-right 0.6s ease-in-out alternate infinite; }
@keyframes csk-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
40% { transform: scale(1); opacity: 1; }
@keyframes csk-dot-top {
from { transform: scale(1); top: 9px; }
to { transform: scale(1.75); top: 16px; }
}
@keyframes csk-dot-left {
from { transform: scale(1); bottom: 9px; left: 9px; }
to { transform: scale(1.75); bottom: 16px; left: 16px; }
}
@keyframes csk-dot-right {
from { transform: scale(1); bottom: 9px; right: 9px; }
to { transform: scale(1.75); bottom: 16px; right: 16px; }
}
/* ========== 输入区 ========== */
@ -536,16 +547,23 @@ function getStyles(config: ResolvedConfig): string {
display: flex;
align-items: flex-end;
gap: 8px;
background: var(--csk-bg-app);
border: 1px solid var(--csk-border);
border-radius: 14px;
background: #fff;
border: 1px solid var(--csk-border-strong);
border-radius: 16px;
padding: 6px 6px 6px 14px;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
transition: border-color 0.2s, box-shadow 0.2s;
}
.csk-input-wrap:hover {
border-color: var(--csk-primary);
box-shadow: var(--csk-shadow-bubble);
}
.csk-input-wrap--focus {
border-color: var(--csk-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(var(--csk-primary-rgb), 0.12);
box-shadow: 0 0 0 2px rgba(var(--csk-primary-rgb), 0.2);
}
.csk-input-wrap--focus:hover {
box-shadow: 0 0 0 2px rgba(var(--csk-primary-rgb), 0.2);
}
.csk-input {
flex: 1;
@ -561,17 +579,17 @@ function getStyles(config: ResolvedConfig): string {
line-height: 1.5;
color: #1F2937;
}
.csk-input::placeholder { color: #9CA3AF; }
.csk-input::placeholder { color: var(--csk-text-muted); }
.csk-root .csk-input:focus-visible { outline: none; }
.csk-send-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
width: 32px;
height: 32px;
min-width: 32px;
border: none;
border-radius: 10px;
border-radius: 50%;
background: var(--csk-bg-user);
color: #fff;
cursor: pointer;
@ -584,7 +602,7 @@ function getStyles(config: ResolvedConfig): string {
}
.csk-send-btn:active:not(:disabled) { transform: scale(0.92); }
.csk-send-btn:disabled {
background: #D1D5DB;
background: var(--csk-border-strong);
box-shadow: none;
cursor: not-allowed;
opacity: 0.7;
@ -667,25 +685,25 @@ function getStyles(config: ResolvedConfig): string {
/* ========== P1: RAG 引用来源卡片 ========== */
.csk-sources {
margin-top: 6px;
margin-top: 8px;
border: 1px solid var(--csk-border);
border-radius: 12px;
border-radius: 8px;
overflow: hidden;
font-size: 12px;
max-width: 100%;
background: #FAFBFC;
background: #fff;
}
.csk-sources__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: #F3F4F7;
background: var(--csk-bg-ai);
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.csk-sources__header:hover { background: #ECEEF2; }
.csk-sources__header:hover { background: var(--csk-border); }
.csk-sources__title {
display: flex;
align-items: center;
@ -710,7 +728,7 @@ function getStyles(config: ResolvedConfig): string {
transition: background 0.15s;
}
.csk-source-item:last-child { border-bottom: none; }
.csk-source-item:hover { background: #fff; }
.csk-source-item:hover { background: var(--csk-bg-ai); }
.csk-source-item__name {
font-weight: 500;
color: #1F2937;
@ -990,23 +1008,21 @@ function getStyles(config: ResolvedConfig): string {
max-width: 320px;
}
.csk-quick-reply {
border: 1px solid var(--csk-border);
background: #fff;
color: #374151;
font-size: 12.5px;
padding: 7px 13px;
border-radius: 999px;
border: 1px solid transparent;
background: var(--csk-bg-ai);
color: var(--csk-text-secondary);
font-size: 12px;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
line-height: 1.3;
transition: all 0.18s ease;
transition: all 0.15s ease;
max-width: 100%;
}
.csk-quick-reply:hover {
border-color: var(--csk-primary);
color: var(--csk-primary);
background: rgba(var(--csk-primary-rgb), 0.06);
transform: translateY(-1px);
background: var(--csk-border);
color: var(--csk-text-ai);
}
.csk-quick-reply:active { transform: scale(0.96); }
@ -1021,32 +1037,34 @@ function getStyles(config: ResolvedConfig): string {
gap: 4px;
}
.csk-suggestion-item {
border: 1px solid var(--csk-border);
background: #fff;
color: #374151;
border: 1px solid transparent;
background: var(--csk-bg-ai);
color: var(--csk-text-secondary);
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
line-height: 1.3;
transition: all 0.18s ease;
transition: all 0.15s ease;
max-width: 100%;
text-align: left;
}
.csk-suggestion-item:hover {
border-color: var(--csk-primary);
color: var(--csk-primary);
background: rgba(var(--csk-primary-rgb), 0.06);
transform: translateY(-1px);
background: var(--csk-border);
color: var(--csk-text-ai);
}
.csk-suggestion-item:active { transform: scale(0.96); }
/* ========== AI 消息操作条 ========== */
/* ========== AI 消息操作条（TDesign 操作条：浅灰胶囊容器） ========== */
.csk-msg__actions {
display: flex;
gap: 2px;
padding: 0 2px;
gap: 0;
padding: 3px;
background: var(--csk-bg-ai);
border: 1px solid var(--csk-border-strong);
border-radius: 6px;
overflow: hidden;
opacity: 0;
transition: opacity 0.15s ease;
}
@ -1056,18 +1074,18 @@ function getStyles(config: ResolvedConfig): string {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #9CA3AF;
border-radius: 6px;
color: var(--csk-text-secondary);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
transition: background 0.15s ease, color 0.15s ease;
}
.csk-action-btn:hover {
background: #F3F4F6;
color: #374151;
background: var(--csk-border);
color: var(--csk-text-ai);
}
.csk-action-btn--done { color: #10B981; }
.csk-action-btn:active { transform: scale(0.9); }
@ -1239,6 +1257,9 @@ function getStyles(config: ResolvedConfig): string {
--csk-bg-ai: #1E1E2E;
--csk-text-ai: #E2E8F0;
--csk-border: #3B3B52;
--csk-border-strong: #454560;
--csk-text-secondary: rgba(255, 255, 255, 0.6);
--csk-text-muted: rgba(255, 255, 255, 0.4);
--csk-bg-app: #141421;
color: #E2E8F0;
}
@ -1256,12 +1277,13 @@ function getStyles(config: ResolvedConfig): string {
border-color: var(--csk-border);
}
.csk-dark .csk-input-area { background: #1A1A2E; border-top-color: var(--csk-border); }
.csk-dark .csk-input-wrap { background: var(--csk-bg-app); border-color: var(--csk-border); }
.csk-dark .csk-input-wrap { background: var(--csk-bg-app); border-color: var(--csk-border-strong); }
.csk-dark .csk-input-wrap:hover { border-color: var(--csk-primary); box-shadow: none; }
.csk-dark .csk-input-wrap--focus { background: #1A1A2E; border-color: var(--csk-primary); }
.csk-dark .csk-input { color: #E2E8F0; }
.csk-dark .csk-loading__avatar { background: var(--csk-bg-ai); border-color: var(--csk-border); }
.csk-dark .csk-loading__bubble { background: var(--csk-bg-ai); border-color: var(--csk-border); }
.csk-dark .csk-loading__dot { background: #6B7280; }
.csk-dark .csk-loading__dot { background: var(--csk-primary-light); }
.csk-dark .csk-category-bar { background: #1A1A2E; border-top-color: var(--csk-border); }
.csk-dark .csk-category-select { background-color: var(--csk-bg-app); border-color: var(--csk-border); color: #E2E8F0; }
.csk-dark .csk-sources { background: #1E1E2E; border-color: var(--csk-border); }
@ -1279,6 +1301,7 @@ function getStyles(config: ResolvedConfig): string {
.csk-dark .csk-history-item__meta { color: #6B7280; }
.csk-dark .csk-history-item--active { background: rgba(var(--csk-primary-rgb), 0.15); }
.csk-dark .csk-history-item--active:hover { background: rgba(var(--csk-primary-rgb), 0.22); }
.csk-dark .csk-msg__actions { background: var(--csk-bg-ai); border-color: var(--csk-border-strong); }
.csk-dark .csk-action-btn:hover { background: #2D2D48; color: #E2E8F0; }
.csk-dark .csk-clear-btn { background: var(--csk-bg-app); border-color: var(--csk-border); color: #9CA3AF; }
.csk-dark .csk-clear-btn:hover { background: #3B1A1A; border-color: #7F1D1D; color: #FCA5A5; }
@ -1299,9 +1322,9 @@ function getStyles(config: ResolvedConfig): string {
.csk-dark .csk-teaser::after { border-top-color: #2D2D48; }
.csk-dark .csk-teaser__close { color: #6B7280; }
.csk-dark .csk-teaser__close:hover { color: #9CA3AF; }
.csk-dark .csk-feedback-btn { background: rgba(var(--csk-primary-rgb), 0.1); color: #9CA3AF; }
.csk-dark .csk-feedback-btn:hover { background: rgba(var(--csk-primary-rgb), 0.2); color: var(--csk-primary-light); }
.csk-dark .csk-feedback-btn--active { background: rgba(var(--csk-primary-rgb), 0.28); color: var(--csk-primary-light); }
.csk-dark .csk-feedback-btn { background: transparent; color: var(--csk-text-secondary); }
.csk-dark .csk-feedback-btn:hover { background: #2D2D48; color: #E2E8F0; }
.csk-dark .csk-feedback-btn--active { background: transparent; color: var(--csk-primary-light); }
.csk-dark .csk-history-panel__search-wrap { background: var(--csk-bg-app); border-color: var(--csk-border); }
.csk-dark .csk-history-panel__search-wrap:focus-within { border-color: var(--csk-primary); }
.csk-dark .csk-history-panel__search { color: #E2E8F0; }
@ -1407,22 +1430,22 @@ function getStyles(config: ResolvedConfig): string {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
width: 24px;
height: 24px;
border: none;
background: rgba(var(--csk-primary-rgb), 0.08);
color: #9CA3AF;
border-radius: 6px;
background: transparent;
color: var(--csk-text-secondary);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
transition: background 0.15s ease, color 0.15s ease;
padding: 0;
}
.csk-feedback-btn:hover { background: rgba(var(--csk-primary-rgb), 0.18); color: var(--csk-primary); }
.csk-feedback-btn:hover { background: var(--csk-border); color: var(--csk-text-ai); }
.csk-feedback-btn--active {
background: rgba(var(--csk-primary-rgb), 0.28);
background: transparent;
color: var(--csk-primary);
}
.csk-feedback-btn--active.down { background: #FEF2F2; color: #EF4444; }
.csk-feedback-btn--active.down { color: #D54941; }
.csk-feedback-btn:active { transform: scale(0.9); }
.csk-msg--streaming .csk-feedback-btn { display: none; }

Write Preview
Loading…
Cancel
Save