wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rename agent widget references to AI agent for consistency

Browse Source 
- Updated runtime configuration to use __CS_AI_AGENT_WIDGET_CONFIG__ instead of __CS_AGENT_WIDGET_CONFIG__.
- Changed message types in support host bridge from "cs-agent" to "cs-ai-agent".
- Minified SDK script updated to reflect new AI agent naming conventions.
- Adjusted scrollbar styles in main.scss to use .cs-ai-agent-scrollbar instead of .cs-agent-scrollbar.
This commit is contained in:
mlogclub
2026-05-30 21:19:36 +08:00
parent 85a57e9930
commit 5d7c10aeab
398 changed files with 1418 additions and 1427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/conversations/_components/chat-panel.tsx
+1 -1
View File
@@ -350,7 +350,7 @@ export function ChatPanel() {
const messagesScroll = (
<div
ref={messagesContainerRef}
className="h-full min-h-0 flex-1 overflow-y-auto p-4 cs-agent-scrollbar"
className="h-full min-h-0 flex-1 overflow-y-auto p-4 cs-ai-agent-scrollbar"
>
<div ref={messagesContentRef} className="flex flex-col">
{!loading && messages.length > 0 && messagesHasMore ? (
web/components/chat/shared-message-editor.tsx
+2 -2
View File
@@ -446,9 +446,9 @@ export function SharedMessageEditor({
function getEditorClassName(variant: SharedMessageEditorVariant) {
if (variant === "customer") {
return "cs-agent-scrollbar min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_.cs-agent-editor-image-wrap]:my-2 [&_.cs-agent-editor-image]:max-h-64 [&_.cs-agent-editor-image]:max-w-full [&_.cs-agent-editor-image]:rounded-lg [&_.cs-agent-editor-image]:object-contain [&_.cs-agent-editor-image-wrap-uploading_.cs-agent-editor-image]:opacity-55"
return "cs-ai-agent-scrollbar min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_.cs-ai-agent-editor-image-wrap]:my-2 [&_.cs-ai-agent-editor-image]:max-h-64 [&_.cs-ai-agent-editor-image]:max-w-full [&_.cs-ai-agent-editor-image]:rounded-lg [&_.cs-ai-agent-editor-image]:object-contain [&_.cs-ai-agent-editor-image-wrap-uploading_.cs-ai-agent-editor-image]:opacity-55"
}
return "h-full min-h-12 max-h-[20vh] overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none sm:max-h-none [&_.ProseMirror-focused]:outline-none [&_p]:m-0 [&_p+.cs-agent-editor-image-wrap]:mt-2 [&_.cs-agent-editor-image-wrap]:my-2 [&_.cs-agent-editor-image]:max-h-64 [&_.cs-agent-editor-image]:max-w-full [&_.cs-agent-editor-image]:rounded-md [&_.cs-agent-editor-image]:object-contain [&_.cs-agent-editor-image-wrap-uploading_.cs-agent-editor-image]:opacity-55 [&_p.is-editor-empty:first-child]:before:text-muted-foreground"
return "h-full min-h-12 max-h-[20vh] overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none sm:max-h-none [&_.ProseMirror-focused]:outline-none [&_p]:m-0 [&_p+.cs-ai-agent-editor-image-wrap]:mt-2 [&_.cs-ai-agent-editor-image-wrap]:my-2 [&_.cs-ai-agent-editor-image]:max-h-64 [&_.cs-ai-agent-editor-image]:max-w-full [&_.cs-ai-agent-editor-image]:rounded-md [&_.cs-ai-agent-editor-image]:object-contain [&_.cs-ai-agent-editor-image-wrap-uploading_.cs-ai-agent-editor-image]:opacity-55 [&_p.is-editor-empty:first-child]:before:text-muted-foreground"
}
function getToolbarClassName(variant: SharedMessageEditorVariant) {
web/components/support-chat/message-list.tsx
+1 -1
View File
@@ -219,7 +219,7 @@ export const SupportChatMessageList = forwardRef<SupportChatMessageListHandle, S
return (
<div
ref={containerRef}
className="cs-agent-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4"
className="cs-ai-agent-scrollbar flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4"
>
<div ref={contentRef} className="flex flex-col gap-4">
{hasMoreOlder && onLoadOlder ? (
web/components/support-chat/widget-demo.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ import { useEffect, useMemo, useState } from "react"
import type { CSAgentConfig } from "@/lib/sdk/config-types"
import { useI18n } from "@/i18n/provider"
const STORAGE_KEY = "cs-agent-web-widget-test-config"
const STORAGE_KEY = "cs-ai-agent-web-widget-test-config"
const DEFAULT_JWT_TTL_MINUTES = "30"
const INITIAL_CONFIG: CSAgentConfig = {
channelId: "",
@@ -56,13 +56,13 @@ function removeMountedWidget() {
window.CSAgentWidget?.destroy()
document
.querySelectorAll(
'[data-cs-agent-widget="launcher"], [data-cs-agent-widget="frame"], [data-cs-agent-widget="script"]'
'[data-cs-ai-agent-widget="launcher"], [data-cs-ai-agent-widget="frame"], [data-cs-ai-agent-widget="script"]'
)
.forEach((node) => node.remove())
delete window.CSAgentConfig
delete window.__CS_AGENT_WIDGET_CONFIG__
delete window.__CS_AGENT_WIDGET_STATE__
delete window.__CS_AI_AGENT_WIDGET_CONFIG__
delete window.__CS_AI_AGENT_WIDGET_STATE__
delete window.CSAgentWidget
}
web/lib/api/im.ts
+2 -2
View File
@@ -130,8 +130,8 @@ export type ImCustomerSession = ImCustomerSessionExchangeResponse & {
channelId: string
}
const GUEST_STORAGE_KEY = "cs_agent_im_guest_id"
const CUSTOMER_SESSION_STORAGE_KEY = "cs_agent_customer_session"
const GUEST_STORAGE_KEY = "cs_ai_agent_im_guest_id"
const CUSTOMER_SESSION_STORAGE_KEY = "cs_ai_agent_customer_session"
const CUSTOMER_SESSION_TOKEN_HEADER = "X-Customer-Session-Token"
const CUSTOMER_SESSION_EXPIRES_HEADER = "X-Customer-Session-Expires-At"
const API_BASE_URL =
web/lib/im-editor-image.ts
+9 -9
View File
@@ -30,15 +30,15 @@ export const MessageImageExtension = Image.extend({
return ({ node }) => {
const wrapper = document.createElement("span")
wrapper.className =
"cs-agent-editor-image-wrap relative inline-block max-w-full align-middle"
"cs-ai-agent-editor-image-wrap relative inline-block max-w-full align-middle"
const image = document.createElement("img")
image.className = "cs-agent-editor-image"
image.className = "cs-ai-agent-editor-image"
image.draggable = true
const overlay = document.createElement("span")
overlay.className =
"cs-agent-editor-image-loading pointer-events-none absolute inset-0 hidden items-center justify-center rounded-lg bg-background/55 backdrop-blur-[1px]"
"cs-ai-agent-editor-image-loading pointer-events-none absolute inset-0 hidden items-center justify-center rounded-lg bg-background/55 backdrop-blur-[1px]"
const spinner = document.createElement("span")
spinner.className =
@@ -115,10 +115,10 @@ export function markEditorImageUploadedByTitle(
image.setAttribute("data-provider", uploaded.provider)
image.setAttribute("data-storage-key", uploaded.storageKey)
image.setAttribute("alt", uploaded.filename || image.getAttribute("alt") || "image")
image.classList.remove("cs-agent-editor-image-uploading")
image.classList.remove("cs-ai-agent-editor-image-uploading")
image.removeAttribute("data-uploading")
image.removeAttribute("title")
setImageUploading(image.closest(".cs-agent-editor-image-wrap"), false)
setImageUploading(image.closest(".cs-ai-agent-editor-image-wrap"), false)
}
export function setEditorImageUploadingByTitle(editor: Editor, title: string) {
@@ -126,9 +126,9 @@ export function setEditorImageUploadingByTitle(editor: Editor, title: string) {
if (!image) {
return
}
image.classList.add("cs-agent-editor-image-uploading")
image.classList.add("cs-ai-agent-editor-image-uploading")
image.setAttribute("data-uploading", "true")
setImageUploading(image.closest(".cs-agent-editor-image-wrap"), true)
setImageUploading(image.closest(".cs-ai-agent-editor-image-wrap"), true)
}
export function buildSendableEditorHTML(
@@ -223,8 +223,8 @@ function setImageUploading(wrapper: Element | null, uploading: boolean) {
if (!(wrapper instanceof HTMLElement)) {
return
}
wrapper.classList.toggle("cs-agent-editor-image-wrap-uploading", uploading)
const overlay = wrapper.querySelector<HTMLElement>(".cs-agent-editor-image-loading")
wrapper.classList.toggle("cs-ai-agent-editor-image-wrap-uploading", uploading)
const overlay = wrapper.querySelector<HTMLElement>(".cs-ai-agent-editor-image-loading")
if (overlay) {
overlay.classList.toggle("hidden", !uploading)
overlay.classList.toggle("flex", uploading)
web/lib/sdk/config-types.ts
+2 -2
View File
@@ -33,7 +33,7 @@ declare global {
interface Window {
CSAgentConfig?: CSAgentConfig
CSAgentWidget?: CSAgentWidget
__CS_AGENT_WIDGET_CONFIG__?: SupportChatRuntimeConfig
__CS_AGENT_WIDGET_STATE__?: unknown
__CS_AI_AGENT_WIDGET_CONFIG__?: SupportChatRuntimeConfig
__CS_AI_AGENT_WIDGET_STATE__?: unknown
}
}
web/lib/sdk/cs-ai-agent-sdk.ts
+16 -16
View File
@@ -57,10 +57,10 @@ function getLauncherText() {
}
type FrameMessage =
| { type: "cs-agent:init"; payload: SupportChatRuntimeConfig }
| { type: "cs-agent:open" }
| { type: "cs-agent:minimize" }
| { type: "cs-agent:maximized"; payload: { isMaximized: boolean } }
| { type: "cs-ai-agent:init"; payload: SupportChatRuntimeConfig }
| { type: "cs-ai-agent:open" }
| { type: "cs-ai-agent:minimize" }
| { type: "cs-ai-agent:maximized"; payload: { isMaximized: boolean } }
(function () {
const DEFAULT_CONFIG: Pick<
@@ -72,7 +72,7 @@ type FrameMessage =
width: "380px",
}
const existingState = window.__CS_AGENT_WIDGET_STATE__ as WidgetState | undefined
const existingState = window.__CS_AI_AGENT_WIDGET_STATE__ as WidgetState | undefined
const state: WidgetState =
existingState || {
button: null,
@@ -91,7 +91,7 @@ type FrameMessage =
animationDuration: 260,
}
if (!existingState) {
window.__CS_AGENT_WIDGET_STATE__ = state
window.__CS_AI_AGENT_WIDGET_STATE__ = state
}
function normalizeConfig(config?: CSAgentConfig): NormalizedCSAgentConfig {
@@ -272,7 +272,7 @@ type FrameMessage =
try {
state.frame.contentWindow.postMessage(message, state.frameUrl.origin)
} catch (error) {
console.error("[cs-agent-widget] postMessage failed", error)
console.error("[cs-ai-agent-widget] postMessage failed", error)
}
}
@@ -284,14 +284,14 @@ type FrameMessage =
if (!state.initSent) {
state.initSent = true
postToFrame({
type: "cs-agent:init",
type: "cs-ai-agent:init",
payload: state.frameConfig || createFrameConfig(state.config, ""),
})
}
postToFrame({ type: state.isOpen ? "cs-agent:open" : "cs-agent:minimize" })
postToFrame({ type: state.isOpen ? "cs-ai-agent:open" : "cs-ai-agent:minimize" })
postToFrame({
type: "cs-agent:maximized",
type: "cs-ai-agent:maximized",
payload: { isMaximized: state.isMaximized },
})
}
@@ -392,24 +392,24 @@ type FrameMessage =
}
const data = (event.data || {}) as { type?: string }
if (data.type === "cs-agent:ready") {
if (data.type === "cs-ai-agent:ready") {
state.frameReady = true
flushFrameState()
return
}
if (data.type === "cs-agent:request-minimize") {
if (data.type === "cs-ai-agent:request-minimize") {
state.isOpen = false
syncFrameVisibility()
return
}
if (data.type === "cs-agent:request-close") {
if (data.type === "cs-ai-agent:request-close") {
destroyFrame()
return
}
if (data.type === "cs-agent:request-toggle-maximize") {
if (data.type === "cs-ai-agent:request-toggle-maximize") {
state.isMaximized = !state.isMaximized
syncFrameVisibility()
}
@@ -499,7 +499,7 @@ type FrameMessage =
state.config.baseUrl = widgetBaseUrl
}
if (!state.config.channelId) {
console.error("[cs-agent-widget] channelId is required")
console.error("[cs-ai-agent-widget] channelId is required")
return
}
@@ -548,7 +548,7 @@ type FrameMessage =
syncFrameVisibility()
})
.catch((error) => {
console.error("[cs-agent-widget] open failed", error)
console.error("[cs-ai-agent-widget] open failed", error)
})
}
web/lib/sdk/runtime-config.ts
+3 -3
View File
@@ -33,8 +33,8 @@ export function readSupportChatRuntimeConfig(): SupportChatRuntimeConfig {
width: query.get("width") ?? undefined,
}
if (window.__CS_AGENT_WIDGET_CONFIG__) {
return window.__CS_AGENT_WIDGET_CONFIG__
if (window.__CS_AI_AGENT_WIDGET_CONFIG__) {
return window.__CS_AI_AGENT_WIDGET_CONFIG__
}
if (window.CSAgentConfig) {
const { getUserToken: _getUserToken, ...hostConfig } = window.CSAgentConfig
@@ -50,5 +50,5 @@ export function setSupportChatRuntimeConfig(config: SupportChatRuntimeConfig) {
if (typeof window === "undefined") {
return
}
window.__CS_AGENT_WIDGET_CONFIG__ = config
window.__CS_AI_AGENT_WIDGET_CONFIG__ = config
}
web/lib/support-host-bridge.ts
+8 -8
View File
@@ -8,14 +8,14 @@ type HostBridgeOptions = {
onMaximizedChange?: (isMaximized: boolean) => void
}
const INIT_MESSAGE_TYPE = "cs-agent:init"
const OPEN_MESSAGE_TYPE = "cs-agent:open"
const MINIMIZE_MESSAGE_TYPE = "cs-agent:minimize"
const MAXIMIZED_MESSAGE_TYPE = "cs-agent:maximized"
const READY_MESSAGE_TYPE = "cs-agent:ready"
const REQUEST_MINIMIZE_MESSAGE_TYPE = "cs-agent:request-minimize"
const REQUEST_CLOSE_MESSAGE_TYPE = "cs-agent:request-close"
const REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE = "cs-agent:request-toggle-maximize"
const INIT_MESSAGE_TYPE = "cs-ai-agent:init"
const OPEN_MESSAGE_TYPE = "cs-ai-agent:open"
const MINIMIZE_MESSAGE_TYPE = "cs-ai-agent:minimize"
const MAXIMIZED_MESSAGE_TYPE = "cs-ai-agent:maximized"
const READY_MESSAGE_TYPE = "cs-ai-agent:ready"
const REQUEST_MINIMIZE_MESSAGE_TYPE = "cs-ai-agent:request-minimize"
const REQUEST_CLOSE_MESSAGE_TYPE = "cs-ai-agent:request-close"
const REQUEST_TOGGLE_MAXIMIZE_MESSAGE_TYPE = "cs-ai-agent:request-toggle-maximize"
export function bindSupportHostBridge(options: HostBridgeOptions = {}) {
if (typeof window === "undefined") {
web/public/sdk/cs-ai-agent-sdk.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/styles/main.scss
+2 -2
View File
@@ -4,7 +4,7 @@
$thumb: #cbd5e1;
$thumb-hover: #94a3b8;
.cs-agent-scrollbar {
.cs-ai-agent-scrollbar {
scrollbar-width: thin;
scrollbar-color: $thumb transparent;
@@ -29,7 +29,7 @@ $thumb-hover: #94a3b8;
}
}
.dark .cs-agent-scrollbar {
.dark .cs-ai-agent-scrollbar {
scrollbar-color: hsl(var(--border)) transparent;
&::-webkit-scrollbar-thumb {