super-agent-sdk 1.0.7 → 1.0.9
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/README.md +242 -93
- package/dist/index.cjs +3 -3
- package/dist/index.d.ts +7 -2
- package/dist/index.mjs +90 -85
- package/dist/widget.cjs +136 -666
- package/dist/widget.d.ts +126 -12
- package/dist/widget.mjs +2093 -2018
- package/package.json +4 -1
package/dist/widget.d.ts
CHANGED
|
@@ -32,13 +32,41 @@ export declare interface ArtifactFile {
|
|
|
32
32
|
summary?: string;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
/** SDK 内置图片资产（CDN 绝对路径），可通过 props 覆盖；宿主配置 capabilities/quickLinks 的 icon 也可复用 */
|
|
36
|
+
export declare const ASSETS: {
|
|
37
|
+
readonly recently: "https://ehr-web.netease.com/ehr-web/erh-super-agent/recently.svg";
|
|
38
|
+
readonly home: "https://ehr-web.netease.com/ehr-web/erh-super-agent/home.svg";
|
|
39
|
+
readonly mergeWindow: "https://ehr-web.netease.com/ehr-web/erh-super-agent/merge_window.svg";
|
|
40
|
+
readonly spiltWindow: "https://ehr-web.netease.com/ehr-web/erh-super-agent/spilt_window.svg";
|
|
41
|
+
readonly close: "https://ehr-web.netease.com/ehr-web/erh-super-agent/close.svg";
|
|
42
|
+
readonly message: "https://ehr-web.netease.com/ehr-web/erh-super-agent/message.svg";
|
|
43
|
+
readonly messageCreate: "https://ehr-web.netease.com/ehr-web/erh-super-agent/message_create.svg";
|
|
44
|
+
readonly customerService: "https://ehr-web.netease.com/ehr-web/erh-super-agent/customer_service.svg";
|
|
45
|
+
readonly sendSolid: "https://ehr-web.netease.com/ehr-web/erh-super-agent/send_solid.svg";
|
|
46
|
+
readonly capabilityIcons: readonly ["https://ehr-web.netease.com/ehr-web/erh-super-agent/icon1.png", "https://ehr-web.netease.com/ehr-web/erh-super-agent/icon2.png", "https://ehr-web.netease.com/ehr-web/erh-super-agent/icon3.png"];
|
|
47
|
+
readonly triggerLogo: "https://ehr-web.netease.com/ehr-web/erh-super-agent/HRlogo.png";
|
|
48
|
+
readonly logo: "https://ehr-web.netease.com/ehr-web/erh-super-agent/HRlogo2.png";
|
|
49
|
+
readonly assistantAvatarGenerating: "https://ehr-web.netease.com/ehr-web/erh-super-agent/profile0.gif";
|
|
50
|
+
readonly assistantAvatar: "https://ehr-web.netease.com/ehr-web/erh-super-agent/profile1.png";
|
|
51
|
+
};
|
|
52
|
+
|
|
35
53
|
export declare interface AvatarConfig {
|
|
36
|
-
/** Assistant avatar: URL
|
|
54
|
+
/** Assistant avatar: image URL（http/https/data/blob/绝对或相对路径）、emoji 或文本；默认 SDK 内置头像 */
|
|
37
55
|
assistant?: string;
|
|
38
|
-
/** User avatar: URL
|
|
56
|
+
/** User avatar: image URL、emoji 或文本；未配置则不显示用户头像 */
|
|
39
57
|
user?: string;
|
|
40
58
|
}
|
|
41
59
|
|
|
60
|
+
/** 首页能力清单条目 */
|
|
61
|
+
export declare interface CapabilityItem {
|
|
62
|
+
/** 图标 URL，不传则不渲染图标 */
|
|
63
|
+
icon?: string;
|
|
64
|
+
/** 能力名称，如「咨询」 */
|
|
65
|
+
label: string;
|
|
66
|
+
/** 能力描述，如「法律法规/政策制度/流程指引」 */
|
|
67
|
+
desc?: string;
|
|
68
|
+
}
|
|
69
|
+
|
|
42
70
|
declare interface ChatEvent {
|
|
43
71
|
type: "user" | "thinking" | "ai" | "tool_call" | "tool_result" | "done" | "stop" | "error" | "interrupt";
|
|
44
72
|
content: string;
|
|
@@ -87,6 +115,8 @@ export declare interface ChatState {
|
|
|
87
115
|
allArtifacts: ArtifactFile[];
|
|
88
116
|
activePreviewArtifact: ArtifactFile | null;
|
|
89
117
|
hasMore: boolean;
|
|
118
|
+
conversationsLoading: boolean;
|
|
119
|
+
messagesLoading: boolean;
|
|
90
120
|
sendMessage: (content: string) => void;
|
|
91
121
|
stop: () => void;
|
|
92
122
|
regenerate: () => void;
|
|
@@ -96,6 +126,8 @@ export declare interface ChatState {
|
|
|
96
126
|
renameConversation: (sessionId: string, title: string) => void;
|
|
97
127
|
loadMoreConversations: () => void;
|
|
98
128
|
toggleThreadList: () => void;
|
|
129
|
+
/** 直接设置会话列表开合（floating 大窗/小窗切换时恢复各模式偏好） */
|
|
130
|
+
setThreadListOpen: (open: boolean) => void;
|
|
99
131
|
toggleArtifactDrawer: () => void;
|
|
100
132
|
openArtifactPreview: (artifact: ArtifactFile) => void;
|
|
101
133
|
feedback: (messageId: string, feedback: 'like' | 'dislike', options?: {
|
|
@@ -115,6 +147,10 @@ declare interface ChatWidgetProps extends MountOptions {
|
|
|
115
147
|
onOpenChange?: (isOpen: boolean) => void;
|
|
116
148
|
}
|
|
117
149
|
|
|
150
|
+
/**
|
|
151
|
+
* 底部输入区（样式对齐 hr-for-help inputArea）：
|
|
152
|
+
* 渐变描边输入框（聚焦/有内容时渐变点亮）+ 发送/停止按钮 + 底部 AI 提示文案。
|
|
153
|
+
*/
|
|
118
154
|
export declare function Composer(): default_2.JSX.Element;
|
|
119
155
|
|
|
120
156
|
export declare interface ComposerProps {
|
|
@@ -163,32 +199,51 @@ export declare interface EventHooks {
|
|
|
163
199
|
declare interface FormField {
|
|
164
200
|
name: string;
|
|
165
201
|
label: string;
|
|
166
|
-
type: 'text' | 'number' | 'password' | 'textarea' | 'select' | 'date';
|
|
202
|
+
type: 'text' | 'number' | 'password' | 'textarea' | 'select' | 'multiSelect' | 'date';
|
|
167
203
|
required?: boolean;
|
|
168
204
|
placeholder?: string;
|
|
169
205
|
defaultValue?: any;
|
|
170
|
-
options?: string
|
|
206
|
+
options?: (string | {
|
|
207
|
+
value: string;
|
|
208
|
+
label: string;
|
|
209
|
+
})[];
|
|
171
210
|
}
|
|
172
211
|
|
|
173
|
-
export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, sidebarDefaultOpen, onClose, avatar, artifactPreview, }: FullpageLayoutProps): default_2.JSX.Element;
|
|
212
|
+
export declare function FullpageLayout({ title, slots, welcomeMessage, suggestedPrompts, capabilities, quickLinks, logo, sidebarDefaultOpen, onClose, avatar, artifactPreview, showTimestamp, }: FullpageLayoutProps): default_2.JSX.Element;
|
|
174
213
|
|
|
175
214
|
declare interface FullpageLayoutProps {
|
|
176
215
|
title: string;
|
|
177
216
|
slots: Slots;
|
|
178
217
|
welcomeMessage?: string;
|
|
179
218
|
suggestedPrompts?: string[];
|
|
219
|
+
capabilities?: CapabilityItem[];
|
|
220
|
+
quickLinks?: QuickLinkItem[];
|
|
221
|
+
logo?: string;
|
|
180
222
|
sidebarDefaultOpen?: boolean;
|
|
181
223
|
onClose?: () => void;
|
|
182
224
|
avatar?: AvatarConfig;
|
|
183
225
|
artifactPreview?: boolean;
|
|
226
|
+
showTimestamp?: boolean;
|
|
184
227
|
}
|
|
185
228
|
|
|
186
|
-
export declare function Header({
|
|
229
|
+
export declare function Header({ onClose, onToggleThreadList, isMaximized, onToggleMaximize, showHome, onHome, showClose, artifactCount, onToggleArtifactDrawer, }: InternalHeaderProps): JSX_2.Element;
|
|
187
230
|
|
|
188
231
|
export declare interface HeaderProps {
|
|
189
232
|
title: string;
|
|
190
233
|
onClose: () => void;
|
|
191
234
|
onToggleThreadList: () => void;
|
|
235
|
+
/** floating 模式：是否处于大窗（最大化）状态 */
|
|
236
|
+
isMaximized?: boolean;
|
|
237
|
+
/** floating 模式：大窗/小窗切换回调 */
|
|
238
|
+
onToggleMaximize?: () => void;
|
|
239
|
+
/** floating 模式：是否显示回到首页按钮（聊天态显示） */
|
|
240
|
+
showHome?: boolean;
|
|
241
|
+
/** floating 模式：回到首页回调（新会话） */
|
|
242
|
+
onHome?: () => void;
|
|
243
|
+
/** 会话产物数量（artifactPreview 开启时提供）；> 0 时可展示产物入口 */
|
|
244
|
+
artifactCount?: number;
|
|
245
|
+
/** 打开/关闭产物预览抽屉（artifactPreview 开启时提供） */
|
|
246
|
+
onToggleArtifactDrawer?: () => void;
|
|
192
247
|
}
|
|
193
248
|
|
|
194
249
|
export declare function Icon({ name, size, color, className, style }: IconProps): JSX_2.Element;
|
|
@@ -205,6 +260,14 @@ declare interface InternalHeaderProps {
|
|
|
205
260
|
title: string;
|
|
206
261
|
onClose: () => void;
|
|
207
262
|
onToggleThreadList: () => void;
|
|
263
|
+
/** floating 模式：大窗状态 */
|
|
264
|
+
isMaximized?: boolean;
|
|
265
|
+
/** floating 模式：大窗/小窗切换 */
|
|
266
|
+
onToggleMaximize?: () => void;
|
|
267
|
+
/** floating 模式：聊天态显示回到首页 */
|
|
268
|
+
showHome?: boolean;
|
|
269
|
+
/** floating 模式：回到首页（新会话） */
|
|
270
|
+
onHome?: () => void;
|
|
208
271
|
showClose?: boolean;
|
|
209
272
|
artifactCount?: number;
|
|
210
273
|
onToggleArtifactDrawer?: () => void;
|
|
@@ -217,6 +280,8 @@ declare interface InternalMessageProps {
|
|
|
217
280
|
slots: Slots;
|
|
218
281
|
avatar?: AvatarConfig;
|
|
219
282
|
artifactPreview?: boolean;
|
|
283
|
+
/** 显示消息时间戳（默认 false，对齐 hr-for-help 不显示） */
|
|
284
|
+
showTimestamp?: boolean;
|
|
220
285
|
}
|
|
221
286
|
|
|
222
287
|
export declare function InterruptCard({ interrupt, resolved, response, onRespond }: InterruptCardProps): JSX_2.Element;
|
|
@@ -266,7 +331,7 @@ declare interface ListConversationsResult {
|
|
|
266
331
|
total: number;
|
|
267
332
|
}
|
|
268
333
|
|
|
269
|
-
export declare function Message({ message, isStreaming, isLast, slots, avatar, artifactPreview }: InternalMessageProps): JSX_2.Element;
|
|
334
|
+
export declare function Message({ message, isStreaming, isLast, slots, avatar, artifactPreview, showTimestamp, }: InternalMessageProps): JSX_2.Element;
|
|
270
335
|
|
|
271
336
|
declare type MessagePart = {
|
|
272
337
|
type: "text";
|
|
@@ -306,6 +371,8 @@ export declare interface MessageProps {
|
|
|
306
371
|
onCopy: () => void;
|
|
307
372
|
onRegenerate: () => void;
|
|
308
373
|
onFeedback?: (messageId: string, feedback: 'like' | 'dislike') => void;
|
|
374
|
+
/** 是否显示消息时间戳（mount 配置 showTimestamp），默认 false 不显示 */
|
|
375
|
+
showTimestamp?: boolean;
|
|
309
376
|
}
|
|
310
377
|
|
|
311
378
|
export declare function mount(target: string | HTMLElement, options: MountOptions): WidgetInstance;
|
|
@@ -322,6 +389,28 @@ export declare interface MountOptions {
|
|
|
322
389
|
sidebarDefaultOpen?: boolean;
|
|
323
390
|
avatar?: AvatarConfig;
|
|
324
391
|
artifactPreview?: boolean;
|
|
392
|
+
/** floating 首页：能力清单 */
|
|
393
|
+
capabilities?: CapabilityItem[];
|
|
394
|
+
/** floating 首页：快速入口 */
|
|
395
|
+
quickLinks?: QuickLinkItem[];
|
|
396
|
+
/** floating 首页居中 Logo（URL），默认 SDK 内置 Logo */
|
|
397
|
+
logo?: string;
|
|
398
|
+
/** floating 触发按钮 Logo（URL），默认 SDK 内置 Logo */
|
|
399
|
+
triggerLogo?: string;
|
|
400
|
+
/** 显示消息时间戳，默认 false（对齐 hr-for-help，不显示时间） */
|
|
401
|
+
showTimestamp?: boolean;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/** 首页快速入口条目 */
|
|
405
|
+
export declare interface QuickLinkItem {
|
|
406
|
+
/** 图标 URL，不传则不渲染图标 */
|
|
407
|
+
icon?: string;
|
|
408
|
+
/** 入口名称，如「联系SOC」 */
|
|
409
|
+
label: string;
|
|
410
|
+
/** 点击后发送的消息（如提供则点击即发送该消息） */
|
|
411
|
+
prompt?: string;
|
|
412
|
+
/** 自定义点击行为（优先于 prompt） */
|
|
413
|
+
onClick?: () => void;
|
|
325
414
|
}
|
|
326
415
|
|
|
327
416
|
declare interface SkillInfo {
|
|
@@ -348,6 +437,8 @@ export declare interface Slots {
|
|
|
348
437
|
}
|
|
349
438
|
|
|
350
439
|
declare interface SuperAgentSDK {
|
|
440
|
+
/** 当前 Bot ID（只读） */
|
|
441
|
+
readonly botId: number;
|
|
351
442
|
/** 获取 token（调用 POST {tokenGateway}/v1/token），自动设置内部凭证 */
|
|
352
443
|
getToken(): Promise<string>;
|
|
353
444
|
/** 创建新会话，返回 sessionId */
|
|
@@ -398,9 +489,16 @@ export declare interface ThinkingPartProps {
|
|
|
398
489
|
content: string;
|
|
399
490
|
}
|
|
400
491
|
|
|
401
|
-
export declare function Thread({ slots, welcomeMessage, suggestedPrompts, avatar, artifactPreview }: ThreadProps): JSX_2.Element;
|
|
492
|
+
export declare function Thread({ slots, welcomeMessage, suggestedPrompts, avatar, artifactPreview, capabilities, quickLinks, logo, showTimestamp }: ThreadProps): JSX_2.Element;
|
|
402
493
|
|
|
403
|
-
|
|
494
|
+
/**
|
|
495
|
+
* 窗口内嵌会话侧边栏（布局对齐 hr-for-help historyPanel）：
|
|
496
|
+
* 渐变「新建对话」按钮 + 会话分组列表，hover 显示完整标题 tooltip。
|
|
497
|
+
* 保留重命名 / 删除 / 滚动加载更多能力。
|
|
498
|
+
*/
|
|
499
|
+
export declare function ThreadList({ width }: {
|
|
500
|
+
width?: number;
|
|
501
|
+
}): JSX_2.Element;
|
|
404
502
|
|
|
405
503
|
export declare interface ThreadListProps {
|
|
406
504
|
conversations: Conversation[];
|
|
@@ -419,6 +517,10 @@ declare interface ThreadProps {
|
|
|
419
517
|
suggestedPrompts?: string[];
|
|
420
518
|
avatar?: AvatarConfig;
|
|
421
519
|
artifactPreview?: boolean;
|
|
520
|
+
capabilities?: CapabilityItem[];
|
|
521
|
+
quickLinks?: QuickLinkItem[];
|
|
522
|
+
logo?: string;
|
|
523
|
+
showTimestamp?: boolean;
|
|
422
524
|
}
|
|
423
525
|
|
|
424
526
|
export declare function ToolCallPart({ toolName, toolCallId, args }: ToolCallPartProps): JSX_2.Element;
|
|
@@ -441,12 +543,14 @@ export declare interface ToolResultPartProps {
|
|
|
441
543
|
artifactPreview?: boolean;
|
|
442
544
|
}
|
|
443
545
|
|
|
444
|
-
export declare function Trigger({ isOpen, onClick }: TriggerProps): JSX_2.Element;
|
|
546
|
+
export declare function Trigger({ isOpen, onClick, triggerLogo }: TriggerProps): JSX_2.Element;
|
|
445
547
|
|
|
446
548
|
export declare interface TriggerProps {
|
|
447
549
|
isOpen: boolean;
|
|
448
550
|
onClick: () => void;
|
|
449
551
|
unreadCount?: number;
|
|
552
|
+
/** 触发按钮 Logo（URL），默认 SDK 内置 Logo */
|
|
553
|
+
triggerLogo?: string;
|
|
450
554
|
}
|
|
451
555
|
|
|
452
556
|
declare interface UIMessage {
|
|
@@ -508,12 +612,22 @@ declare interface UseConversationsReturn {
|
|
|
508
612
|
setActiveConversationId: (id: string | null) => void;
|
|
509
613
|
}
|
|
510
614
|
|
|
511
|
-
|
|
615
|
+
/**
|
|
616
|
+
* 首页欢迎视图（布局对齐 hr-for-help）：
|
|
617
|
+
* 居中 Logo（浮动动画）+ 流光渐变标题 + 能力清单 + 建议 chips（交错入场）+ 快速入口
|
|
618
|
+
*/
|
|
619
|
+
export declare function WelcomeScreen({ message, suggestedPrompts, onPromptClick, capabilities, quickLinks, logo }: WelcomeScreenProps): JSX_2.Element;
|
|
512
620
|
|
|
513
621
|
export declare interface WelcomeScreenProps {
|
|
514
622
|
message?: string;
|
|
515
623
|
suggestedPrompts?: string[];
|
|
516
624
|
onPromptClick: (prompt: string) => void;
|
|
625
|
+
/** 首页能力清单（icon + 标签 + 描述），最多展示效果见 hr-for-help */
|
|
626
|
+
capabilities?: CapabilityItem[];
|
|
627
|
+
/** 首页快速入口 */
|
|
628
|
+
quickLinks?: QuickLinkItem[];
|
|
629
|
+
/** 首页居中 Logo（URL），默认 SDK 内置 Logo */
|
|
630
|
+
logo?: string;
|
|
517
631
|
}
|
|
518
632
|
|
|
519
633
|
export declare interface WidgetInstance {
|
|
@@ -524,6 +638,6 @@ export declare interface WidgetInstance {
|
|
|
524
638
|
|
|
525
639
|
export declare type WidgetMode = 'floating' | 'fullpage';
|
|
526
640
|
|
|
527
|
-
export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-trigger {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 56px;\n height: 56px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 24px;\n box-shadow: 0 8px 24px color-mix(in srgb, var(--sa-primary) 35%, transparent);\n z-index: var(--sa-z-index, 9999);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .sa-trigger:hover {\n transform: scale(1.08);\n box-shadow: 0 12px 32px color-mix(in srgb, var(--sa-primary) 45%, transparent);\n }\n\n .sa-trigger:active {\n transform: scale(0.94);\n }\n\n .sa-trigger-open {\n transform: rotate(90deg);\n }\n\n /* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-panel {\n position: fixed;\n bottom: 96px;\n right: 24px;\n width: var(--sa-panel-width, 380px);\n height: var(--sa-panel-height, 520px);\n max-height: calc(100vh - 120px);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--sa-bg);\n border: 1px solid var(--sa-border);\n border-radius: var(--sa-radius, 16px);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n z-index: var(--sa-z-index, 9999);\n animation: sa-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-header {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 14px 16px;\n color: #ffffff;\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n flex-shrink: 0;\n }\n\n .sa-header-left {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n }\n\n .sa-header-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n }\n\n .sa-header-info {\n display: flex;\n flex-direction: column;\n }\n\n .sa-header-status {\n font-size: 11px;\n opacity: 0.8;\n color: #a5f3a6;\n }\n\n .sa-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-header-title {\n flex: 1;\n font-size: 16px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .sa-header-btn {\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #ffffff;\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n }\n\n .sa-header-btn:hover {\n background: rgba(255, 255, 255, 0.18);\n }\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 14px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-right-radius: 4px;\n background: var(--sa-primary);\n color: #ffffff;\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n border-bottom-left-radius: 4px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n .sa-avatar {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n overflow: hidden;\n }\n\n .sa-avatar-assistant {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n }\n\n .sa-avatar-user {\n background: linear-gradient(135deg, #64748b, #475569);\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 100px;\n overflow-y: auto;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-composer {\n position: relative;\n display: flex;\n align-items: flex-end;\n gap: 10px;\n padding: 12px 14px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-bg);\n flex-shrink: 0;\n }\n\n .sa-composer-input {\n flex: 1;\n min-height: 38px;\n max-height: 120px;\n padding: 9px 14px;\n border: 1px solid var(--sa-border);\n border-radius: 19px;\n background: var(--sa-surface);\n color: var(--sa-text);\n font-family: var(--sa-font);\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n outline: none;\n transition: border-color 0.2s ease, background 0.2s ease;\n }\n\n .sa-composer-input::placeholder {\n color: #9ca3af;\n }\n\n .sa-composer-input:focus {\n border-color: var(--sa-primary);\n background: #ffffff;\n }\n\n .sa-composer-send,\n .sa-composer-stop {\n width: 38px;\n height: 38px;\n flex-shrink: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 16px;\n transition: transform 0.15s ease, background 0.2s ease;\n }\n\n .sa-composer-send {\n background: var(--sa-primary);\n }\n\n .sa-composer-send:hover {\n background: var(--sa-primary-dark);\n transform: scale(1.05);\n }\n\n .sa-composer-send:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .sa-composer-stop {\n background: #ef4444;\n }\n\n .sa-composer-stop:hover {\n background: #dc2626;\n transform: scale(1.05);\n }\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread-list-overlay {\n position: absolute;\n inset: 0;\n background: rgba(0,0,0,0.3);\n z-index: 19;\n }\n\n .sa-thread-list {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n background: #ffffff;\n z-index: 20;\n box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);\n animation: sa-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .sa-thread-list-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 20px 16px;\n flex-shrink: 0;\n }\n\n .sa-thread-list-title {\n font-size: 17px;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-thread-list-new {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: none;\n border-radius: 20px;\n background: #f4f4f5;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .sa-thread-list-new:hover {\n background: #e4e4e7;\n }\n\n .sa-thread-list-items {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px 12px;\n }\n\n .sa-thread-list-empty {\n padding: 48px 16px;\n text-align: center;\n color: var(--sa-text-muted);\n font-size: 14px;\n }\n\n .sa-thread-list-loading {\n padding: 12px 16px;\n text-align: center;\n color: #9ca3af;\n font-size: 13px;\n }\n\n .sa-thread-group-label {\n padding: 16px 8px 6px;\n font-size: 12px;\n font-weight: 500;\n color: #a1a1aa;\n }\n\n .sa-thread-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 10px 12px;\n margin: 2px 0;\n border-radius: 8px;\n color: #374151;\n font-size: 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-thread-item:hover {\n background: #f9fafb;\n }\n\n .sa-thread-item.active {\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n font-weight: 500;\n }\n\n .sa-thread-item-info {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .sa-thread-item-title {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-thread-item-time {\n font-size: 11px;\n color: var(--sa-text-light);\n white-space: nowrap;\n }\n\n .sa-thread-item-edit {\n width: 100%;\n padding: 4px 8px;\n border: 1px solid var(--sa-primary);\n border-radius: 6px;\n font-size: 13px;\n outline: none;\n background: var(--sa-bg);\n color: var(--sa-text);\n }\n\n /* \u64CD\u4F5C\u6309\u94AE\u7EC4\uFF1A\u59CB\u7EC8\u5360\u4F4D\uFF08visibility \u63A7\u5236\uFF09\uFF0Chover \u65F6\u663E\u793A\uFF0C\u9AD8\u5EA6\u4E0D\u53D8 */\n .sa-thread-item-actions {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .sa-thread-item:hover .sa-thread-item-actions {\n visibility: visible;\n }\n\n .sa-thread-item-action-btn {\n border: none;\n background: transparent;\n color: var(--sa-text-muted);\n cursor: pointer;\n padding: 2px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-thread-item-action-btn:hover {\n color: var(--sa-primary);\n background: rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Welcome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-welcome {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 24px;\n text-align: center;\n }\n\n .sa-welcome-icon {\n font-size: 40px;\n margin-bottom: 12px;\n }\n\n .sa-welcome-message {\n margin-bottom: 20px;\n font-size: 14px;\n color: var(--sa-text-muted);\n line-height: 1.6;\n }\n\n .sa-welcome-prompts {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n }\n\n .sa-welcome-prompt {\n padding: 10px 16px;\n border: 1px solid var(--sa-border);\n border-radius: 999px;\n background: #ffffff;\n color: #374151;\n font-size: 13px;\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;\n }\n\n .sa-welcome-prompt:hover {\n border-color: var(--sa-primary);\n background: var(--sa-primary-light);\n color: var(--sa-primary-dark);\n }\n\n /* \u2500\u2500 Streaming cursor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-streaming-cursor {\n display: inline-block;\n width: 2px;\n height: 1em;\n margin-left: 2px;\n background: var(--sa-primary);\n vertical-align: text-bottom;\n animation: sa-blink 1s steps(2, start) infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-slide-up {\n from {\n opacity: 0;\n transform: translateY(16px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n @keyframes sa-slide-in-left {\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar */\n .sa-fp-sidebar {\n width: 260px;\n display: flex;\n flex-direction: column;\n background: var(--sa-surface, #ffffff);\n flex-shrink: 0;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-collapsed {\n width: 52px;\n align-items: center;\n padding-top: 12px;\n gap: 4px;\n border-right: 1px solid #e8e8ea;\n }\n\n .sa-fp-sidebar-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 12px 8px;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle {\n width: 32px;\n height: 32px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n flex-shrink: 0;\n }\n\n .sa-fp-sidebar-toggle:hover {\n background: #e4e4e7;\n color: #18181b;\n }\n\n .sa-fp-sidebar-new {\n flex: 1;\n padding: 7px 12px;\n border: 1px solid #d4d4d8;\n border-radius: 8px;\n background: #fff;\n color: #3f3f46;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: border-color 0.12s, box-shadow 0.12s;\n }\n\n .sa-fp-sidebar-new:hover {\n border-color: #a1a1aa;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n }\n\n .sa-fp-sidebar-new span {\n font-size: 13px;\n }\n\n .sa-fp-sidebar-list {\n flex: 1;\n overflow-y: auto;\n padding: 4px 8px 12px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar {\n width: 4px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.08);\n border-radius: 2px;\n }\n\n .sa-fp-sidebar-list::-webkit-scrollbar-thumb:hover {\n background: rgba(0,0,0,0.15);\n }\n\n .sa-fp-sidebar-group {\n padding: 12px 8px 4px;\n font-size: 11px;\n font-weight: 500;\n color: #a1a1aa;\n letter-spacing: 0.3px;\n }\n\n .sa-fp-sidebar-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n margin: 1px 0;\n border-radius: 8px;\n cursor: pointer;\n color: #3f3f46;\n font-size: 13px;\n line-height: 1.4;\n transition: background 0.1s;\n }\n\n .sa-fp-sidebar-item:hover {\n background: #e8e8ea;\n }\n\n .sa-fp-sidebar-item.active {\n background: #e4e4e7;\n color: #18181b;\n font-weight: 500;\n }\n\n .sa-fp-sidebar-item-title {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-fp-sidebar-item-edit {\n flex: 1;\n min-width: 0;\n padding: 2px 6px;\n border: 1px solid var(--sa-primary, #6366f1);\n border-radius: 4px;\n font-size: 13px;\n color: #27272a;\n background: #fff;\n outline: none;\n }\n\n .sa-fp-sidebar-item-actions {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n visibility: hidden;\n }\n\n .sa-fp-sidebar-item-actions.visible {\n visibility: visible;\n }\n\n .sa-fp-sidebar-item-action {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #a1a1aa;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: color 0.1s, background 0.1s;\n }\n\n .sa-fp-sidebar-item-action:hover {\n color: #71717a;\n background: rgba(0,0,0,0.05);\n }\n\n .sa-fp-sidebar-item-action.danger {\n color: #ef4444;\n }\n\n .sa-fp-sidebar-item-action.danger:hover {\n color: #dc2626;\n background: rgba(239,68,68,0.08);\n }\n\n .sa-fp-sidebar-empty {\n padding: 32px 12px;\n text-align: center;\n color: #a1a1aa;\n font-size: 13px;\n }\n\n /* Sidebar wrapper (for custom ThreadList slot) */\n .sa-fp-sidebar-wrapper {\n width: 260px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #e8e8ea;\n background: #f2f2f3;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n .sa-tool-result-html { margin-top: 8px; border: 1px solid var(--sa-border); border-radius: 8px; overflow: hidden; }\n .sa-tool-result-html-iframe { width: 100%; height: 120px; max-height: 500px; border: none; background: #fff; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
|
|
641
|
+
export declare const widgetStyles = "\n [data-super-agent-widget] {\n --sa-primary-dark: color-mix(in srgb, var(--sa-primary) 82%, #000);\n --sa-primary-light: color-mix(in srgb, var(--sa-primary) 10%, #fff);\n --sa-text: #1f2937;\n --sa-text-muted: #6b7280;\n --sa-text-light: #9ca3af;\n --sa-border: #e5e7eb;\n --sa-surface: #f9fafb;\n --sa-hover: #f3f4f6;\n\n font-family: var(--sa-font);\n color: var(--sa-text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n [data-super-agent-widget] *,\n [data-super-agent-widget] *::before,\n [data-super-agent-widget] *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n [data-super-agent-widget] button {\n font-family: inherit;\n }\n\n /* \u2500\u2500 Trigger / Panel / Header\uFF08\u6D6E\u7A97\u6846\u67B6\u5DF2\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Thread / messages \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thread {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 16px;\n overflow-y: auto;\n padding: 16px;\n background: var(--sa-surface);\n scroll-behavior: smooth;\n }\n\n .sa-thread::-webkit-scrollbar {\n width: 6px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.14);\n border-radius: 3px;\n }\n\n .sa-thread::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.24);\n }\n\n /* \u2500\u2500 Message\uFF1A\u6D6E\u7A97\u9ED8\u8BA4 hr-for-help \u98CE\u683C\uFF08AI \u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF09\uFF1B\n fullpage \u6A21\u5F0F\u5728 .sa-fp-content-row \u4E0B\u6062\u590D\u539F\u6A2A\u6392\u5E03\u5C40\uFF0C\u4E92\u4E0D\u5F71\u54CD \u2500\u2500 */\n\n .sa-message {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n width: 100%;\n }\n\n .sa-message-user {\n justify-content: flex-end;\n }\n\n /* AI \u6D88\u606F\uFF1A\u5217\u5E03\u5C40\uFF0C\u5934\u50CF\u72EC\u5360\u4E00\u884C\uFF08\u4EC5\u6D6E\u7A97\uFF0C\u5BF9\u9F50 hr-for-help msgAi\uFF09 */\n .sa-message-assistant {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .sa-message-content {\n max-width: 78%;\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-message-user .sa-message-content {\n max-width: 90%;\n }\n\n .sa-message-assistant .sa-message-content {\n max-width: 100%;\n min-width: 0;\n width: 100%;\n }\n\n .sa-message-body {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n /* \u6D6E\u7A97\u6C14\u6CE1\uFF1A\u7528\u6237\u6D45\u84DD\u3001AI \u767D\u5E95\u63CF\u8FB9\uFF08\u5BF9\u9F50 hr-for-help\uFF09 */\n .sa-message-user .sa-message-body {\n padding: 8px 12px;\n border-radius: 8px 8px 0 8px;\n background: #E8F1FE;\n color: #333333;\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-message-assistant .sa-message-body {\n padding: 10px 12px;\n border-radius: 8px;\n background: #ffffff;\n border: 1px solid #E0E0E0;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.5;\n word-break: break-word;\n }\n\n .sa-message-time {\n font-size: 11px;\n color: var(--sa-text-muted);\n opacity: 0.7;\n }\n\n .sa-message-time-right {\n text-align: right;\n }\n\n /* \u6D88\u606F\u5934\u50CF\uFF1A\u88F8\u5C55\u793A\uFF0C\u65E0\u80CC\u666F\u8272\uFF08\u5BF9\u9F50 hr-for-help msgAvatar\uFF09 */\n .sa-msg-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n display: block;\n }\n\n .sa-msg-avatar-text {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 400;\n }\n\n /* \u2500\u2500 fullpage \u8986\u76D6\uFF1A\u6062\u590D\u6A2A\u6392\u5934\u50CF + \u7ECF\u5178\u6C14\u6CE1\uFF08\u4E0D\u53D7\u6D6E\u7A97 hr-for-help \u6539\u7248\u5F71\u54CD\uFF09 \u2500\u2500 */\n\n .sa-fp-content-row .sa-message-assistant {\n flex-direction: row;\n gap: 10px;\n }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-content {\n max-width: 88%;\n width: auto;\n }\n\n .sa-fp-content-row .sa-message-user .sa-message-content {\n max-width: 78%;\n }\n\n // .sa-fp-content-row .sa-message-user .sa-message-body {\n // padding: 10px 14px;\n // border-radius: 16px;\n // border-bottom-right-radius: 4px;\n // background: var(--sa-primary);\n // color: #ffffff;\n // font-size: 14px;\n // line-height: 1.55;\n // word-break: break-word;\n // }\n\n .sa-fp-content-row .sa-message-assistant .sa-message-body {\n padding: 10px 14px;\n border-radius: 16px;\n background: #ffffff;\n color: var(--sa-text);\n font-size: 14px;\n line-height: 1.55;\n word-break: break-word;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n }\n\n .sa-fp-content-row .sa-msg-avatar {\n width: 24px;\n height: 24px;\n }\n\n .sa-fp-content-row .sa-msg-avatar-text {\n background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-dark));\n color: #ffffff;\n font-size: 12px;\n font-weight: 600;\n }\n\n /* \u2500\u2500 Text part (markdown) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-text-part {\n font-size: 14px;\n line-height: 1.6;\n word-break: break-word;\n }\n\n .sa-text-part p {\n margin: 0 0 8px;\n }\n\n .sa-text-part p:last-child {\n margin-bottom: 0;\n }\n\n .sa-text-part strong {\n font-weight: 600;\n }\n\n .sa-text-part em {\n font-style: italic;\n }\n\n .sa-text-part h1,\n .sa-text-part h2,\n .sa-text-part h3,\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n margin: 12px 0 6px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .sa-text-part h1 {\n font-size: 1.4em;\n }\n\n .sa-text-part h2 {\n font-size: 1.25em;\n }\n\n .sa-text-part h3 {\n font-size: 1.1em;\n }\n\n .sa-text-part h4,\n .sa-text-part h5,\n .sa-text-part h6 {\n font-size: 1em;\n }\n\n .sa-text-part a {\n color: var(--sa-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .sa-text-part a:hover {\n color: var(--sa-primary-dark);\n }\n\n .sa-inline-code {\n padding: 2px 5px;\n border-radius: 4px;\n background: rgba(0, 0, 0, 0.06);\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 0.9em;\n }\n\n .sa-code-block {\n margin: 8px 0;\n padding: 12px 14px;\n border-radius: 10px;\n background: #1e293b;\n color: #e2e8f0;\n overflow-x: auto;\n font-size: 13px;\n line-height: 1.55;\n }\n\n .sa-code-block code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n white-space: pre;\n }\n\n .sa-list {\n margin: 6px 0;\n padding-left: 22px;\n }\n\n .sa-list li {\n margin: 3px 0;\n line-height: 1.5;\n }\n\n ul.sa-list {\n list-style: disc;\n }\n\n ol.sa-list {\n list-style: decimal;\n }\n\n /* \u2500\u2500 Thinking part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-thinking-part {\n margin: 6px 0;\n padding: 8px 12px;\n border-left: 3px solid var(--sa-primary);\n border-radius: 8px;\n background: var(--sa-primary-light);\n cursor: pointer;\n font-size: 13px;\n }\n\n .sa-thinking-header {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--sa-primary-dark);\n font-weight: 500;\n user-select: none;\n }\n\n .sa-thinking-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-thinking-label {\n flex: 1;\n }\n\n .sa-thinking-arrow {\n font-size: 12px;\n transition: transform 0.2s ease;\n }\n\n .sa-thinking-arrow.expanded {\n transform: rotate(90deg);\n }\n\n .sa-thinking-content {\n margin-top: 8px;\n color: #4b5563;\n white-space: pre-wrap;\n line-height: 1.55;\n }\n\n /* \u2500\u2500 Tool call / result \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-tool-call-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-call-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n font-size: 13px;\n user-select: none;\n }\n\n .sa-tool-call-header:hover {\n background: var(--sa-surface);\n }\n\n .sa-tool-icon {\n font-size: 14px;\n line-height: 1;\n }\n\n .sa-tool-name {\n flex: 1;\n color: #374151;\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .sa-tool-args {\n margin: 0;\n padding: 10px 12px;\n border-top: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n overflow-x: auto;\n }\n\n .sa-tool-result-part {\n margin: 6px 0;\n border: 1px solid var(--sa-border);\n border-radius: 10px;\n overflow: hidden;\n background: #ffffff;\n }\n\n .sa-tool-result-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--sa-border);\n background: var(--sa-surface);\n color: #374151;\n font-size: 13px;\n font-weight: 500;\n }\n\n .sa-tool-result-content {\n max-height: 256px;\n overflow: auto;\n margin: 8px 0 0;\n padding: 10px 12px;\n color: #4b5563;\n font-size: 13px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n background: #f9fafb;\n border-radius: 8px;\n }\n\n .sa-tool-result-actions {\n display: flex;\n gap: 8px;\n margin: 4px 0;\n }\n\n /* \u2500\u2500 Error part \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-error-part {\n margin: 6px 0;\n padding: 10px 12px;\n border: 1px solid #fecaca;\n border-radius: 10px;\n background: #fef2f2;\n color: #b91c1c;\n }\n\n .sa-error-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.5;\n }\n\n .sa-error-icon {\n font-size: 14px;\n line-height: 1.4;\n }\n\n .sa-error-retry {\n margin-top: 8px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n background: #ef4444;\n color: #ffffff;\n font-size: 13px;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n\n .sa-error-retry:hover {\n background: #dc2626;\n }\n\n /* \u2500\u2500 Action bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-action-bar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 6px;\n position: relative;\n }\n\n .sa-action-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n flex: none;\n white-space: nowrap;\n line-height: 1;\n padding: 4px 10px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--sa-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: color 0.15s ease, background 0.15s ease;\n }\n\n .sa-action-btn svg {\n display: block;\n flex: none;\n }\n\n .sa-action-btn:hover {\n color: var(--sa-text);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .sa-action-btn-active {\n color: var(--sa-primary) !important;\n background: var(--sa-primary-light) !important;\n }\n\n .sa-action-divider {\n width: 1px;\n height: 16px;\n background: var(--sa-border);\n margin: 0 2px;\n align-self: center;\n }\n\n /* \u2500\u2500 Dislike Panel \u2500\u2500 */\n .sa-dislike-panel {\n position: absolute; top: 100%; left: 0; right: 0;\n margin-top: 6px; padding: 12px;\n background: #fff; border: 1px solid var(--sa-border); border-radius: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n animation: sa-fade-in-up 0.2s cubic-bezier(0.16,1,0.3,1) both;\n z-index: 10;\n }\n .sa-dislike-panel-title { font-size: 13px; font-weight: 500; color: var(--sa-text); margin-bottom: 8px; }\n .sa-dislike-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .sa-dislike-reason-btn {\n padding: 4px 10px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text); font-size: 12px; cursor: pointer;\n transition: border-color 0.15s, background 0.15s, color 0.15s;\n }\n .sa-dislike-reason-btn:hover { border-color: var(--sa-primary); color: var(--sa-primary); }\n .sa-dislike-reason-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }\n .sa-dislike-remark {\n width: 100%; padding: 8px 10px; border: 1px solid var(--sa-border); border-radius: 8px;\n font-size: 13px; color: var(--sa-text); resize: none; outline: none;\n transition: border-color 0.15s;\n }\n .sa-dislike-remark:focus { border-color: var(--sa-primary); }\n .sa-dislike-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }\n .sa-dislike-submit {\n padding: 5px 14px; border: none; border-radius: 6px;\n background: var(--sa-primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;\n transition: opacity 0.15s;\n }\n .sa-dislike-submit:hover { opacity: 0.9; }\n .sa-dislike-cancel {\n padding: 5px 14px; border: 1px solid var(--sa-border); border-radius: 6px;\n background: #fff; color: var(--sa-text-muted); font-size: 13px; cursor: pointer;\n transition: background 0.15s;\n }\n .sa-dislike-cancel:hover { background: var(--sa-surface); }\n\n /* \u2500\u2500 Composer\uFF08\u8F93\u5165\u533A\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css \u7684 .sa-input-form/.sa-send-btn\uFF09 \u2500\u2500 */\n\n /* \u2500\u2500 Slash Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-slash-menu {\n position: absolute;\n bottom: 100%;\n left: 14px;\n right: 14px;\n max-width: 400px;\n max-height: 200px;\n overflow-y: auto;\n background: var(--sa-surface);\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n z-index: 10;\n }\n\n .sa-slash-menu-empty {\n padding: 12px 14px;\n color: #9ca3af;\n font-size: 13px;\n text-align: center;\n }\n\n .sa-slash-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .sa-slash-menu-item:hover,\n .sa-slash-menu-item--active {\n background: var(--sa-hover);\n }\n\n .sa-slash-menu-item-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--sa-text);\n white-space: nowrap;\n }\n\n .sa-slash-menu-item-desc {\n font-size: 12px;\n color: #9ca3af;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n min-width: 0;\n }\n\n /* \u2500\u2500 Thread list\uFF08\u5185\u5D4C\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 FullpageLayout.tsx / ThreadList.tsx\uFF09 \u2500\u2500 */\n\n /* \u6D88\u606F\u533A\u52A0\u8F7D\u6001 */\n .sa-messages-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #9ca3af;\n font-size: 14px;\n }\n\n .sa-loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid var(--sa-border, #e5e7eb);\n border-top-color: var(--sa-primary, #6366f1);\n border-radius: 50%;\n animation: sa-spin 0.8s linear infinite;\n flex-shrink: 0;\n }\n\n @keyframes sa-spin {\n to { transform: rotate(360deg); }\n }\n\n /* \u2500\u2500 Welcome\uFF08\u9996\u9875\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u89C1 tailwind.css\uFF09 \u2500\u2500 */\n\n .sa-thinking-indicator {\n color: #9ca3af;\n font-size: 14px;\n animation: sa-blink 1.2s ease-in-out infinite;\n }\n\n /* \u2500\u2500 Interrupt cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-interrupt-card {\n margin: 8px 0;\n padding: 14px;\n border: 1px solid #e0e7ff;\n border-radius: 10px;\n background: #f8faff;\n }\n\n .sa-interrupt-content {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n font-size: 13px;\n line-height: 1.6;\n color: var(--sa-text);\n margin-bottom: 12px;\n }\n\n .sa-interrupt-actions {\n display: flex;\n gap: 8px;\n margin-top: 10px;\n }\n\n .sa-interrupt-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: none;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s, opacity 0.15s;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-btn-primary {\n background: var(--sa-primary);\n color: #fff;\n }\n\n .sa-interrupt-btn-primary:hover:not(:disabled) {\n opacity: 0.9;\n }\n\n .sa-interrupt-btn-secondary {\n background: #f3f4f6;\n color: #374151;\n }\n\n .sa-interrupt-btn-secondary:hover:not(:disabled) {\n background: #e5e7eb;\n }\n\n .sa-interrupt-btn-danger {\n background: #fef2f2;\n color: #dc2626;\n }\n\n .sa-interrupt-btn-danger:hover:not(:disabled) {\n background: #fee2e2;\n }\n\n .sa-interrupt-options {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .sa-interrupt-option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n transition: border-color 0.12s, background 0.12s;\n }\n\n .sa-interrupt-option:hover {\n border-color: var(--sa-primary);\n background: #f5f3ff;\n }\n\n .sa-interrupt-option-selected {\n border-color: var(--sa-primary);\n background: #ede9fe;\n color: var(--sa-primary);\n font-weight: 500;\n }\n\n .sa-interrupt-option-danger {\n color: #ef4444;\n }\n\n .sa-interrupt-option-danger:hover {\n border-color: #ef4444;\n background: #fef2f2;\n }\n\n .sa-interrupt-option-desc {\n font-size: 11px;\n color: var(--sa-text-muted);\n margin-left: auto;\n }\n\n .sa-interrupt-input-area {\n margin-top: 4px;\n }\n\n .sa-interrupt-input,\n .sa-interrupt-textarea,\n .sa-interrupt-select {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--sa-border);\n border-radius: 8px;\n background: #fff;\n color: var(--sa-text);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s;\n }\n\n .sa-interrupt-input:focus,\n .sa-interrupt-textarea:focus,\n .sa-interrupt-select:focus {\n border-color: var(--sa-primary);\n }\n\n .sa-interrupt-textarea {\n resize: vertical;\n min-height: 60px;\n }\n\n .sa-interrupt-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 4px;\n }\n\n .sa-interrupt-form-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .sa-interrupt-form-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sa-text);\n }\n\n .sa-interrupt-form-required {\n color: #ef4444;\n margin-left: 2px;\n }\n\n .sa-interrupt-submitted {\n margin-top: 8px;\n font-size: 12px;\n color: #9ca3af;\n }\n\n .sa-interrupt-btn-answered {\n background: var(--sa-primary) !important;\n color: #fff !important;\n opacity: 0.7;\n }\n\n .sa-interrupt-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .sa-interrupt-option:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .sa-interrupt-input:disabled,\n .sa-interrupt-textarea:disabled,\n .sa-interrupt-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background: #f9fafb;\n }\n\n .sa-interrupt-unknown {\n padding: 8px 12px;\n border-radius: 8px;\n background: #fef3c7;\n color: #92400e;\n font-size: 13px;\n margin: 6px 0;\n }\n\n /* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n @keyframes sa-blink {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* \u2500\u2500 Fullpage Layout (DeepSeek-style) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n .sa-fullpage {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n background: var(--sa-bg, #ffffff);\n }\n\n /* Sidebar\uFF08fullpage \u9ED8\u8BA4\u4FA7\u8FB9\u680F\u6539\u7528 Tailwind \u5B9E\u73B0\uFF0C\u5BF9\u9F50\u6D6E\u7A97\u5386\u53F2\u5BF9\u8BDD\u6837\u5F0F\uFF0C\u89C1 FullpageLayout.tsx\uFF09 */\n\n /* Sidebar wrapper (for custom ThreadList slot)\uFF1A\u5BBD\u5EA6\u4E0E\u9ED8\u8BA4\u4FA7\u8FB9\u680F 220px \u5BF9\u9F50 */\n .sa-fp-sidebar-wrapper {\n width: 220px;\n flex-shrink: 0;\n overflow: hidden;\n border-right: 1px solid #ECECEC;\n background: #FAFAFA;\n transition: width 0.2s cubic-bezier(0.16,1,0.3,1);\n }\n\n .sa-fp-sidebar-wrapper-collapsed {\n width: 0;\n border-right: none;\n }\n\n /* Main area */\n .sa-fp-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n background: #fff;\n }\n\n .sa-fp-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 16px;\n border-bottom: 1px solid #f0f0f0;\n background: #fff;\n flex-shrink: 0;\n min-height: 52px;\n }\n\n .sa-fp-header-title {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n color: #18181b;\n letter-spacing: -0.2px;\n }\n\n .sa-fp-header-actions {\n display: flex;\n gap: 4px;\n }\n\n .sa-fp-header-btn {\n min-width: 34px;\n height: 34px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: #71717a;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.12s, color 0.12s;\n }\n\n .sa-fp-header-btn:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n\n /* Fullpage thread/composer override */\n .sa-fp-main .sa-thread {\n margin: 0 auto;\n width: 100%;\n padding: 24px 24px;\n }\n\n .sa-fp-main .sa-composer {\n margin: 0 auto;\n width: 100%;\n padding: 12px 24px 20px;\n border-top: none;\n background: transparent;\n }\n\n .sa-fp-main .sa-composer-input {\n background: #f7f7f8;\n border: 1px solid #e4e4e7;\n box-shadow: none;\n }\n\n .sa-fp-main .sa-composer-input:focus {\n background: #fff;\n border-color: #d4d4d8;\n box-shadow: 0 0 0 3px rgba(99,102,241,0.08);\n }\n\n /* \u2500\u2500 Artifact file cards (in ToolResultPart) \u2500\u2500 */\n .sa-artifact-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n .sa-artifact-file-card {\n display: flex; align-items: center; gap: 10px; padding: 8px 10px;\n border: 1px solid var(--sa-border); border-radius: 10px; background: var(--sa-surface);\n font-size: 13px; color: var(--sa-text);\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-artifact-file-card:hover { border-color: var(--sa-primary); background: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.1); transform: translateY(-1px); }\n .sa-artifact-file-card:active { transform: translateY(0) scale(0.99); }\n .sa-artifact-file-icon { flex-shrink: 0; }\n .sa-artifact-chip-type {\n display: inline-flex; align-items: center; justify-content: center;\n min-width: 36px; padding: 2px 6px; border-radius: 5px;\n background: var(--sa-primary); color: #fff;\n font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.4;\n }\n .sa-artifact-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n .sa-artifact-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n .sa-artifact-file-size { color: var(--sa-text-muted); font-size: 12px; }\n .sa-artifact-file-download {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex;\n transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;\n }\n .sa-artifact-file-download:hover { color: var(--sa-primary); background: rgba(99,102,241,0.08); }\n .sa-artifact-file-download:active { transform: scale(0.9); }\n\n /* \u2500\u2500 Inline HTML rendering (render_mode=html) \u2500\u2500 */\n /* HTML \u5DE5\u5177\u7ED3\u679C\uFF1A\u5916\u5C42\u6EDA\u52A8\u5BB9\u5668 + \u5185\u5C42\u5185\u5BB9\u5C42\uFF08\u4E0E Playground \u4E00\u81F4\uFF0C\u65E0 iframe\uFF09 */\n .sa-tool-result-html-scroll { margin-top: 8px; max-height: 60vh; overflow: auto; border: 1px solid var(--sa-border); border-radius: 8px; }\n .sa-tool-result-html { padding: 12px; background: #fff; min-width: 100%; width: max-content; }\n\n /* \u2500\u2500 Header artifact button \u2500\u2500 */\n .sa-header-btn-artifact {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 4px 12px !important; border-radius: 8px;\n background: var(--sa-primary) !important; color: #fff !important;\n font-size: 12px; font-weight: 600;\n transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;\n box-shadow: 0 1px 4px rgba(99,102,241,0.25);\n }\n .sa-header-btn-artifact:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.3); }\n .sa-header-btn-artifact:active { transform: translateY(0) scale(0.97); }\n .sa-header-btn-artifact svg { stroke: #fff; }\n .sa-header-btn-artifact.sa-artifact-pulse { animation: sa-artifact-pulse 2s ease-in-out 3; }\n\n /* \u2500\u2500 Artifact drawer (right side panel) \u2500\u2500 */\n .sa-artifact-drawer {\n display: flex; flex-direction: column; min-width: 240px; max-width: 70%;\n border-left: 1px solid var(--sa-border); background: #fff; flex-shrink: 0; overflow: hidden;\n animation: sa-slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n position: relative;\n }\n .sa-artifact-drawer.sa-drawer-closing {\n animation: sa-slide-out-right 0.25s cubic-bezier(0.4, 0, 1, 1) both;\n }\n .sa-drawer-resize-handle {\n position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;\n cursor: col-resize; z-index: 2;\n transition: background 0.15s ease;\n }\n .sa-drawer-resize-handle:hover, .sa-drawer-resize-handle:active {\n background: var(--sa-primary); opacity: 0.3; border-radius: 3px;\n }\n .sa-artifact-drawer-header {\n display: flex; align-items: center; gap: 8px; padding: 12px 14px;\n border-bottom: 1px solid var(--sa-border); font-weight: 600; font-size: 15px; color: var(--sa-text);\n background: var(--sa-surface);\n }\n .sa-artifact-drawer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .sa-drawer-btn {\n border: none; background: none; cursor: pointer; color: var(--sa-text-muted);\n padding: 6px; border-radius: 6px; display: inline-flex; align-items: center;\n transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;\n }\n .sa-drawer-btn:hover { background: var(--sa-border); color: var(--sa-text); }\n .sa-drawer-btn:active { transform: scale(0.92); }\n .sa-drawer-btn-sm {\n border: 1px solid var(--sa-border); background: #fff; cursor: pointer; color: var(--sa-primary);\n padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;\n transition: background 0.15s ease, border-color 0.15s ease;\n }\n .sa-drawer-btn-sm:hover { background: var(--sa-surface); border-color: var(--sa-primary); }\n .sa-artifact-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }\n .sa-drawer-empty { padding: 48px 24px; text-align: center; color: var(--sa-text-muted); font-size: 14px; }\n .sa-drawer-file-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }\n .sa-drawer-file-card {\n display: flex; align-items: center; gap: 10px; padding: 12px 14px;\n border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; background: #fff;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;\n animation: sa-fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n }\n .sa-drawer-file-card:nth-child(1) { animation-delay: 0s; }\n .sa-drawer-file-card:nth-child(2) { animation-delay: 0.04s; }\n .sa-drawer-file-card:nth-child(3) { animation-delay: 0.08s; }\n .sa-drawer-file-card:nth-child(4) { animation-delay: 0.12s; }\n .sa-drawer-file-card:nth-child(5) { animation-delay: 0.16s; }\n .sa-drawer-file-card:hover { border-color: var(--sa-primary); background: var(--sa-surface); box-shadow: 0 2px 8px rgba(99,102,241,0.08); transform: translateY(-1px); }\n .sa-drawer-file-card:active { transform: translateY(0) scale(0.98); }\n .sa-drawer-file-icon { flex-shrink: 0; }\n .sa-drawer-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n .sa-drawer-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; color: var(--sa-text); }\n .sa-drawer-file-size { color: var(--sa-text-muted); font-size: 12px; }\n\n /* \u2500\u2500 Drawer preview \u2500\u2500 */\n .sa-drawer-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; animation: sa-fade-in 0.3s ease both; }\n .sa-drawer-preview-loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 12px; color: var(--sa-text-muted); font-size: 14px;\n }\n .sa-drawer-preview-loading::before {\n content: ''; width: 28px; height: 28px; border-radius: 50%;\n border: 3px solid var(--sa-border); border-top-color: var(--sa-primary);\n animation: sa-spinner 0.7s linear infinite;\n }\n .sa-drawer-preview-error {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 14px; height: 100%; color: var(--sa-text-muted); font-size: 14px;\n animation: sa-fade-in 0.2s ease both;\n }\n\n /* \u2500\u2500 Drawer view transition \u2500\u2500 */\n .sa-drawer-view-enter { animation: sa-drawer-view-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }\n\n /* \u2500\u2500 Layout helpers for drawer alongside thread \u2500\u2500 */\n .sa-panel-content { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-panel-content .sa-thread { flex: 1; min-width: 120px; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n .sa-panel-content .sa-artifact-drawer { max-width: 60%; }\n .sa-fp-content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }\n .sa-fp-content-row .sa-thread { flex: 1; min-width: 0; transition: flex 0.3s cubic-bezier(0.16, 1, 0.3, 1); }\n\n /* \u2500\u2500 Artifact keyframes \u2500\u2500 */\n @keyframes sa-slide-in-right {\n from { opacity: 0; transform: translateX(100%); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes sa-slide-out-right {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(100%); }\n }\n @keyframes sa-fade-in-up {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes sa-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes sa-spinner {\n to { transform: rotate(360deg); }\n }\n @keyframes sa-artifact-pulse {\n 0%, 100% { box-shadow: 0 1px 4px rgba(99,102,241,0.25); }\n 50% { box-shadow: 0 2px 12px rgba(99,102,241,0.5); }\n }\n @keyframes sa-drawer-view-in {\n from { opacity: 0; transform: translateX(12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n";
|
|
528
642
|
|
|
529
643
|
export { }
|