@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/chat/ChatBoxContent.svelte

@@ -0,0 +1,238 @@
+<!--
+  ChatBoxContent — 消息内容（严格对齐 Semi chat/chatBox/chatBoxContent.tsx）。
+  string / Content[] 归一：文本走 MarkdownRender（代码块用 ChatCode 覆盖，深色 topSlot），
+  图片/文件附件直渲。loading 三点 flashing 动画；user/error/bubble class 对齐 Semi。
+  renderChatBoxContent 可覆盖（提供 defaultContent 供包裹）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { MESSAGE_STATUS, type Message, type Metadata, type Content } from '@chenzy-design/core';
+  import { IconBriefStroked } from '@chenzy-design/icons';
+  import { MarkdownRender } from '../markdown-render/index.js';
+  import ChatCode from './ChatCode.svelte';
+  import type { RenderContentProps } from './types.js';
+
+  interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    isUser: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    showBubble: boolean;
+    markdownRenderProps?: Record<string, unknown> | undefined;
+    renderChatBoxContent?: Snippet<[RenderContentProps]> | undefined;
+  }
+
+  let {
+    message,
+    role,
+    isUser,
+    isLoading,
+    isError,
+    showBubble,
+    markdownRenderProps,
+    renderChatBoxContent,
+  }: Props = $props();
+
+  const contentText = $derived(resolveText(message.content));
+  const contentAttachments = $derived(resolveAttachments(message.content));
+
+  function resolveText(content: Message['content']): string {
+    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 '';
+  }
+
+  function resolveAttachments(content: Message['content']): Content[] {
+    if (Array.isArray(content)) {
+      return content.filter((c) => c.type === 'image_url' || c.type === 'file_url');
+    }
+    return [];
+  }
+</script>
+
+{#if renderChatBoxContent}
+  {@render renderChatBoxContent({
+    message,
+    role,
+    defaultContent,
+    className: 'cd-chat-chatBox-content',
+  })}
+{:else}
+  {@render defaultContent()}
+{/if}
+
+{#snippet defaultContent()}
+  <!-- user/error 背景仅在气泡态加（对齐 Semi wrapCls：-content-user=(bubble&&isUser)||userBubble、
+       -content-error=error&&(bubble||userBubble)）；noBubble 时无背景色。 -->
+  <div
+    class="cd-chat-chatBox-content"
+    class:cd-chat-chatBox-content-bubble={showBubble}
+    class:cd-chat-chatBox-content-user={showBubble && isUser}
+    class:cd-chat-chatBox-content-error={showBubble && isError}
+  >
+    {#if isLoading}
+      <!-- 三点 flashing 动画（对齐 Semi -content-loading-item） -->
+      <div class="cd-chat-chatBox-content-loading">
+        <div class="cd-chat-chatBox-content-loading-item"></div>
+      </div>
+    {:else}
+      {#if contentText}
+        <!-- 代码块用 chat 专属 ChatCode 覆盖（深色 topSlot + 语言标签 + 复制，对齐 Semi）。 -->
+        <MarkdownRender
+          raw={contentText}
+          format="md"
+          components={{ pre: ChatCode }}
+          {...markdownRenderProps}
+        />
+      {/if}
+      {#each contentAttachments as att, i (i)}
+        {#if att.type === 'image_url'}
+          <img class="cd-chat-attachment-img" src={att.image_url?.url} alt="" />
+        {:else}
+          <a
+            class="cd-chat-attachment-file"
+            href={att.file_url?.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconBriefStroked class="cd-chat-attachment-file-icon" />
+            <div class="cd-chat-attachment-file-info">
+              <span class="cd-chat-attachment-file-title">{att.file_url?.name}</span>
+            </div>
+          </a>
+        {/if}
+      {/each}
+    {/if}
+  </div>
+{/snippet}
+
+<style>
+  /* —— 内容（对齐 Semi -content-bubble/-user/-error） —— */
+  .cd-chat-chatBox-content {
+    overflow-wrap: anywhere;
+  }
+  .cd-chat-chatBox-content-bubble {
+    padding: var(--cd-chat-chatBox-content-paddingY) var(--cd-chat-chatBox-content-paddingX);
+    border-radius: var(--cd-chat-chatBox-content-radius);
+    background-color: var(--cd-chat-chatBox-content-bg);
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .cd-chat-chatBox-content :global(.cd-typography) {
+    color: var(--cd-chat-chatBox-content-text);
+  }
+  .cd-chat-chatBox-content-user {
+    background: var(--cd-chat-chatBox-content-user-bg);
+    color: var(--cd-chat-chatBox-content-user-text);
+  }
+  .cd-chat-chatBox-content-user :global(.cd-typography),
+  .cd-chat-chatBox-content-user :global(.cd-typography code) {
+    color: var(--cd-chat-chatBox-content-user-text);
+  }
+  .cd-chat-chatBox-content-error {
+    background: var(--cd-chat-chatBox-content-error-bg);
+  }
+  .cd-chat-chatBox-content-error :global(.cd-typography) {
+    color: var(--cd-chat-chatBox-content-error-text);
+  }
+
+  /* —— loading 三点 flashing 动画（对齐 Semi -content-loading-item + keyframes） —— */
+  .cd-chat-chatBox-content-loading {
+    display: flex;
+    align-items: baseline;
+  }
+  .cd-chat-chatBox-content-loading-item {
+    border-radius: 50%;
+    height: var(--cd-chat-chatBox-loading-width);
+    width: var(--cd-chat-chatBox-loading-width);
+    background-color: var(--cd-chat-chatBox-loading-bg);
+    margin: var(--cd-chat-chatBox-loading-item-marginY) var(--cd-chat-chatBox-loading-item-marginX);
+    overflow: visible;
+    position: relative;
+    animation: cd-chat-loading-flashing 0.8s infinite alternate;
+    animation-delay: -0.2s;
+    animation-timing-function: ease;
+  }
+  .cd-chat-chatBox-content-loading-item::before,
+  .cd-chat-chatBox-content-loading-item::after {
+    content: '';
+    border-radius: 50%;
+    height: var(--cd-chat-chatBox-loading-width);
+    width: var(--cd-chat-chatBox-loading-width);
+    background-color: var(--cd-chat-chatBox-loading-bg);
+    position: absolute;
+    top: 0;
+    animation: cd-chat-loading-flashing 0.8s infinite alternate;
+    animation-timing-function: ease;
+  }
+  .cd-chat-chatBox-content-loading-item::before {
+    left: calc(-1 * var(--cd-chat-chatBox-loading-item-gap));
+    animation-delay: -0.4s;
+  }
+  .cd-chat-chatBox-content-loading-item::after {
+    left: var(--cd-chat-chatBox-loading-item-gap);
+    animation-delay: 0s;
+  }
+
+  @keyframes cd-chat-loading-flashing {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* —— 附件（对齐 Semi -attachment-img/-file） —— */
+  .cd-chat-attachment-img {
+    border-radius: var(--cd-chat-attachment-img-radius);
+    vertical-align: top;
+    margin-top: var(--cd-chat-chatBox-content-attachment-marginY);
+    margin-bottom: var(--cd-chat-chatBox-content-attachment-marginY);
+    margin-right: var(--cd-chat-chatBox-content-attachment-marginRight);
+    object-fit: cover;
+    max-width: 240px;
+    max-height: 240px;
+  }
+  .cd-chat-attachment-file {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    height: var(--cd-chat-attachment-file-width);
+    column-gap: var(--cd-chat-attachment-file-columnGap);
+    padding: var(--cd-chat-attachment-file-padding);
+    border-radius: var(--cd-chat-attachment-file-radius);
+    background: var(--cd-chat-chatBox-other-attachment-file-bg);
+    text-decoration: none;
+    margin-top: var(--cd-chat-chatBox-content-attachment-marginY);
+    margin-bottom: var(--cd-chat-chatBox-content-attachment-marginY);
+    margin-right: var(--cd-chat-chatBox-content-attachment-marginRight);
+  }
+  .cd-chat-chatBox-content-user .cd-chat-attachment-file {
+    background: var(--cd-chat-chatBox-user-attachment-file-bg);
+  }
+  .cd-chat-attachment-file :global(.cd-chat-attachment-file-icon) {
+    color: var(--cd-chat-attachment-file-icon);
+  }
+  .cd-chat-attachment-file-info {
+    display: flex;
+    flex-direction: column;
+  }
+  .cd-chat-attachment-file-title {
+    font-size: var(--cd-chat-attachment-file-title-font-size);
+    color: var(--cd-chat-attachment-file-title);
+    max-width: var(--cd-chat-attachment-file-title-width);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { type Message, type Metadata } from '@chenzy-design/core';
+import type { RenderContentProps } from './types.js';
+interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    isUser: boolean;
+    isLoading: boolean;
+    isError: boolean;
+    showBubble: boolean;
+    markdownRenderProps?: Record<string, unknown> | undefined;
+    renderChatBoxContent?: Snippet<[RenderContentProps]> | undefined;
+}
+declare const ChatBoxContent: import("svelte").Component<Props, {}, "">;
+type ChatBoxContent = ReturnType<typeof ChatBoxContent>;
+export default ChatBoxContent;
+//# sourceMappingURL=ChatBoxContent.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBoxContent.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatBoxContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAkB,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAgB,MAAM,qBAAqB,CAAC;AAIhG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGnD,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IAC1D,oBAAoB,CAAC,EAAE,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,SAAS,CAAC;CAClE;AAwFH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/chat/ChatBoxTitle.svelte

@@ -0,0 +1,40 @@
+<!--
+  ChatBoxTitle — 消息标题（角色名，严格对齐 Semi chat/chatBox/chatBoxTitle.tsx）。
+  renderChatBoxTitle 可覆盖（提供 defaultTitle 供包裹）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { Message, Metadata } from '@chenzy-design/core';
+  import type { RenderTitleProps } from './types.js';
+
+  interface Props {
+    message: Message;
+    role?: Metadata | undefined;
+    title: string;
+    renderChatBoxTitle?: Snippet<[RenderTitleProps]> | undefined;
+  }
+
+  let { message, role, title, renderChatBoxTitle }: Props = $props();
+</script>
+
+{#if renderChatBoxTitle}
+  {@render renderChatBoxTitle({ message, role, defaultTitle })}
+{:else}
+  {@render defaultTitle()}
+{/if}
+
+{#snippet defaultTitle()}
+  {#if title}
+    <div class="cd-chat-chatBox-title">{title}</div>
+  {/if}
+{/snippet}
+
+<style>
+  .cd-chat-chatBox-title {
+    line-height: var(--cd-chat-chatBox-title-line-height);
+    font-size: var(--cd-chat-chatBox-title-font-size);
+    color: var(--cd-chat-chatBox-title);
+    font-weight: var(--cd-chat-chatBox-title-font-weight);
+    text-overflow: ellipsis;
+  }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBoxTitle.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatBoxTitle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGjD,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC;CAC9D;AA2BH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/chat/ChatCode.svelte

@@ -0,0 +1,139 @@
+<!--
+  ChatCode — Chat 消息内容的代码块覆盖（严格对齐 Semi chat/chatBox/code.tsx）。
+  通过 MarkdownRender components={{ pre: ChatCode }} 覆盖围栏代码块：
+  - 有语言 → <div.cd-chat-chatBox-content-code>（深色 topSlot 栏：语言标签 + 复制按钮 IconCopyStroked/IconTick）+ CodeHighlight。
+  - 无语言 → 纯 <pre><code>。
+  复制走 navigator.clipboard，2s 后复位为「复制」态（对齐 Semi copied 态）。
+-->
+<script lang="ts">
+  import type { Element, ElementContent } from 'hast';
+  import { IconCopyStroked, IconTick } from '@chenzy-design/icons';
+  import { CodeHighlight } from '../code-highlight/index.js';
+  import { useLocale } from '../locale-provider/index.js';
+
+  interface Props {
+    node?: Element;
+    [key: string]: unknown;
+  }
+
+  let { node }: Props = $props();
+
+  const loc = useLocale();
+
+  const codeEl = $derived(
+    node?.children?.find(
+      (c: ElementContent): c is Element => c.type === 'element' && c.tagName === 'code',
+    ),
+  );
+
+  function extractText(el: ElementContent): string {
+    if (el.type === 'text') return el.value;
+    if (el.type === 'element' && el.children) {
+      return el.children.map((c: ElementContent) => extractText(c)).join('');
+    }
+    return '';
+  }
+  const code = $derived(codeEl ? extractText(codeEl) : '');
+
+  const language = $derived.by(() => {
+    const cn = codeEl?.properties?.className;
+    const classes = Array.isArray(cn) ? cn.map(String) : cn ? [String(cn)] : [];
+    const langClass = classes.find((c) => c.startsWith('language-'));
+    return langClass ? langClass.slice('language-'.length) : undefined;
+  });
+
+  let copied = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  async function handleCopy(): Promise<void> {
+    try {
+      await navigator.clipboard?.writeText(code);
+    } catch {
+      // 剪贴板不可用时静默。
+    }
+    copied = true;
+    clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => (copied = false), 2000);
+  }
+</script>
+
+{#if language}
+  <div class="cd-chat-chatBox-content-code">
+    <div class="cd-chat-chatBox-content-code-topSlot">
+      <span class="cd-chat-chatBox-content-code-topSlot-type">{language}</span>
+      <span class="cd-chat-chatBox-content-code-topSlot-copy">
+        {#if copied}
+          <span class="cd-chat-chatBox-content-code-topSlot-copy-wrapper">
+            <IconTick />
+            {loc().t('Chat.copied')}
+          </span>
+        {:else}
+          <button
+            type="button"
+            class="cd-chat-chatBox-content-code-topSlot-copy-wrapper cd-chat-chatBox-content-code-topSlot-toCopy"
+            onclick={handleCopy}
+          >
+            <IconCopyStroked />
+            {loc().t('Chat.copy')}
+          </button>
+        {/if}
+      </span>
+    </div>
+    <CodeHighlight {code} {language} lineNumber={false} />
+  </div>
+{:else}
+  <pre><code>{code}</code></pre>
+{/if}
+
+<style>
+  /* —— 代码块（对齐 Semi -content-code：圆角 + 深色 topSlot） —— */
+  .cd-chat-chatBox-content-code {
+    border-radius: var(--cd-chat-chatBox-content-code-radius);
+    overflow: hidden;
+  }
+
+  .cd-chat-chatBox-content-code-topSlot {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--cd-chat-chatBox-code-topSlot-bg);
+    padding: var(--cd-chat-chatBox-content-code-topSlot-paddingX)
+      var(--cd-chat-chatBox-content-code-topSlot-paddingY);
+    color: var(--cd-chat-chatBox-code-topSlot);
+    font-size: var(--cd-chat-chatBox-code-topSlot-font-size);
+    line-height: var(--cd-chat-chatBox-code-topSlot-line-height);
+  }
+
+  .cd-chat-chatBox-content-code-topSlot-copy {
+    min-width: var(--cd-chat-chatBox-content-code-topSlot-copy-width);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .cd-chat-chatBox-content-code-topSlot-copy-wrapper {
+    display: flex;
+    align-items: center;
+    column-gap: var(--cd-chat-chatBox-content-code-topSlot-copy-columnGap);
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    color: var(--cd-chat-chatBox-code-topSlot);
+    line-height: var(--cd-chat-chatBox-code-topSlot-line-height);
+    padding: var(--cd-chat-chatBox-content-code-topSlot-copy-padding);
+    border-radius: var(--cd-chat-chatBox-content-code-topSlot-copy-radius);
+    font: inherit;
+    font-size: var(--cd-chat-chatBox-code-topSlot-font-size);
+  }
+
+  .cd-chat-chatBox-content-code-topSlot-toCopy:hover {
+    background: var(--cd-chat-chatBox-code-topSlot-toCopy-bg-hover);
+  }
+
+  /* CodeHighlight 内容背景对齐 Semi -code-content（去掉 CodeHighlight 自带 pre 圆角/margin，铺满） */
+  .cd-chat-chatBox-content-code :global(.cd-code-highlight) {
+    border-radius: 0;
+  }
+  .cd-chat-chatBox-content-code :global(pre[class*='language-']) {
+    margin: 0;
+    background: var(--cd-chat-chatBox-code-content);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Element } from 'hast';
+interface Props {
+    node?: Element;
+    [key: string]: unknown;
+}
+declare const ChatCode: import("svelte").Component<Props, {}, "">;
+type ChatCode = ReturnType<typeof ChatCode>;
+export default ChatCode;
+//# sourceMappingURL=ChatCode.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatCode.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/ChatCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAkB,MAAM,MAAM,CAAC;AAMlD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6EH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/chat/Hint.svelte

@@ -0,0 +1,82 @@
+<!--
+  Hint — Chat 提示区（严格对齐 Semi chat/hint）。
+  DOM 对齐 Semi：.cd-chat-hints（容器，column） > .cd-chat-hint-item（border）
+    ( .cd-chat-hint-content + .cd-chat-hint-icon(IconArrowRight) )。
+  点击派发 onHintClick(hint)。自定义整项渲染走 renderHintBox snippet。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { IconArrowRight } from '@chenzy-design/icons';
+  import type { RenderHintBoxProps } from './types.js';
+
+  interface Props {
+    hints?: string[];
+    onHintClick?: ((hint: string) => void) | undefined;
+    renderHintBox?: Snippet<[RenderHintBoxProps]> | undefined;
+    class?: string;
+    style?: string;
+  }
+
+  let { hints, onHintClick, renderHintBox, class: className = '', style }: Props = $props();
+</script>
+
+{#if hints && hints.length > 0}
+  <div class="cd-chat-hints {className}" {style}>
+    {#each hints as hint, index (index)}
+      {#if renderHintBox}
+        {@render renderHintBox({ content: hint, index, onHintClick: () => onHintClick?.(hint) })}
+      {:else}
+        <button type="button" class="cd-chat-hint-item" onclick={() => onHintClick?.(hint)}>
+          <span class="cd-chat-hint-content">{hint}</span>
+          <IconArrowRight class="cd-chat-hint-icon" />
+        </button>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  /* —— hints 容器（对齐 Semi .semi-chat-hints：column + marginLeft 34px） —— */
+  .cd-chat-hints {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--cd-chat-hint-rowGap);
+    margin-top: var(--cd-chat-hint-marginY);
+    margin-bottom: var(--cd-chat-hint-marginY);
+    margin-left: var(--cd-chat-hint-marginLeft);
+  }
+
+  /* —— hint-item（对齐 Semi -hint-item：border + radius + 内容/图标列间距） —— */
+  .cd-chat-hint-item {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    column-gap: var(--cd-chat-hint-item-columnGap);
+    width: fit-content;
+    background: var(--cd-chat-hint-item-bg);
+    align-items: center;
+    border: var(--cd-chat-hint-item-border-width) solid var(--cd-chat-hint-item-border);
+    padding: var(--cd-chat-hint-item-marginY) var(--cd-chat-hint-item-marginX);
+    border-radius: var(--cd-chat-hint-item-radius);
+    appearance: none;
+    font: inherit;
+  }
+
+  .cd-chat-hint-item:hover {
+    background-color: var(--cd-chat-hint-item-bg-hover);
+  }
+
+  .cd-chat-hint-item:focus-visible {
+    outline: 2px solid var(--cd-color-primary);
+    outline-offset: 2px;
+  }
+
+  .cd-chat-hint-content {
+    font-size: var(--cd-chat-hint-content-font-size);
+    color: var(--cd-chat-hint-content-text);
+  }
+
+  .cd-chat-hint-item :global(.cd-chat-hint-icon) {
+    color: var(--cd-chat-hint-icon);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { RenderHintBoxProps } from './types.js';
+interface Props {
+    hints?: string[];
+    onHintClick?: ((hint: string) => void) | undefined;
+    renderHintBox?: Snippet<[RenderHintBoxProps]> | undefined;
+    class?: string;
+    style?: string;
+}
+declare const Hint: import("svelte").Component<Props, {}, "">;
+type Hint = ReturnType<typeof Hint>;
+export default Hint;
+//# sourceMappingURL=Hint.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hint.svelte.d.ts","sourceRoot":"","sources":["../../src/chat/Hint.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGnD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,SAAS,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8BH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}