@kitn.ai/ui 0.14.1

package/src/components/message-skills.tsx

@@ -0,0 +1,36 @@
+import { Show, For, type JSX, splitProps } from "solid-js";
+import { cn } from "../utils/cn";
+
+// --- MessageSkills ---
+
+export interface Skill {
+  id: string;
+  name: string;
+}
+
+export interface MessageSkillsProps {
+  skills: Skill[];
+  class?: string;
+}
+
+/**
+ * Displays skill badges above a message to indicate which skills
+ * were active when the message was generated.
+ */
+function MessageSkills(props: MessageSkillsProps) {
+  return (
+    <Show when={props.skills.length > 0}>
+      <div class={cn("flex items-center gap-1 flex-wrap", props.class)}>
+        <For each={props.skills}>
+          {(skill) => (
+            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-violet-400/10 text-violet-600 dark:text-violet-400">
+              {skill.name}
+            </span>
+          )}
+        </For>
+      </div>
+    </Show>
+  );
+}
+
+export { MessageSkills };

package/src/components/message.stories.tsx

@@ -0,0 +1,281 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Message, MessageAvatar, MessageContent, MessageActions } from './message';
+import { Button } from '../ui/button';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Message',
+  component: Message,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: componentDescription([
+        'A horizontal message row that composes an optional `MessageAvatar`, a `MessageContent` body (plain or markdown), and an optional `MessageActions` toolbar.',
+        '**When to use:** rendering any chat turn — user or assistant. Use a bubble + right alignment for user turns, and an avatar + transparent content for assistant turns.',
+        '**How to use:** wrap the parts in `<Message>`. Add `MessageAvatar` for the speaker, `MessageContent` for the text (set `markdown` to render markdown), and `MessageActions` for hover actions. Layout (alignment, bubble) is controlled via `class`.',
+        '**Placement:** inside a `ChatContainer`/scroll region, stacked vertically as the conversation transcript.',
+      ]),
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The composed message parts (avatar, content, actions).',
+    },
+    class: {
+      control: 'text',
+      description: 'Layout classes — e.g. `flex flex-col items-end` for right-aligned user turns.',
+    },
+  },
+  args: {
+    class: '',
+  },
+  render: (args) => (
+    <div class="max-w-2xl">
+      <Message {...args}>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <MessageContent>
+          I can help with a variety of tasks: answering questions, providing
+          information, assisting with coding, and generating creative content.
+          What would you like help with today?
+        </MessageContent>
+      </Message>
+    </div>
+  ),
+} satisfies Meta<typeof Message>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Message, MessageAvatar, MessageContent, MessageActions } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — an assistant turn; tweak `class` to change layout. */
+export const Playground: Story = {
+  ...src(`<Message>
+  <MessageAvatar src="" fallback="AI" alt="Assistant" />
+  <MessageContent>I can help with a variety of tasks...</MessageContent>
+</Message>`),
+};
+
+/** A user turn — right-aligned bubble, no avatar. */
+export const UserMessage: Story = {
+  render: () => (
+    <div class="max-w-2xl">
+      <Message class="flex flex-col items-end">
+        <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
+          Hello! How can I help you today?
+        </MessageContent>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message class="flex flex-col items-end">
+  <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
+    Hello! How can I help you today?
+  </MessageContent>
+</Message>`),
+};
+
+/** An assistant turn — avatar plus a secondary-background content block. */
+export const AssistantMessage: Story = {
+  render: () => (
+    <div class="max-w-2xl">
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <MessageContent>
+          I can help with a variety of tasks: answering questions, providing information,
+          assisting with coding, generating creative content. What would you like help with today?
+        </MessageContent>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message>
+  <MessageAvatar src="" fallback="AI" alt="Assistant" />
+  <MessageContent>I can help with a variety of tasks...</MessageContent>
+</Message>`),
+};
+
+/** Assistant turn with a transparent, flush content block (no bubble). */
+export const AssistantNoBg: Story = {
+  name: 'Assistant (No Background)',
+  render: () => (
+    <div class="max-w-2xl">
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <MessageContent class="bg-transparent p-0">
+          I can help with a variety of tasks: answering questions, providing information,
+          assisting with coding, generating creative content. What would you like help with today?
+        </MessageContent>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message>
+  <MessageAvatar src="" fallback="AI" alt="Assistant" />
+  <MessageContent class="bg-transparent p-0">...</MessageContent>
+</Message>`),
+};
+
+/** User bubble with hover-revealed edit/copy actions. */
+export const UserAlignedRight: Story = {
+  name: 'User (Right-Aligned)',
+  render: () => (
+    <div class="max-w-2xl">
+      <Message class="flex flex-col items-end">
+        <div class="group flex flex-col items-end gap-1">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
+            Can you explain how SolidJS reactivity differs from React hooks?
+          </MessageContent>
+          <MessageActions class="flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Edit message">
+              <Pencil class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
+              <Copy class="size-3.5" />
+            </Button>
+          </MessageActions>
+        </div>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message class="flex flex-col items-end">
+  <div class="group flex flex-col items-end gap-1">
+    <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
+      Can you explain how SolidJS reactivity differs from React hooks?
+    </MessageContent>
+    <MessageActions class="opacity-0 group-hover:opacity-100">
+      <Button variant="ghost" size="icon-sm"><Pencil class="size-3.5" /></Button>
+      <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
+    </MessageActions>
+  </div>
+</Message>`),
+};
+
+/** Markdown body — set `markdown` on `MessageContent` and pass a markdown string. */
+export const MarkdownMessage: Story = {
+  render: () => (
+    <div class="max-w-2xl">
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <MessageContent markdown class="bg-transparent p-0">
+          {`Here's a **bold** statement with some \`inline code\` and a list:
+
+- First item
+- Second item
+- Third item
+
+And a code block:
+
+\`\`\`typescript
+const greeting = "Hello, world!";
+console.log(greeting);
+\`\`\``}
+        </MessageContent>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message>
+  <MessageAvatar src="" fallback="AI" alt="Assistant" />
+  <MessageContent markdown class="bg-transparent p-0">
+    {markdownString}
+  </MessageContent>
+</Message>`),
+};
+
+/** Assistant turn with a hover action row (copy / feedback / regenerate). */
+export const WithActions: Story = {
+  render: () => (
+    <div class="max-w-2xl">
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <div class="group flex w-full flex-col gap-0">
+          <MessageContent class="bg-transparent p-0">
+            Here is a response with hover actions below it.
+          </MessageContent>
+          <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
+              <Copy class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
+              <ThumbsUp class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
+              <ThumbsDown class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
+              <RefreshCw class="size-3.5" />
+            </Button>
+          </MessageActions>
+        </div>
+      </Message>
+    </div>
+  ),
+  ...src(`<Message>
+  <MessageAvatar src="" fallback="AI" alt="Assistant" />
+  <div class="group flex w-full flex-col gap-0">
+    <MessageContent class="bg-transparent p-0">Here is a response...</MessageContent>
+    <MessageActions class="opacity-0 group-hover:opacity-100">
+      <Button variant="ghost" size="icon-sm"><Copy class="size-3.5" /></Button>
+      <Button variant="ghost" size="icon-sm"><ThumbsUp class="size-3.5" /></Button>
+      <Button variant="ghost" size="icon-sm"><ThumbsDown class="size-3.5" /></Button>
+      <Button variant="ghost" size="icon-sm"><RefreshCw class="size-3.5" /></Button>
+    </MessageActions>
+  </div>
+</Message>`),
+};
+
+/** A user + assistant pair showing both layouts together (showcase). */
+export const Conversation: Story = {
+  render: () => (
+    <div class="max-w-2xl space-y-4">
+      <Message class="flex flex-col items-end">
+        <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
+          What is TypeScript?
+        </MessageContent>
+      </Message>
+
+      <Message>
+        <MessageAvatar src="" fallback="AI" alt="Assistant" />
+        <div class="group flex w-full flex-col gap-0">
+          <MessageContent markdown class="bg-transparent p-0">
+            {`**TypeScript** is a strongly typed programming language that builds on JavaScript. It adds optional static type checking and other features like interfaces, enums, and generics.
+
+Key benefits:
+- Catches errors at compile time
+- Better IDE support and autocompletion
+- Makes large codebases more maintainable`}
+          </MessageContent>
+          <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
+              <Copy class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
+              <ThumbsUp class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Bad response">
+              <ThumbsDown class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Regenerate response">
+              <RefreshCw class="size-3.5" />
+            </Button>
+          </MessageActions>
+        </div>
+      </Message>
+    </div>
+  ),
+  ...src(`<div class="space-y-4">
+  <Message class="flex flex-col items-end">
+    <MessageContent class="bg-muted text-primary rounded-3xl px-5 py-2.5">
+      What is TypeScript?
+    </MessageContent>
+  </Message>
+  <Message>
+    <MessageAvatar src="" fallback="AI" alt="Assistant" />
+    <MessageContent markdown class="bg-transparent p-0">{answerMarkdown}</MessageContent>
+  </Message>
+</div>`),
+};

package/src/components/message.tsx

@@ -0,0 +1,227 @@
+import { type JSX, For, createSignal, splitProps, Show } from "solid-js";
+import { Tooltip } from "../ui/tooltip";
+import { Copy, Check } from "lucide-solid";
+import { cn } from "../utils/cn";
+import { Markdown } from "./markdown";
+import { Button } from "../ui/button";
+import { actionIcon, BUILTIN_ACTION_LABEL } from "../ui/action-icons";
+import type { ChatMessageAction, CustomAction } from "../elements/chat-types";
+import { useChatConfig, textClass } from "../primitives/chat-config";
+
+// --- Message ---
+
+export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function Message(props: MessageProps) {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return (
+    <div class={cn("flex items-start gap-3", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+}
+
+// --- MessageAvatar ---
+
+export interface MessageAvatarProps {
+  src: string;
+  alt: string;
+  fallback?: string;
+  class?: string;
+}
+
+function MessageAvatar(props: MessageAvatarProps) {
+  return (
+    <div
+      class={cn("h-8 w-8 shrink-0 overflow-hidden rounded-full", props.class)}
+    >
+      <Show
+        when={props.src}
+        fallback={
+          <Show when={props.fallback}>
+            <div class="flex h-full w-full items-center justify-center bg-muted text-xs font-medium text-muted-foreground">
+              {props.fallback}
+            </div>
+          </Show>
+        }
+      >
+        <img
+          src={props.src}
+          alt={props.alt}
+          class="h-full w-full object-cover"
+        />
+      </Show>
+    </div>
+  );
+}
+
+// --- MessageContent ---
+
+export interface MessageContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element | string;
+  markdown?: boolean;
+}
+
+function MessageContent(props: MessageContentProps) {
+  const [local, rest] = splitProps(props, ["children", "markdown", "class"]);
+  const config = useChatConfig();
+  const classNames = () =>
+    cn(
+      "min-w-0 rounded-lg p-2 text-foreground bg-secondary max-w-none break-words whitespace-normal",
+      textClass(config.proseSize()),
+      local.class,
+    );
+
+  return (
+    <Show
+      when={local.markdown}
+      fallback={
+        <div class={classNames()} {...rest}>
+          {local.children}
+        </div>
+      }
+    >
+      <Markdown content={local.children as string} class={classNames()} />
+    </Show>
+  );
+}
+
+// --- MessageActions ---
+
+export interface MessageActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+function MessageActions(props: MessageActionsProps) {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return (
+    <div
+      class={cn(
+        "flex items-center gap-0.5 mt-0.5",
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+}
+
+// --- MessageActionBar ---
+
+export interface MessageActionBarProps {
+  /** Built-in action names and/or custom action descriptors, in order. */
+  actions: (ChatMessageAction | CustomAction)[];
+  /** `'always'` (default) keeps the bar visible; `'hover'` reveals it on
+   *  parent `.group` hover. */
+  reveal?: 'always' | 'hover';
+  /** Fired with the built-in name or the custom action id when a button is clicked. */
+  onAction: (id: string) => void;
+  class?: string;
+}
+
+/** Normalize a bar entry (string built-in or custom object) to a uniform shape. */
+function normalizeAction(a: ChatMessageAction | CustomAction) {
+  if (typeof a === 'string') {
+    return { id: a, label: BUILTIN_ACTION_LABEL[a], Icon: actionIcon(a) };
+  }
+  return { id: a.id, label: a.label, Icon: actionIcon(a.icon) };
+}
+
+/**
+ * The shared message action toolbar. Renders one ghost icon button per entry —
+ * built-in names pull their label+icon from the curated registry; custom
+ * descriptors use their `label` plus `actionIcon(icon)` (label-only when the
+ * icon is unknown or absent). `reveal="hover"` makes the bar fade in on the
+ * parent `.group`'s hover.
+ */
+function MessageActionBar(props: MessageActionBarProps) {
+  return (
+    <MessageActions
+      class={cn(
+        'mt-1 flex gap-0',
+        props.reveal === 'hover' && 'opacity-0 transition-opacity group-hover:opacity-100',
+        props.class,
+      )}
+    >
+      <For each={props.actions}>
+        {(a) => {
+          const item = normalizeAction(a);
+          const tooltipText = () => (typeof a !== 'string' && a.tooltip) ? a.tooltip : item.label;
+          // Factory (not a shared node): each Show branch gets its own Button so
+          // the eager DOM node is never referenced from two places.
+          const button = () => (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              class="rounded-full"
+              data-action={item.id}
+              aria-label={item.label}
+              onClick={() => props.onAction(item.id)}
+            >
+              <Show when={item.Icon} fallback={<span class="px-1 text-xs">{item.label}</span>}>
+                {(Icon) => {
+                  const I = Icon();
+                  return <I class="size-3.5" />;
+                }}
+              </Show>
+            </Button>
+          );
+          // Icon-only buttons get a tooltip; label-only buttons (text already
+          // visible) don't.
+          return (
+            <Show when={item.Icon} fallback={button()}>
+              <Tooltip content={tooltipText()}>{button()}</Tooltip>
+            </Show>
+          );
+        }}
+      </For>
+    </MessageActions>
+  );
+}
+
+// --- MessageAction ---
+
+export interface MessageActionProps {
+  tooltip: string;
+  children: JSX.Element;
+  side?: "top" | "bottom" | "left" | "right";
+  class?: string;
+}
+
+function MessageAction(props: MessageActionProps) {
+  return <>{props.children}</>;
+}
+
+// --- MessageCopyButton ---
+
+export interface MessageCopyButtonProps {
+  content: string;
+  size?: number;
+  class?: string;
+}
+
+function MessageCopyButton(props: MessageCopyButtonProps) {
+  const [copied, setCopied] = createSignal(false);
+  const iconSize = () => props.size ?? 14;
+
+  return (
+    <button
+      class={props.class}
+      aria-label={copied() ? 'Copied' : 'Copy message'}
+      onClick={() => {
+        navigator.clipboard.writeText(props.content);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }}
+    >
+      <Show when={copied()} fallback={<Copy size={iconSize()} />}>
+        <Check size={iconSize()} class="text-emerald-400" />
+      </Show>
+    </button>
+  );
+}
+
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageAction, MessageCopyButton };

package/src/components/model-switcher.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { fn } from 'storybook/test';
+import { ModelSwitcher } from './model-switcher';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const multipleModels = [
+  { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
+  { id: 'claude-opus', name: 'Claude Opus', provider: 'Anthropic' },
+  { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  { id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google' },
+];
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/ModelSwitcher',
+  component: ModelSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: componentDescription([
+        'A compact dropdown that shows the active model and lets the user switch between the available **models** (grouped by optional `provider` label).',
+        '**When to use:** when a chat surface offers more than one model. It renders nothing when fewer than two models are provided, so it is safe to mount unconditionally.',
+        '**How to use:** pass the `models` list and the `currentModelId`, then handle `onModelChange` to update your selected-model state.',
+        '**Placement:** the prompt input action bar, a chat header, or a settings/toolbar row near the composer.',
+      ]),
+    },
+  },
+  argTypes: {
+    models: {
+      control: 'object',
+      description: 'Selectable models. Each has `id`, `name`, and an optional `provider` label.',
+    },
+    currentModelId: {
+      control: 'text',
+      description: 'The `id` of the currently selected model.',
+    },
+    onModelChange: {
+      action: 'modelChange',
+      description: 'Fired with the chosen model `id` when the user picks a model.',
+      table: { category: 'Events' },
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes applied to the trigger button.',
+    },
+  },
+  args: {
+    models: multipleModels,
+    currentModelId: 'claude-sonnet',
+    onModelChange: fn(),
+  },
+  render: (args) => <ModelSwitcher {...args} />,
+} satisfies Meta<typeof ModelSwitcher>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { ModelSwitcher } from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — tweak the controls to explore the switcher. */
+export const Playground: Story = {
+  ...src(`<ModelSwitcher
+  models={models}
+  currentModelId={modelId()}
+  onModelChange={setModelId}
+/>`),
+};
+
+/** Several models across providers — the dropdown lists them with provider labels. */
+export const MultipleModels: Story = {
+  args: { models: multipleModels, currentModelId: 'claude-sonnet' },
+  ...src(`<ModelSwitcher
+  models={[
+    { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
+    { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  ]}
+  currentModelId={modelId()}
+  onModelChange={setModelId}
+/>`),
+};
+
+/**
+ * Rich rows + a collapsible group. `description` renders as the row subtitle
+ * (preferred over `provider`), and models sharing a `group` collect under a
+ * collapsible section — the ChatGPT-style "Legacy models" pattern.
+ */
+export const GroupedAndDescribed: Story = {
+  args: {
+    models: [
+      { id: 'gpt-5.5', name: 'GPT-5.5', description: 'Flagship model' },
+      { id: 'gpt-5.5-mini', name: 'GPT-5.5 mini', description: 'Faster, lighter' },
+      { id: 'gpt-4o', name: 'GPT-4o', group: 'Legacy models' },
+      { id: 'gpt-4.1', name: 'GPT-4.1', group: 'Legacy models' },
+    ],
+    currentModelId: 'gpt-5.5',
+  },
+  ...src(`<ModelSwitcher
+  models={[
+    { id: 'gpt-5.5', name: 'GPT-5.5', description: 'Flagship model' },
+    { id: 'gpt-4o', name: 'GPT-4o', group: 'Legacy models' },
+    { id: 'gpt-4.1', name: 'GPT-4.1', group: 'Legacy models' },
+  ]}
+  currentModelId={modelId()}
+  onModelChange={setModelId}
+/>`),
+};
+
+/** A single model — the switcher renders nothing (needs 2+ models). */
+export const SingleModel: Story = {
+  args: {
+    models: [{ id: 'claude-sonnet', name: 'Claude Sonnet' }],
+    currentModelId: 'claude-sonnet',
+  },
+  ...src(`<ModelSwitcher
+  models={[{ id: 'claude-sonnet', name: 'Claude Sonnet' }]}
+  currentModelId="claude-sonnet"
+  onModelChange={setModelId}
+/>`),
+};