@kitnai/chat 0.1.0

package/src/components/message-skills.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from "storybook-solidjs-vite";
+import { MessageSkills } from "./message-skills";
+import { Message, MessageContent, MessageActions } from "./message";
+import { ChatConfig } from "../primitives/chat-config";
+import { Copy, ThumbsUp, ThumbsDown } from "lucide-solid";
+
+const meta = {
+  title: "Components/MessageSkills",
+  component: MessageSkills,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      controls: { exclude: ["use:eventListener"] },
+      description: {
+        component: [
+          "A row of small badges that label which **skills** were active when a message was generated.",
+          "**When to use:** above an assistant message whose response was shaped by one or more skills (e.g. `Concise`, `ELI5`). Renders nothing when the `skills` array is empty.",
+          "**How to use:** pass a `skills` array of `{ id, name }`; each `name` is shown as a badge. Add `class` (e.g. `mb-1`) to space it from the message body.",
+          "**Placement:** directly above `MessageContent` inside an assistant `Message`.",
+        ].join("\n\n"),
+      },
+    },
+  },
+  argTypes: {
+    skills: {
+      control: "object",
+      description: "Active skills to display as badges. Each is `{ id, name }`.",
+    },
+    class: {
+      control: "text",
+      description: "Extra classes for the badge row container.",
+    },
+  },
+  args: {
+    skills: [
+      { id: "1", name: "Concise" },
+      { id: "2", name: "ELI5" },
+    ],
+  },
+  render: (args) => <MessageSkills {...args} />,
+} satisfies Meta<typeof MessageSkills>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { MessageSkills } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: "tsx" } } },
+});
+
+/** Interactive playground — edit the `skills` array to see the badges update. */
+export const Playground: Story = {
+  ...src(`<MessageSkills skills={[{ id: '1', name: 'Concise' }, { id: '2', name: 'ELI5' }]} />`),
+};
+
+/** A single active skill. */
+export const SingleSkill: Story = {
+  args: { skills: [{ id: "1", name: "Caveman" }] },
+  ...src(`<MessageSkills skills={[{ id: '1', name: 'Caveman' }]} />`),
+};
+
+/** Several active skills wrap onto multiple lines if needed. */
+export const MultipleSkills: Story = {
+  args: {
+    skills: [
+      { id: "1", name: "Concise" },
+      { id: "2", name: "ELI5" },
+    ],
+  },
+  ...src(`<MessageSkills
+  skills={[
+    { id: '1', name: 'Concise' },
+    { id: '2', name: 'ELI5' },
+  ]}
+/>`),
+};
+
+/** Empty array — the component renders nothing. */
+export const NoSkills: Story = {
+  args: { skills: [] },
+  ...src(`<MessageSkills skills={[]} />`),
+};
+
+/** Composed above an assistant message body (showcase — not driven by controls). */
+export const InAssistantMessage: Story = {
+  name: "In Assistant Message",
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div class="max-w-md space-y-4">
+        <Message class="flex-col !gap-0">
+          <MessageSkills skills={[{ id: "1", name: "Caveman" }]} class="mb-1" />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            {"Bug in auth middleware. Token expiry check use `<` not `<=`. Fix: update comparison operator in `validateToken()`."}
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button>
+              <Copy size={14} />
+            </button>
+            <button>
+              <ThumbsUp size={14} />
+            </button>
+            <button>
+              <ThumbsDown size={14} />
+            </button>
+          </MessageActions>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            The authentication middleware validates JWT tokens by checking the
+            expiration timestamp. There's a bug in the comparison operator that
+            causes tokens to be accepted even when they've just expired.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button>
+              <Copy size={14} />
+            </button>
+            <button>
+              <ThumbsUp size={14} />
+            </button>
+            <button>
+              <ThumbsDown size={14} />
+            </button>
+          </MessageActions>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<Message class="flex-col !gap-0">
+  <MessageSkills skills={[{ id: '1', name: 'Caveman' }]} class="mb-1" />
+  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+    {assistantText}
+  </MessageContent>
+</Message>`),
+};
+
+/** Skills across a multi-turn flow (showcase). */
+export const InConversation: Story = {
+  name: "In Conversation Flow",
+  render: () => (
+    <ChatConfig proseSize="sm">
+      <div class="max-w-md space-y-4">
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            What is the main topic of this video?
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            The video covers advanced React patterns including compound
+            components, render props, and custom hooks for state management.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            Can you explain that more simply?
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageSkills skills={[{ id: "1", name: "ELI5" }]} class="mb-1" />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            Think of React patterns like different ways to build with LEGO.
+            Some ways make it easier to change pieces later, some ways make
+            it easier to share pieces between different builds.
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+
+        <Message class="group flex-col items-end !gap-0">
+          <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
+            Now give me the technical details
+          </MessageContent>
+        </Message>
+
+        <Message class="flex-col !gap-0">
+          <MessageSkills
+            skills={[
+              { id: "1", name: "Detailed" },
+              { id: "2", name: "Concise" },
+            ]}
+            class="mb-1"
+          />
+          <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+            {`**Compound Components**: Share implicit state via React Context. Parent owns state, children consume it.
+
+**Render Props**: Pass a function as a prop that returns JSX. Enables inversion of control.
+
+**Custom Hooks**: Extract stateful logic into reusable functions prefixed with \`use\`.`}
+          </MessageContent>
+          <MessageActions class="[&>button]:p-1 [&>button]:rounded [&>button]:text-foreground/60 [&>button]:hover:text-foreground [&>button]:transition-colors">
+            <button><Copy size={14} /></button>
+          </MessageActions>
+        </Message>
+      </div>
+    </ChatConfig>
+  ),
+  ...src(`<Message class="flex-col !gap-0">
+  <MessageSkills skills={[{ id: '1', name: 'Detailed' }, { id: '2', name: 'Concise' }]} class="mb-1" />
+  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
+    {assistantText}
+  </MessageContent>
+</Message>`),
+};

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-400">
+              {skill.name}
+            </span>
+          )}
+        </For>
+      </div>
+    </Show>
+  );
+}
+
+export { MessageSkills };

package/src/components/message.stories.tsx

@@ -0,0 +1,282 @@
+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';
+
+const meta = {
+  title: 'Components/Message',
+  component: Message,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          '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.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  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 '@kitnai/chat';`;
+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">
+              <Pencil class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <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">
+              <Copy class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <ThumbsUp class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <ThumbsDown class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <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">
+              <Copy class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <ThumbsUp class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <ThumbsDown class="size-3.5" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" class="rounded-full">
+              <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,149 @@
+import { type JSX, createSignal, splitProps, Show } from "solid-js";
+import { Copy, Check } from "lucide-solid";
+import { cn } from "../utils/cn";
+import { Markdown } from "./markdown";
+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>
+  );
+}
+
+// --- 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}
+      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, MessageAction, MessageCopyButton };