@arcote.tech/arc-ds 0.4.7 → 0.4.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -28,7 +28,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.4.7",
+    "@arcote.tech/arc": "^0.4.8",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/chat/chat-input.tsx

@@ -0,0 +1,87 @@
+import { Box } from "../box/box";
+import { Button } from "../button/button";
+import { TextareaField } from "../form";
+import { SearchSelect } from "../search-select/search-select";
+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;
+  /** Label for web search toggle */
+  webSearchLabel?: string;
+  /** Placeholder for message input */
+  placeholder?: string;
+}
+
+export function ChatInput({
+  onSend,
+  models,
+  defaultModel,
+  toolbar,
+  webSearchLabel = "Web",
+  placeholder = "Type a message...",
+}: 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={placeholder}
+            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={webSearchLabel}
+          onClick={() => setWebSearch((v) => !v)}
+        />
+
+        {toolbar}
+      </div>
+    </Box>
+  );
+}

package/src/ds/chat/chat-message.tsx

@@ -0,0 +1,104 @@
+import { Button } from "../button/button";
+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;
+  /** Label for questions count, e.g. "questions to answer" */
+  questionsLabel?: string;
+  /** Label for the answer button */
+  answerLabel?: string;
+}
+
+export function ChatMessage({
+  message,
+  onAnswerQuestions,
+  onToolUseClick,
+  questionsLabel = "questions to answer",
+  answerLabel = "Answer",
+}: 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} {questionsLabel}
+            </span>
+            <Button
+              size="xs"
+              icon={MessageSquare}
+              label={answerLabel}
+              onClick={onAnswerQuestions}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ds/chat/chat.tsx

@@ -0,0 +1,135 @@
+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";
+
+export 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;
+  /** Labels for i18n */
+  labels?: {
+    questionsLabel?: string;
+    answerLabel?: string;
+    webSearchLabel?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    completedLabel?: string;
+    customPlaceholder?: string;
+  };
+}
+
+export function Chat({
+  messages,
+  models,
+  defaultModel,
+  onSend,
+  onAnswerQuestions,
+  onToolUseClick,
+  header,
+  sidebar,
+  toolbar,
+  maxWidth = "max-w-3xl",
+  labels,
+}: 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}
+              questionsLabel={labels?.questionsLabel}
+              answerLabel={labels?.answerLabel}
+            />
+          ))}
+          <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);
+              }}
+              submitLabel={labels?.submitLabel}
+              completedLabel={labels?.completedLabel}
+              customPlaceholder={labels?.customPlaceholder}
+            />
+          ) : (
+            <ChatInput
+              onSend={onSend}
+              models={models}
+              defaultModel={defaultModel}
+              toolbar={toolbar}
+              webSearchLabel={labels?.webSearchLabel}
+              placeholder={labels?.placeholder}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ds/chat/question-tabs.tsx

@@ -0,0 +1,170 @@
+import { Box } from "../box/box";
+import { Button } from "../button/button";
+import { TextareaField } from "../form";
+import { Send, Check } from "lucide-react";
+import { useState } from "react";
+import type { Question, QuestionAnswers } from "./types";
+
+interface QuestionTabsProps {
+  questions: Question[];
+  onSubmit: (answers: QuestionAnswers) => void;
+  /** Label for submit button */
+  submitLabel?: string;
+  /** Label for completed count, e.g. "completed" */
+  completedLabel?: string;
+  /** Placeholder for custom answer input */
+  customPlaceholder?: string;
+}
+
+export function QuestionTabs({
+  questions,
+  onSubmit,
+  submitLabel = "Submit",
+  completedLabel = "completed",
+  customPlaceholder = "Custom answer...",
+}: 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={customPlaceholder}
+              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} {completedLabel}
+        </span>
+        <Button
+          size="sm"
+          icon={Send}
+          label={submitLabel}
+          onClick={() => onSubmit(answers)}
+        />
+      </div>
+    </Box>
+  );
+}

package/src/ds/chat/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/ds/chat/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/src/index.ts

@@ -99,6 +99,22 @@ export { ExpandablePanel } from "./layout/expandable-panel";
 export { useExpandable } from "./layout/use-expandable";
 export type { UseExpandableReturn } from "./layout/use-expandable";
 
+// Chat
+export { Chat } from "./ds/chat/chat";
+export type { ChatProps } from "./ds/chat/chat";
+export { ChatMessage } from "./ds/chat/chat-message";
+export { ChatInput } from "./ds/chat/chat-input";
+export { QuestionTabs } from "./ds/chat/question-tabs";
+export { ToolUseBlock } from "./ds/chat/tool-use-block";
+export type {
+  ChatMessageData,
+  ChatModel,
+  SendMessageOptions,
+  ToolUse,
+  Question,
+  QuestionAnswers,
+} from "./ds/chat/types";
+
 // Types
 export type {
   AvatarProps,