@arcote.tech/arc-chat 0.4.6

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@arcote.tech/arc-chat",
+  "type": "module",
+  "version": "0.4.6",
+  "private": false,
+  "description": "Chat module with AI integration for Arc framework",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@arcote.tech/arc": "^0.4.6",
+    "@arcote.tech/arc-ai": "^0.4.6",
+    "@arcote.tech/arc-auth": "^0.4.6",
+    "@arcote.tech/arc-ds": "^0.4.6",
+    "@arcote.tech/platform": "^0.4.6",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}

package/src/aggregates/conversation.ts

@@ -0,0 +1,151 @@
+/// <reference path="../arc.d.ts" />
+import {
+  aggregate,
+  date,
+  id,
+  number,
+  string,
+  type ArcId,
+} from "@arcote.tech/arc";
+import type { Token } from "@arcote.tech/arc-auth";
+
+// ─── ID ──────────────────────────────────────────────────────────
+
+export const createConversationId = <const Name extends string>(data: {
+  name: Name;
+}) => id(`${data.name}Conversation`);
+
+export type ConversationId<Name extends string = string> = ReturnType<
+  typeof createConversationId<Name>
+>;
+
+// ─── Aggregate ───────────────────────────────────────────────────
+
+export type ConversationAggregateData = {
+  name: string;
+  conversationId: ArcId<any>;
+  accountId: ArcId<any>;
+  userToken: Token;
+};
+
+export const createConversationAggregate = <
+  const Data extends ConversationAggregateData,
+>(
+  data: Data,
+) => {
+  const { conversationId, accountId, userToken } = data;
+
+  return aggregate(
+    `${data.name}Conversations`,
+    conversationId,
+    {
+      accountId,
+      title: string(),
+      model: string(),
+      createdAt: date(),
+      lastMessageAt: date().optional(),
+      messageCount: number(),
+    },
+  )
+    .publicEvent(
+      "conversationCreated",
+      {
+        conversationId,
+        accountId,
+        title: string(),
+        model: string(),
+      },
+      async (ctx, event) => {
+        const p = event.payload;
+        await ctx.set(p.conversationId, {
+          accountId: p.accountId,
+          title: p.title,
+          model: p.model,
+          createdAt: event.createdAt,
+          messageCount: 0,
+        });
+      },
+    )
+
+    .publicEvent(
+      "conversationRenamed",
+      {
+        conversationId,
+        title: string(),
+      },
+      async (ctx, event) => {
+        await ctx.modify(event.payload.conversationId, {
+          title: event.payload.title,
+        });
+      },
+    )
+
+    .publicEvent(
+      "conversationUpdated",
+      {
+        conversationId,
+        messageCount: number(),
+      },
+      async (ctx, event) => {
+        await ctx.modify(event.payload.conversationId, {
+          lastMessageAt: event.createdAt,
+          messageCount: event.payload.messageCount,
+        });
+      },
+    )
+
+    .mutateMethod(
+      "create",
+      {
+        params: {
+          title: string().optional(),
+          model: string(),
+        },
+      },
+      ONLY_SERVER &&
+        (async (ctx, params) => {
+          const cId = conversationId.generate();
+          const aId = ctx.$auth.params.accountId;
+
+          await ctx.conversationCreated.emit({
+            conversationId: cId,
+            accountId: accountId.parse(aId),
+            title: params.title ?? "New conversation",
+            model: params.model,
+          });
+
+          return { conversationId: cId };
+        }),
+    )
+
+    .mutateMethod(
+      "rename",
+      {
+        params: {
+          _id: conversationId,
+          title: string().minLength(1),
+        },
+      },
+      ONLY_SERVER &&
+        (async (ctx, params) => {
+          await ctx.conversationRenamed.emit({
+            conversationId: params._id,
+            title: params.title,
+          });
+
+          return { success: true };
+        }),
+    )
+
+    .clientQuery("getAll", async (ctx) => ctx.$query.find({}))
+    .clientQuery(
+      "getById",
+      async (ctx, params: { _id: string }) =>
+        ctx.$query.findOne({ _id: params._id }),
+    )
+
+    .protectBy(userToken, (p) => ({ accountId: p.accountId }))
+    .build();
+};
+
+export type ConversationAggregate = ReturnType<typeof createConversationAggregate>;

