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";
import { componentDescription } from '../stories/docs/element-controls';
const meta = {
title: "Solid (Advanced)/Elements/MessageSkills",
component: MessageSkills,
tags: ["autodocs"],
parameters: {
layout: "padded",
docs: {
controls: { exclude: ["use:eventListener"] },
description: componentDescription([
"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`.",
]),
},
},
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) => ,
} satisfies Meta;
export default meta;
type Story = StoryObj;
const IMPORT = `import { MessageSkills } from '@kitn.ai/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(``),
};
/** A single active skill. */
export const SingleSkill: Story = {
args: { skills: [{ id: "1", name: "Caveman" }] },
...src(``),
};
/** Several active skills wrap onto multiple lines if needed. */
export const MultipleSkills: Story = {
args: {
skills: [
{ id: "1", name: "Concise" },
{ id: "2", name: "ELI5" },
],
},
...src(``),
};
/** Empty array — the component renders nothing. */
export const NoSkills: Story = {
args: { skills: [] },
...src(``),
};
/** Composed above an assistant message body (showcase — not driven by controls). */
export const InAssistantMessage: Story = {
name: "In Assistant Message",
render: () => (
{"Bug in auth middleware. Token expiry check use `<` not `<=`. Fix: update comparison operator in `validateToken()`."}
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.
),
...src(`
{assistantText}
`),
};
/** Skills across a multi-turn flow (showcase). */
export const InConversation: Story = {
name: "In Conversation Flow",
render: () => (
What is the main topic of this video?
The video covers advanced React patterns including compound
components, render props, and custom hooks for state management.
Can you explain that more simply?
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.
Now give me the technical details
{`**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\`.`}