@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/chat/Chat.svelte.d.ts

@@ -0,0 +1,76 @@
+import type { Snippet } from 'svelte';
+import { type Message, type RoleConfig, type ChatAlign, type ChatMode, type SendHotKey, type EnableUploadProps } from '@chenzy-design/core';
+import type { UploadFileItem } from '../upload/types.js';
+import type { RenderInputAreaProps, RenderAvatarProps, RenderTitleProps, RenderContentProps, RenderActionProps, RenderFullChatBoxProps, RenderHintBoxProps } from './types.js';
+interface Props {
+    /** 消息列表。 */
+    chats?: Message[];
+    /** 角色配置（名称/头像/色）。 */
+    roleConfig?: RoleConfig;
+    /** 布局对齐。 */
+    align?: ChatAlign;
+    /** 气泡模式。 */
+    mode?: ChatMode;
+    /** 发送快捷键。 */
+    sendHotKey?: SendHotKey;
+    /** 是否展示清除上下文按钮。 */
+    showClearContext?: boolean;
+    /** 是否展示停止生成按钮。 */
+    showStopGenerate?: boolean;
+    /**
+     * 是否可以发送（对齐 Semi canSend）。未设置时由输入内容 / 附件推断；
+     * 显式设置时以此为准。
+     */
+    canSend?: boolean | undefined;
+    /** 提示项列表。 */
+    hints?: string[];
+    /** 上传能力（true/false 或三态对象）。 */
+    enableUpload?: boolean | EnableUploadProps;
+    /** 透传内部 Upload 的 props。 */
+    uploadProps?: Record<string, unknown>;
+    /** 上传按钮 Tooltip 提示（对齐 Semi uploadTipProps）；传对象则用 Tooltip 包裹上传触发器。 */
+    uploadTipProps?: Record<string, unknown>;
+    /** 透传 MarkdownRender props。 */
+    markdownRenderProps?: Record<string, unknown>;
+    /** 输入框占位。 */
+    placeholder?: string;
+    /** 顶部插槽。 */
+    topSlot?: Snippet;
+    /** 底部插槽（列表与输入区之间）。 */
+    bottomSlot?: Snippet;
+    /** 附加类名。 */
+    class?: string;
+    /** 内联样式。 */
+    style?: string;
+    onChatsChange?: (chats: Message[]) => void;
+    onMessageSend?: (content: string, attachment: UploadFileItem[]) => void;
+    onInputChange?: (props: {
+        value: string;
+        attachment: UploadFileItem[];
+    }) => void;
+    onClear?: () => void;
+    onHintClick?: (hint: string) => void;
+    onStopGenerator?: () => void;
+    onMessageCopy?: (message: Message) => void;
+    onMessageDelete?: (message: Message) => void;
+    onMessageReset?: (message: Message) => void;
+    onMessageGoodFeedback?: (message: Message) => void;
+    onMessageBadFeedback?: (message: Message) => void;
+    renderInputArea?: Snippet<[RenderInputAreaProps]>;
+    renderChatBoxAvatar?: Snippet<[RenderAvatarProps]>;
+    renderChatBoxTitle?: Snippet<[RenderTitleProps]>;
+    renderChatBoxContent?: Snippet<[RenderContentProps]>;
+    renderChatBoxAction?: Snippet<[RenderActionProps]>;
+    renderFullChatBox?: Snippet<[RenderFullChatBoxProps]>;
+    renderHintBox?: Snippet<[RenderHintBoxProps]>;
+    renderDivider?: Snippet<[Message]>;
+}
+declare const Chat: import("svelte").Component<Props, {
+    resetMessage: () => void;
+    scrollToBottom: (animation?: boolean) => void;
+    clearContext: () => void;
+    sendMessage: (content: string, attachment?: UploadFileItem[]) => void;
+}, "">;
+type Chat = ReturnType<typeof Chat>;
+export default Chat;
+//# sourceMappingURL=Chat.svelte.d.ts.map

package/dist/chat/Chat.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/Chat.svelte.ts"],"names":[],"mappings":"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"}