package/src/aggregates/message.ts

@@ -0,0 +1,178 @@
+/// <reference path="../arc.d.ts" />
+import {
+  aggregate,
+  date,
+  id,
+  string,
+  type ArcId,
+} from "@arcote.tech/arc";
+import type { Token } from "@arcote.tech/arc-auth";
+import type { LLMProvider } from "@arcote.tech/arc-ai";
+
+// ─── ID ──────────────────────────────────────────────────────────
+
+export const createMessageId = <const Name extends string>(data: {
+  name: Name;
+}) => id(`${data.name}Message`);
+
+export type MessageId<Name extends string = string> = ReturnType<
+  typeof createMessageId<Name>
+>;
+
+// ─── Aggregate ───────────────────────────────────────────────────
+
+export type MessageAggregateData = {
+  name: string;
+  messageId: ArcId<any>;
+  conversationId: ArcId<any>;
+  accountId: ArcId<any>;
+  userToken: Token;
+  resolveProvider: (model: string) => LLMProvider | undefined;
+};
+
+export const createMessageAggregate = <
+  const Data extends MessageAggregateData,
+>(
+  data: Data,
+) => {
+  const { messageId, conversationId, userToken, resolveProvider } = data;
+
+  return aggregate(`${data.name}Messages`, messageId, {
+    conversationId,
+    role: string(),
+    content: string(),
+    toolCalls: string().optional(),
+    toolResults: string().optional(),
+    completionId: string().optional(),
+    createdAt: date(),
+  })
+    .publicEvent(
+      "messageSent",
+      {
+        messageId,
+        conversationId,
+        role: string(),
+        content: string(),
+      },
+      async (ctx, event) => {
+        const p = event.payload;
+        await ctx.set(p.messageId, {
+          conversationId: p.conversationId,
+          role: p.role,
+          content: p.content,
+          createdAt: event.createdAt,
+        });
+      },
+    )
+
+    .publicEvent(
+      "assistantMessageCompleted",
+      {
+        messageId,
+        conversationId,
+        content: string(),
+        completionId: string().optional(),
+        toolCalls: string().optional(),
+        toolResults: string().optional(),
+      },
+      async (ctx, event) => {
+        const p = event.payload;
+        await ctx.set(p.messageId, {
+          conversationId: p.conversationId,
+          role: "assistant",
+          content: p.content,
+          completionId: p.completionId,
+          toolCalls: p.toolCalls,
+          toolResults: p.toolResults,
+          createdAt: event.createdAt,
+        });
+      },
+    )
+
+    .mutateMethod(
+      "sendMessage",
+      {
+        params: {
+          conversationId,
+          content: string().minLength(1),
+          model: string().optional(),
+          tools: string().optional(),
+          webSearch: string().optional(),
+        },
+      },
+      ONLY_SERVER &&
+        (async (ctx, params) => {
+          const userMsgId = messageId.generate();
+          await ctx.messageSent.emit({
+            messageId: userMsgId,
+            conversationId: params.conversationId,
+            role: "user",
+            content: params.content,
+          });
+
+          const history = await ctx.$query.find({
+            where: { conversationId: params.conversationId },
+          });
+
+          const messages = history.map((msg) => ({
+            role: msg.role as "user" | "assistant" | "system" | "tool",
+            content: msg.content,
+          }));
+
+          messages.push({ role: "user", content: params.content });
+
+          const model = params.model ?? "gpt-4o";
+
+          const provider = resolveProvider(model);
+          if (!provider) {
+            return { error: "PROVIDER_NOT_FOUND" as const };
+          }
+
+          try {
+            const toolDefs = params.tools
+              ? JSON.parse(params.tools)
+              : undefined;
+            const webSearch = params.webSearch === "true";
+
+            const result = await provider.complete({
+              model,
+              messages,
+              tools: toolDefs,
+              webSearch,
+            });
+
+            const assistantMsgId = messageId.generate();
+            await ctx.assistantMessageCompleted.emit({
+              messageId: assistantMsgId,
+              conversationId: params.conversationId,
+              content: result.content,
+              toolCalls: result.toolCalls.length
+                ? JSON.stringify(result.toolCalls)
+                : undefined,
+            });
+
+            return {
+              messageId: assistantMsgId,
+              content: result.content,
+              toolCalls: result.toolCalls,
+              finishReason: result.finishReason,
+            };
+          } catch (error) {
+            const errorMessage =
+              error instanceof Error ? error.message : "Unknown error";
+            return { error: errorMessage };
+          }
+        }),
+    )
+
+    .clientQuery(
+      "getByConversation",
+      async (ctx, params: { conversationId: string }) =>
+        ctx.$query.find({ where: { conversationId: params.conversationId } }),
+    )
+
+    .protectBy(userToken, (p) => ({ accountId: p.accountId }))
+    .build();
+};
+
+export type MessageAggregate = ReturnType<typeof createMessageAggregate>;

