@arcote.tech/arc-chat 0.4.7 → 0.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-chat",
   "type": "module",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "private": false,
   "description": "Chat module with AI integration for Arc framework",
   "main": "./src/index.ts",
@@ -10,11 +10,11 @@
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.4.7",
-    "@arcote.tech/arc-ai": "^0.4.7",
-    "@arcote.tech/arc-auth": "^0.4.7",
-    "@arcote.tech/arc-ds": "^0.4.7",
-    "@arcote.tech/platform": "^0.4.7",
+    "@arcote.tech/arc": "^0.4.9",
+    "@arcote.tech/arc-ai": "^0.4.9",
+    "@arcote.tech/arc-auth": "^0.4.9",
+    "@arcote.tech/arc-ds": "^0.4.9",
+    "@arcote.tech/platform": "^0.4.9",
     "lucide-react": ">=0.400.0",
     "react": ">=18.0.0",
     "typescript": "^5.0.0"

package/src/react/index.ts

@@ -1,16 +1,11 @@
-// --- 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 ---
+// Re-export chat UI components from arc-ds
+export { Chat, ChatMessage, ChatInput, QuestionTabs, ToolUseBlock } from "@arcote.tech/arc-ds";
 export type {
+  ChatProps,
   ChatMessageData,
   ChatModel,
   SendMessageOptions,
   ToolUse,
   Question,
   QuestionAnswers,
-} from "./types";
+} from "@arcote.tech/arc-ds";

package/src/react/chat-input.tsx

@@ -1,79 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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/question-tabs.tsx

@@ -1,157 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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[];
-}