package/dist/chat/ChatBox.svelte

@@ -0,0 +1,207 @@
+<!--
+  ChatBox — 单条 Chat 消息组合器（严格对齐 Semi chat/chatBox/index.tsx）。
+  组合子组件：ChatBoxAvatar / ChatBoxTitle / ChatBoxContent / ChatBoxAction（各自对齐 Semi 同名文件）。
+  DOM：.cd-chat-chatBox(-right) > avatar + .cd-chat-chatBox-wrap(title / content / action)。
+  divider 消息渲染分割线（renderDivider 可覆盖）；renderFullChatBox 整块覆盖（提供拆分节点）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    CHAT_ROLE,
+    CHAT_ALIGN,
+    CHAT_MODE,
+    MESSAGE_STATUS,
+    type Message,
+    type Metadata,
+    type Content,
+    type ChatAlign,
+    type ChatMode,
+  } from '@chenzy-design/core';
+  import { useLocale } from '../locale-provider/index.js';
+  import ChatBoxAvatar from './ChatBoxAvatar.svelte';
+  import ChatBoxTitle from './ChatBoxTitle.svelte';
+  import ChatBoxContent from './ChatBoxContent.svelte';
+  import ChatBoxAction from './ChatBoxAction.svelte';
+  import type {
+    RenderAvatarProps,
+    RenderTitleProps,
+    RenderContentProps,
+    RenderActionProps,
+    RenderFullChatBoxProps,
+  } from './types.js';
+
+  interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    align?: ChatAlign;
+    mode?: ChatMode;
+    lastChat?: boolean;
+    markdownRenderProps?: Record<string, unknown> | undefined;
+    onMessageCopy?: ((message: Message) => void) | undefined;
+    onMessageDelete?: ((message: Message) => void) | undefined;
+    onMessageReset?: ((message: Message) => void) | undefined;
+    onMessageGoodFeedback?: ((message: Message) => void) | undefined;
+    onMessageBadFeedback?: ((message: Message) => void) | undefined;
+    renderChatBoxAvatar?: Snippet<[RenderAvatarProps]> | undefined;
+    renderChatBoxTitle?: Snippet<[RenderTitleProps]> | undefined;
+    renderChatBoxContent?: Snippet<[RenderContentProps]> | undefined;
+    renderChatBoxAction?: Snippet<[RenderActionProps]> | undefined;
+    renderFullChatBox?: Snippet<[RenderFullChatBoxProps]> | undefined;
+    renderDivider?: Snippet<[Message]> | undefined;
+  }
+
+  let {
+    message,
+    role,
+    align = CHAT_ALIGN.LEFT_RIGHT,
+    mode = CHAT_MODE.BUBBLE,
+    lastChat = false,
+    markdownRenderProps,
+    onMessageCopy,
+    onMessageDelete,
+    onMessageReset,
+    onMessageGoodFeedback,
+    onMessageBadFeedback,
+    renderChatBoxAvatar,
+    renderChatBoxTitle,
+    renderChatBoxContent,
+    renderChatBoxAction,
+    renderFullChatBox,
+    renderDivider,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  const isDivider = $derived(message.role === CHAT_ROLE.DIVIDER);
+  const isUser = $derived(message.role === CHAT_ROLE.USER);
+  const isLoading = $derived(message.status === MESSAGE_STATUS.LOADING);
+  const isError = $derived(message.status === MESSAGE_STATUS.ERROR);
+
+  // 气泡显隐：bubble→全部；noBubble→无；userBubble→仅 user。
+  const showBubble = $derived(
+    mode === CHAT_MODE.BUBBLE || (mode === CHAT_MODE.USER_BUBBLE && isUser),
+  );
+  // 右侧布局：user + leftRight（对齐 Semi chatBox-right）。
+  const isRight = $derived(isUser && align === CHAT_ALIGN.LEFT_RIGHT);
+
+  const title = $derived(role?.name ?? message.name ?? message.role ?? '');
+
+  // 供 action 复制用的纯文本（与 content 内部归一一致）。
+  const contentText = $derived.by(() => {
+    const content = message.content;
+    if (typeof content === 'string') return content;
+    if (Array.isArray(content)) {
+      return content
+        .filter((c): c is Content => c.type === 'text' && typeof c.text === 'string')
+        .map((c) => c.text)
+        .join('\n\n');
+    }
+    return '';
+  });
+</script>
+
+{#if isDivider}
+  {#if renderDivider}
+    {@render renderDivider(message)}
+  {:else}
+    <div class="cd-chat-divider" role="separator">
+      {loc().t('Chat.clearContext')}
+    </div>
+  {/if}
+{:else if renderFullChatBox}
+  {@render renderFullChatBox({
+    message,
+    role,
+    className: 'cd-chat-chatBox',
+    defaultNodes: { avatar: avatarNode, title: titleNode, content: contentNode, action: actionNode },
+  })}
+{:else}
+  <div class="cd-chat-chatBox" class:cd-chat-chatBox-right={isRight}>
+    {@render avatarNode()}
+    <div class="cd-chat-chatBox-wrap">
+      {@render titleNode()}
+      {@render contentNode()}
+      {@render actionNode()}
+    </div>
+  </div>
+{/if}
+
+{#snippet avatarNode()}
+  <ChatBoxAvatar {message} {role} {title} {renderChatBoxAvatar} />
+{/snippet}
+{#snippet titleNode()}
+  <ChatBoxTitle {message} {role} {title} {renderChatBoxTitle} />
+{/snippet}
+{#snippet contentNode()}
+  <ChatBoxContent
+    {message}
+    {role}
+    {isUser}
+    {isLoading}
+    {isError}
+    {showBubble}
+    {markdownRenderProps}
+    {renderChatBoxContent}
+  />
+{/snippet}
+{#snippet actionNode()}
+  <ChatBoxAction
+    {message}
+    {lastChat}
+    {contentText}
+    {onMessageCopy}
+    {onMessageDelete}
+    {onMessageReset}
+    {onMessageGoodFeedback}
+    {onMessageBadFeedback}
+    {renderChatBoxAction}
+  />
+{/snippet}
+
+<style>
+  /* —— chatBox 容器（对齐 Semi .semi-chat-chatBox） —— */
+  .cd-chat-chatBox {
+    display: flex;
+    flex-direction: row;
+    margin-top: var(--cd-chat-chatBox-marginY);
+    margin-bottom: var(--cd-chat-chatBox-marginY);
+    column-gap: var(--cd-chat-chatBox-columnGap);
+  }
+
+  .cd-chat-chatBox:hover :global(.cd-chat-chatBox-action) {
+    visibility: visible;
+  }
+
+  .cd-chat-chatBox-right {
+    flex-direction: row-reverse;
+  }
+  .cd-chat-chatBox-right .cd-chat-chatBox-wrap {
+    align-items: flex-end;
+  }
+
+  .cd-chat-chatBox :global(.cd-chat-chatBox-avatar) {
+    flex-shrink: 0;
+  }
+
+  .cd-chat-chatBox-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    row-gap: var(--cd-chat-chatBox-wrap);
+    max-width: calc(100% - var(--cd-chat-chatBox-columnGap) - var(--cd-chat-chatBox-avatar-width));
+  }
+
+  /* —— divider（对齐 Semi -divider） —— */
+  .cd-chat-divider {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--cd-chat-divider);
+    font-size: var(--cd-chat-divider-font-size);
+    font-weight: var(--cd-chat-divider-font-weight);
+    margin-top: var(--cd-chat-divider-marginY);
+    margin-bottom: var(--cd-chat-divider-marginY);
+  }
+</style>

package/dist/chat/ChatBox.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import { type Message, type Metadata, type ChatAlign, type ChatMode } from '@chenzy-design/core';
+import type { RenderAvatarProps, RenderTitleProps, RenderContentProps, RenderActionProps, RenderFullChatBoxProps } from './types.js';
+interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    align?: ChatAlign;
+    mode?: ChatMode;
+    lastChat?: boolean;
+    markdownRenderProps?: Record<string, unknown> | undefined;
+    onMessageCopy?: ((message: Message) => void) | undefined;
+    onMessageDelete?: ((message: Message) => void) | undefined;
+    onMessageReset?: ((message: Message) => void) | undefined;
+    onMessageGoodFeedback?: ((message: Message) => void) | undefined;
+    onMessageBadFeedback?: ((message: Message) => void) | undefined;
+    renderChatBoxAvatar?: Snippet<[RenderAvatarProps]> | undefined;
+    renderChatBoxTitle?: Snippet<[RenderTitleProps]> | undefined;
+    renderChatBoxContent?: Snippet<[RenderContentProps]> | undefined;
+    renderChatBoxAction?: Snippet<[RenderActionProps]> | undefined;
+    renderFullChatBox?: Snippet<[RenderFullChatBoxProps]> | undefined;
+    renderDivider?: Snippet<[Message]> | undefined;
+}
+declare const ChatBox: import("svelte").Component<Props, {}, "">;
+type ChatBox = ReturnType<typeof ChatBox>;
+export default ChatBox;
+//# sourceMappingURL=ChatBox.svelte.d.ts.map

package/dist/chat/ChatBox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBox.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatBox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAKH,KAAK,OAAO,EACZ,KAAK,QAAQ,EAEb,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAC;AAM/B,OAAO,KAAK,EACR,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzD,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1D,qBAAqB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjE,oBAAoB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/D,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAAC,GAAG,SAAS,CAAC;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;CAChD;AA0GH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/chat/ChatBoxAction.svelte

@@ -0,0 +1,190 @@
+<!--
+  ChatBoxAction — 消息操作区（严格对齐 Semi chat/chatBox/chatBoxAction.tsx）。
+  Button(borderless) + 具名图标：copy=IconCopyStroked、reset=IconRedoStroked、delete=IconDeleteStroked、
+  like=like?IconLikeThumb:IconThumbUpStroked、dislike=同 like 但 scaleY(-1) 翻转（对齐 Semi -action-icon-flip）。
+  renderChatBoxAction 可覆盖（提供 defaultActions + 拆分节点 defaultActionsObj）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Message } from '@chenzy-design/core';
+  import {
+    IconCopyStroked,
+    IconLikeThumb,
+    IconThumbUpStroked,
+    IconRedoStroked,
+    IconDeleteStroked,
+  } from '@chenzy-design/icons';
+  import { useLocale } from '../locale-provider/index.js';
+  import Button from '../button/Button.svelte';
+  import type { RenderActionProps } from './types.js';
+
+  interface Props {
+    message: Message;
+    lastChat: boolean;
+    contentText: string;
+    onMessageCopy?: ((message: Message) => void) | undefined;
+    onMessageDelete?: ((message: Message) => void) | undefined;
+    onMessageReset?: ((message: Message) => void) | undefined;
+    onMessageGoodFeedback?: ((message: Message) => void) | undefined;
+    onMessageBadFeedback?: ((message: Message) => void) | undefined;
+    renderChatBoxAction?: Snippet<[RenderActionProps]> | undefined;
+  }
+
+  let {
+    message,
+    lastChat,
+    contentText,
+    onMessageCopy,
+    onMessageDelete,
+    onMessageReset,
+    onMessageGoodFeedback,
+    onMessageBadFeedback,
+    renderChatBoxAction,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  async function handleCopy(): Promise<void> {
+    try {
+      await navigator.clipboard?.writeText(contentText);
+    } catch {
+      // 剪贴板不可用时静默；仍派发回调交由使用方兜底。
+    }
+    onMessageCopy?.(message);
+  }
+</script>
+
+{#if renderChatBoxAction}
+  {@render renderChatBoxAction({
+    message,
+    className: 'cd-chat-chatBox-action',
+    defaultActions,
+    defaultActionsObj: {
+      copy: actionCopy,
+      like: actionLike,
+      dislike: actionDislike,
+      reset: actionReset,
+      delete: actionDelete,
+    },
+  })}
+{:else}
+  {@render defaultActions()}
+{/if}
+
+{#snippet defaultActions()}
+  <div class="cd-chat-chatBox-action">
+    {@render actionCopy()}
+    {#if lastChat}
+      {@render actionReset()}
+    {/if}
+    {@render actionLike()}
+    {@render actionDislike()}
+    {@render actionDelete()}
+  </div>
+{/snippet}
+
+{#snippet actionCopy()}
+  <Button
+    class="cd-chat-chatBox-action-btn"
+    theme="borderless"
+    type="tertiary"
+    size="small"
+    onclick={handleCopy}
+    ariaLabel={loc().t('Chat.copy')}
+    title={loc().t('Chat.copy')}
+    icon={copyIcon}
+  />
+{/snippet}
+{#snippet copyIcon()}<IconCopyStroked />{/snippet}
+
+{#snippet actionReset()}
+  <Button
+    class="cd-chat-chatBox-action-btn"
+    theme="borderless"
+    type="tertiary"
+    size="small"
+    onclick={() => onMessageReset?.(message)}
+    ariaLabel={loc().t('Chat.reset')}
+    title={loc().t('Chat.reset')}
+    icon={resetIcon}
+  />
+{/snippet}
+{#snippet resetIcon()}<IconRedoStroked />{/snippet}
+
+{#snippet actionLike()}
+  <Button
+    class={`cd-chat-chatBox-action-btn${message.like ? ' cd-chat-chatBox-action-btn-active' : ''}`}
+    theme="borderless"
+    type="tertiary"
+    size="small"
+    aria-pressed={Boolean(message.like)}
+    onclick={() => onMessageGoodFeedback?.(message)}
+    ariaLabel={loc().t('Chat.like')}
+    title={loc().t('Chat.like')}
+    icon={likeIcon}
+  />
+{/snippet}
+{#snippet likeIcon()}
+  {#if message.like}<IconLikeThumb />{:else}<IconThumbUpStroked />{/if}
+{/snippet}
+
+{#snippet actionDislike()}
+  <Button
+    class={`cd-chat-chatBox-action-btn${message.dislike ? ' cd-chat-chatBox-action-btn-active' : ''}`}
+    theme="borderless"
+    type="tertiary"
+    size="small"
+    aria-pressed={Boolean(message.dislike)}
+    onclick={() => onMessageBadFeedback?.(message)}
+    ariaLabel={loc().t('Chat.dislike')}
+    title={loc().t('Chat.dislike')}
+    icon={dislikeIcon}
+  />
+{/snippet}
+{#snippet dislikeIcon()}
+  <!-- 点踩 = 点赞图标 scaleY(-1) 翻转（对齐 Semi -action-icon-flip） -->
+  <span class="cd-chat-chatBox-action-icon-flip">
+    {#if message.dislike}<IconLikeThumb />{:else}<IconThumbUpStroked />{/if}
+  </span>
+{/snippet}
+
+{#snippet actionDelete()}
+  <Button
+    class="cd-chat-chatBox-action-btn"
+    theme="borderless"
+    type="tertiary"
+    size="small"
+    onclick={() => onMessageDelete?.(message)}
+    ariaLabel={loc().t('Chat.delete')}
+    title={loc().t('Chat.delete')}
+    icon={deleteIcon}
+  />
+{/snippet}
+{#snippet deleteIcon()}<IconDeleteStroked />{/snippet}
+
+<style>
+  /* —— 操作区（对齐 Semi -action，默认隐藏 hover 显示） —— */
+  .cd-chat-chatBox-action {
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    position: relative;
+    column-gap: var(--cd-chat-chatBox-action-columnGap);
+    margin-left: var(--cd-chat-chatBox-action-marginX);
+    margin-right: var(--cd-chat-chatBox-action-marginX);
+  }
+  .cd-chat-chatBox-action :global(.cd-chat-chatBox-action-btn) {
+    color: var(--cd-chat-chatBox-action-icon);
+  }
+  .cd-chat-chatBox-action :global(.cd-chat-chatBox-action-btn:hover) {
+    color: var(--cd-chat-chatBox-action-icon-hover);
+    background-color: var(--cd-chat-chatBox-action-bg-hover);
+  }
+  .cd-chat-chatBox-action :global(.cd-chat-chatBox-action-btn-active) {
+    color: var(--cd-color-primary);
+  }
+  .cd-chat-chatBox-action-icon-flip {
+    display: inline-flex;
+    transform: scaleY(-1);
+  }
+</style>

package/dist/chat/ChatBoxAction.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { Message } from '@chenzy-design/core';
+import type { RenderActionProps } from './types.js';
+interface Props {
+    message: Message;
+    lastChat: boolean;
+    contentText: string;
+    onMessageCopy?: ((message: Message) => void) | undefined;
+    onMessageDelete?: ((message: Message) => void) | undefined;
+    onMessageReset?: ((message: Message) => void) | undefined;
+    onMessageGoodFeedback?: ((message: Message) => void) | undefined;
+    onMessageBadFeedback?: ((message: Message) => void) | undefined;
+    renderChatBoxAction?: Snippet<[RenderActionProps]> | undefined;
+}
+declare const ChatBoxAction: import("svelte").Component<Props, {}, "">;
+type ChatBoxAction = ReturnType<typeof ChatBoxAction>;
+export default ChatBoxAction;
+//# sourceMappingURL=ChatBoxAction.svelte.d.ts.map

package/dist/chat/ChatBoxAction.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBoxAction.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatBoxAction.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAUnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlD,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzD,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1D,qBAAqB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjE,oBAAoB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC;CAChE;AAoGH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/chat/ChatBoxAvatar.svelte

@@ -0,0 +1,40 @@
+<!--
+  ChatBoxAvatar — 消息头像（严格对齐 Semi chat/chatBox/chatBoxAvatar.tsx）。
+  用本库 Avatar 组件；renderChatBoxAvatar 可覆盖（提供 defaultAvatar 供包裹）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Message, Metadata } from '@chenzy-design/core';
+  import Avatar from '../avatar/Avatar.svelte';
+  import type { RenderAvatarProps } from './types.js';
+
+  interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    title: string;
+    renderChatBoxAvatar?: Snippet<[RenderAvatarProps]> | undefined;
+  }
+
+  let { message, role, title, renderChatBoxAvatar }: Props = $props();
+</script>
+
+{#if renderChatBoxAvatar}
+  {@render renderChatBoxAvatar({ message, role, defaultAvatar })}
+{:else}
+  {@render defaultAvatar()}
+{/if}
+
+{#snippet defaultAvatar()}
+  {@const avatarSrc = typeof role?.avatar === 'string' ? role.avatar : ''}
+  {@const avatarStyle =
+    role?.color && typeof role.avatar !== 'string' ? `background:${role.color};` : ''}
+  <Avatar
+    class="cd-chat-chatBox-avatar"
+    size="extra-small"
+    src={avatarSrc}
+    alt={title}
+    style={avatarStyle}
+  >
+    {(title || '?').slice(0, 1).toUpperCase()}
+  </Avatar>
+{/snippet}

package/dist/chat/ChatBoxAvatar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { Message, Metadata } from '@chenzy-design/core';
+import type { RenderAvatarProps } from './types.js';
+interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    title: string;
+    renderChatBoxAvatar?: Snippet<[RenderAvatarProps]> | undefined;
+}
+declare const ChatBoxAvatar: import("svelte").Component<Props, {}, "">;
+type ChatBoxAvatar = ReturnType<typeof ChatBoxAvatar>;
+export default ChatBoxAvatar;
+//# sourceMappingURL=ChatBoxAvatar.svelte.d.ts.map

package/dist/chat/ChatBoxAvatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBoxAvatar.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatBoxAvatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlD,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,GAAG,SAAS,CAAC;CAChE;AA6BH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}