package/src/arc.d.ts

@@ -0,0 +1,6 @@
+declare const BROWSER: boolean;
+declare const NOT_ON_BROWSER: boolean;
+declare const ONLY_BROWSER: boolean;
+declare const SERVER: boolean;
+declare const NOT_ON_SERVER: boolean;
+declare const ONLY_SERVER: boolean;

package/src/chat-builder.ts

@@ -0,0 +1,76 @@
+import {
+  aggregateContextElement,
+  context,
+  type AggregateConstructorAny,
+  type ArcContextElement,
+} from "@arcote.tech/arc";
+import type { AccountId, Token } from "@arcote.tech/arc-auth";
+import type { AIBuilder } from "@arcote.tech/arc-ai";
+import { createConversationId, createConversationAggregate } from "./aggregates/conversation";
+import { createMessageId, createMessageAggregate } from "./aggregates/message";
+
+export class ChatBuilder<
+  ConvId,
+  MsgId,
+  Conversation extends AggregateConstructorAny,
+  Message extends AggregateConstructorAny,
+  Elements extends ArcContextElement<any>[],
+> {
+  constructor(
+    private readonly _name: string,
+    readonly conversationId: ConvId,
+    readonly messageId: MsgId,
+    readonly Conversation: Conversation,
+    readonly Message: Message,
+    readonly elements: Elements,
+  ) {}
+
+  build() {
+    return {
+      context: context(this.elements),
+      conversationId: this.conversationId,
+      messageId: this.messageId,
+      Conversation: this.Conversation,
+      Message: this.Message,
+    };
+  }
+}
+
+export function chat<const Name extends string>(config: {
+  name: Name;
+  accountId: AccountId;
+  userToken: Token;
+  ai: ReturnType<AIBuilder<any, any, any, any, any, any>["build"]>;
+}) {
+  const conversationId = createConversationId({ name: config.name });
+  const messageId = createMessageId({ name: config.name });
+
+  const Conversation = createConversationAggregate({
+    name: config.name,
+    conversationId,
+    accountId: config.accountId,
+    userToken: config.userToken,
+  });
+  const conversationElement = aggregateContextElement(Conversation);
+
+  const Message = createMessageAggregate({
+    name: config.name,
+    messageId,
+    conversationId,
+    accountId: config.accountId,
+    userToken: config.userToken,
+    resolveProvider: config.ai.resolveProvider,
+  });
+  const messageElement = aggregateContextElement(Message);
+
+  const elements = [conversationElement, messageElement];
+
+  return new ChatBuilder(
+    config.name,
+    conversationId,
+    messageId,
+    Conversation,
+    Message,
+    elements,
+  );
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+// --- Builder API ---
+export { chat, ChatBuilder } from "./chat-builder";
+
+// --- Aggregate factories & types ---
+export { createConversationAggregate, createConversationId } from "./aggregates/conversation";
+export type { ConversationAggregate, ConversationId } from "./aggregates/conversation";
+export { createMessageAggregate, createMessageId } from "./aggregates/message";
+export type { MessageAggregate, MessageId } from "./aggregates/message";
+
+// --- React components ---
+export {
+  Chat,
+  ChatMessage,
+  ChatInput,
+  QuestionTabs,
+  ToolUseBlock,
+} from "./react";
+export type {
+  ChatMessageData,
+  ChatModel,
+  SendMessageOptions,
+  ToolUse,
+  Question,
+  QuestionAnswers,
+} from "./react";

package/src/react/chat-input.tsx

@@ -0,0 +1,79 @@
+import { Trans } from "@arcote.tech/platform";
+import { Box, Button, TextareaField, SearchSelect } from "@arcote.tech/arc-ds";
+import { Send, Globe } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import type { ChatModel, SendMessageOptions } from "./types";
+
+interface ChatInputProps {
+  onSend: (message: string, options: SendMessageOptions) => void;
+  models: ChatModel[];
+  defaultModel?: string;
+  /** Extra toolbar content (e.g., attach menu) rendered after web search toggle */
+  toolbar?: ReactNode;
+}
+
+export function ChatInput({
+  onSend,
+  models,
+  defaultModel,
+  toolbar,
+}: ChatInputProps) {
+  const [message, setMessage] = useState("");
+  const [model, setModel] = useState(defaultModel ?? models[0]?.value ?? "");
+  const [webSearch, setWebSearch] = useState(false);
+
+  const handleSend = () => {
+    const text = message.trim();
+    if (!text) return;
+    onSend(text, { model, webSearch });
+    setMessage("");
+  };
+
+  return (
+    <Box className="p-3 space-y-2">
+      {/* Input + send */}
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <TextareaField
+            value={message}
+            onChange={(val) => setMessage(val ?? "")}
+            placeholder="Napisz wiadomość..."
+            rows={1}
+          />
+        </div>
+        <Button
+          size="sm"
+          icon={Send}
+          onClick={handleSend}
+          disabled={!message.trim()}
+        />
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-1.5">
+        <div className="w-[130px]">
+          <SearchSelect
+            value={model}
+            onChange={setModel}
+            options={models}
+            placeholder="Model..."
+            position="absolute"
+            direction="up"
+            size="sm"
+            allowClear={false}
+          />
+        </div>
+
+        <Button
+          variant={webSearch ? "default" : "ghost"}
+          size="xs"
+          icon={Globe}
+          label={<Trans>Web</Trans>}
+          onClick={() => setWebSearch((v) => !v)}
+        />
+
+        {toolbar}
+      </div>
+    </Box>
+  );
+}

package/src/react/chat-message.tsx

@@ -0,0 +1,100 @@
+import { Trans } from "@arcote.tech/platform";
+import { Button } from "@arcote.tech/arc-ds";
+import { Bot, User, MessageSquare } from "lucide-react";
+import type { ChatMessageData } from "./types";
+import { ToolUseBlock } from "./tool-use-block";
+
+interface ChatMessageProps {
+  message: ChatMessageData;
+  onAnswerQuestions?: () => void;
+  onToolUseClick?: (link: string) => void;
+}
+
+export function ChatMessage({
+  message,
+  onAnswerQuestions,
+  onToolUseClick,
+}: ChatMessageProps) {
+  const isUser = message.role === "user";
+  const hasUnansweredQuestions =
+    message.questions && message.questions.length > 0;
+
+  return (
+    <div className={`flex gap-3 ${isUser ? "flex-row-reverse" : ""}`}>
+      {/* Avatar */}
+      <div
+        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full mt-0.5 ${
+          isUser ? "bg-primary/10" : "bg-muted"
+        }`}
+      >
+        {isUser ? (
+          <User className="h-3.5 w-3.5 text-primary" />
+        ) : (
+          <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div
+        className={`flex-1 min-w-0 space-y-2 ${isUser ? "text-right" : ""}`}
+      >
+        <div
+          className={`inline-block rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
+            isUser
+              ? "bg-primary/10 text-foreground rounded-tr-sm"
+              : "bg-card border border-border rounded-tl-sm"
+          }`}
+        >
+          {message.content.split("\n").map((line, i) => (
+            <p key={i} className={i > 0 ? "mt-1.5" : ""}>
+              {line.startsWith("• ") ? (
+                <span className="flex items-start gap-1.5 text-left">
+                  <span className="text-primary mt-px">•</span>
+                  <span>{line.slice(2)}</span>
+                </span>
+              ) : (
+                line
+              )}
+            </p>
+          ))}
+          {message.isStreaming && (
+            <span className="inline-block w-1.5 h-4 bg-foreground/60 animate-pulse ml-0.5 -mb-0.5" />
+          )}
+        </div>
+
+        {/* Tool uses */}
+        {message.toolUses && message.toolUses.length > 0 && (
+          <div className="space-y-1.5">
+            {message.toolUses.map((tu, i) => (
+              <ToolUseBlock
+                key={i}
+                toolUse={tu}
+                onClick={
+                  tu.link && onToolUseClick
+                    ? () => onToolUseClick(tu.link!)
+                    : undefined
+                }
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Questions indicator */}
+        {hasUnansweredQuestions && onAnswerQuestions && (
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              {message.questions!.length}{" "}
+              <Trans>pytań do odpowiedzenia</Trans>
+            </span>
+            <Button
+              size="xs"
+              icon={MessageSquare}
+              label={<Trans>Odpowiedz</Trans>}
+              onClick={onAnswerQuestions}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/react/chat.tsx

@@ -0,0 +1,117 @@
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import type {
+  ChatMessageData,
+  ChatModel,
+  QuestionAnswers,
+  SendMessageOptions,
+} from "./types";
+import { ChatMessage } from "./chat-message";
+import { ChatInput } from "./chat-input";
+import { QuestionTabs } from "./question-tabs";
+
+interface ChatProps {
+  /** Message history */
+  messages: ChatMessageData[];
+  /** Available AI models */
+  models: ChatModel[];
+  /** Default model to use */
+  defaultModel?: string;
+  /** Called when user sends a message */
+  onSend: (message: string, options: SendMessageOptions) => void;
+  /** Called when user submits answers to questions */
+  onAnswerQuestions?: (
+    messageId: string,
+    answers: QuestionAnswers,
+  ) => void;
+  /** Called when user clicks a tool use link */
+  onToolUseClick?: (link: string) => void;
+  /** Header content (title, description) */
+  header?: ReactNode;
+  /** Sidebar content (consultation plan, etc.) */
+  sidebar?: ReactNode;
+  /** Extra toolbar content for ChatInput (attach menu, etc.) */
+  toolbar?: ReactNode;
+  /** Max width class for the message area */
+  maxWidth?: string;
+}
+
+export function Chat({
+  messages,
+  models,
+  defaultModel,
+  onSend,
+  onAnswerQuestions,
+  onToolUseClick,
+  header,
+  sidebar,
+  toolbar,
+  maxWidth = "max-w-3xl",
+}: ChatProps) {
+  const [answeringMessageId, setAnsweringMessageId] = useState<string | null>(
+    null,
+  );
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const answeringMessage = answeringMessageId
+    ? messages.find((m) => m.id === answeringMessageId)
+    : null;
+
+  // Auto-scroll on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+
+  return (
+    <div className="flex gap-6">
+      {/* Sidebar */}
+      {sidebar && (
+        <div className="hidden lg:block w-64 shrink-0 sticky top-24 self-start">
+          {sidebar}
+        </div>
+      )}
+
+      {/* Main chat area */}
+      <div className="flex-1 min-w-0 space-y-4">
+        {/* Header */}
+        {header}
+
+        {/* Messages */}
+        <div className={`${maxWidth} mx-auto space-y-4`}>
+          {messages.map((msg) => (
+            <ChatMessage
+              key={msg.id}
+              message={msg}
+              onAnswerQuestions={
+                msg.questions?.length
+                  ? () => setAnsweringMessageId(msg.id)
+                  : undefined
+              }
+              onToolUseClick={onToolUseClick}
+            />
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input area — sticky at bottom */}
+        <div className={`sticky bottom-0 ${maxWidth} mx-auto w-full pb-4`}>
+          {answeringMessage?.questions ? (
+            <QuestionTabs
+              questions={answeringMessage.questions}
+              onSubmit={(answers) => {
+                onAnswerQuestions?.(answeringMessageId!, answers);
+                setAnsweringMessageId(null);
+              }}
+            />
+          ) : (
+            <ChatInput
+              onSend={onSend}
+              models={models}
+              defaultModel={defaultModel}
+              toolbar={toolbar}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/react/index.ts

@@ -0,0 +1,16 @@
+// --- Components ---
+export { Chat } from "./chat";
+export { ChatMessage } from "./chat-message";
+export { ChatInput } from "./chat-input";
+export { QuestionTabs } from "./question-tabs";
+export { ToolUseBlock } from "./tool-use-block";
+
+// --- Types ---
+export type {
+  ChatMessageData,
+  ChatModel,
+  SendMessageOptions,
+  ToolUse,
+  Question,
+  QuestionAnswers,
+} from "./types";

package/src/react/question-tabs.tsx

@@ -0,0 +1,157 @@
+import { Trans } from "@arcote.tech/platform";
+import { Box, Button, TextareaField } from "@arcote.tech/arc-ds";
+import { Send, Check } from "lucide-react";
+import { useState } from "react";
+import type { Question, QuestionAnswers } from "./types";
+
+interface QuestionTabsProps {
+  questions: Question[];
+  onSubmit: (answers: QuestionAnswers) => void;
+}
+
+export function QuestionTabs({ questions, onSubmit }: QuestionTabsProps) {
+  const [activeTab, setActiveTab] = useState(0);
+  const [answers, setAnswers] = useState<QuestionAnswers>(
+    () =>
+      Object.fromEntries(
+        questions.map((q) => [q.id, { selected: [], text: "" }]),
+      ),
+  );
+
+  const current = questions[activeTab];
+  const currentAnswer = answers[current.id] ?? { selected: [], text: "" };
+
+  const toggleOption = (option: string) => {
+    const selected = currentAnswer.selected.includes(option)
+      ? currentAnswer.selected.filter((o) => o !== option)
+      : [...currentAnswer.selected, option];
+    setAnswers((prev) => ({
+      ...prev,
+      [current.id]: { ...prev[current.id], selected },
+    }));
+  };
+
+  const setText = (text: string) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [current.id]: { ...prev[current.id], text },
+    }));
+  };
+
+  const hasCustomText = currentAnswer.text.trim().length > 0;
+
+  const totalAnswered = questions.filter(
+    (q) =>
+      (answers[q.id]?.selected.length ?? 0) > 0 ||
+      (answers[q.id]?.text ?? "").trim().length > 0,
+  ).length;
+
+  return (
+    <Box className="p-0 overflow-hidden">
+      {/* Tabs */}
+      <div className="flex border-b border-border overflow-x-auto">
+        {questions.map((q, i) => {
+          const hasAnswer =
+            (answers[q.id]?.selected.length ?? 0) > 0 ||
+            (answers[q.id]?.text ?? "").trim().length > 0;
+          return (
+            <button
+              key={q.id}
+              type="button"
+              onClick={() => setActiveTab(i)}
+              className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors border-b-2 -mb-px ${
+                i === activeTab
+                  ? "border-primary text-primary"
+                  : "border-transparent text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {hasAnswer && (
+                <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0" />
+              )}
+              {q.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div className="p-3 space-y-1.5">
+        <p className="text-xs text-muted-foreground mb-2">
+          {current.description}
+        </p>
+
+        {/* Options */}
+        {current.options.map((option) => {
+          const isSelected = currentAnswer.selected.includes(option);
+          return (
+            <button
+              key={option}
+              type="button"
+              onClick={() => toggleOption(option)}
+              className={`flex items-center gap-2.5 w-full rounded-lg px-3 py-2.5 text-left transition-colors ${
+                isSelected
+                  ? "bg-primary/10 border border-primary/20"
+                  : "bg-muted/50 border border-transparent hover:bg-muted"
+              }`}
+            >
+              <div
+                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
+                  isSelected
+                    ? "border-primary bg-primary"
+                    : "border-input bg-transparent"
+                }`}
+              >
+                {isSelected && (
+                  <Check className="h-3 w-3 text-primary-foreground" />
+                )}
+              </div>
+              <span className="text-sm">{option}</span>
+            </button>
+          );
+        })}
+
+        {/* Custom option */}
+        <div
+          className={`flex items-start gap-2.5 w-full rounded-lg px-3 py-2.5 transition-colors ${
+            hasCustomText
+              ? "bg-primary/10 border border-primary/20"
+              : "bg-muted/50 border border-transparent"
+          }`}
+        >
+          <div
+            className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors mt-0.5 ${
+              hasCustomText
+                ? "border-primary bg-primary"
+                : "border-input bg-transparent"
+            }`}
+          >
+            {hasCustomText && (
+              <Check className="h-3 w-3 text-primary-foreground" />
+            )}
+          </div>
+          <div className="flex-1">
+            <TextareaField
+              value={currentAnswer.text}
+              onChange={(val) => setText(val ?? "")}
+              placeholder="Własna odpowiedź..."
+              rows={1}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between border-t border-border px-3 py-2">
+        <span className="text-[10px] text-muted-foreground">
+          {totalAnswered}/{questions.length} <Trans>uzupełnione</Trans>
+        </span>
+        <Button
+          size="sm"
+          icon={Send}
+          label={<Trans>Wyślij</Trans>}
+          onClick={() => onSubmit(answers)}
+        />
+      </div>
+    </Box>
+  );
+}

package/src/react/tool-use-block.tsx

@@ -0,0 +1,34 @@
+import { CheckCircle2, ArrowRight } from "lucide-react";
+import type { ToolUse } from "./types";
+
+interface ToolUseBlockProps {
+  toolUse: ToolUse;
+  onClick?: () => void;
+}
+
+export function ToolUseBlock({ toolUse, onClick }: ToolUseBlockProps) {
+  const Component = onClick ? "button" : "div";
+
+  return (
+    <Component
+      type={onClick ? "button" : undefined}
+      onClick={onClick}
+      className={`flex items-start gap-3 w-full rounded-xl border border-green-500/20 bg-green-500/5 p-3 text-left transition-colors ${
+        onClick ? "hover:bg-green-500/10 cursor-pointer" : ""
+      }`}
+    >
+      <CheckCircle2 className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
+      <div className="flex-1 min-w-0">
+        <p className="text-xs font-medium text-green-700 dark:text-green-400">
+          {toolUse.action}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">
+          {toolUse.value}
+        </p>
+      </div>
+      {onClick && (
+        <ArrowRight className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
+      )}
+    </Component>
+  );
+}

package/src/react/types.ts

@@ -0,0 +1,36 @@
+export interface ToolUse {
+  action: string;
+  value: string;
+  link?: string;
+}
+
+export interface Question {
+  id: string;
+  label: string;
+  description: string;
+  options: string[];
+}
+
+export interface QuestionAnswers {
+  [questionId: string]: { selected: string[]; text: string };
+}
+
+export interface ChatMessageData {
+  id: string;
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  toolUses?: ToolUse[];
+  questions?: Question[];
+  isStreaming?: boolean;
+}
+
+export interface ChatModel {
+  value: string;
+  label: string;
+}
+
+export interface SendMessageOptions {
+  model: string;
+  webSearch: boolean;
+  attachments?: string[];
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "include": ["src/**/*"]
+}