@arcote.tech/arc-ds 0.5.1 → 0.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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.5.1",
+    "@arcote.tech/arc": "^0.5.2",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

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

@@ -0,0 +1,35 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+interface ChatInputContextType {
+  inputOverride: ReactNode | null;
+  registerInputOverride: (content: ReactNode) => void;
+  clearInputOverride: () => void;
+}
+
+const ChatInputContext = createContext<ChatInputContextType | null>(null);
+
+export function ChatInputProvider({ children }: { children: ReactNode }) {
+  const [inputOverride, setInputOverride] = useState<ReactNode | null>(null);
+
+  return (
+    <ChatInputContext.Provider
+      value={{
+        inputOverride,
+        registerInputOverride: setInputOverride,
+        clearInputOverride: () => setInputOverride(null),
+      }}
+    >
+      {children}
+    </ChatInputContext.Provider>
+  );
+}
+
+const noopContext: ChatInputContextType = {
+  inputOverride: null,
+  registerInputOverride: () => {},
+  clearInputOverride: () => {},
+};
+
+export function useChatInput(): ChatInputContextType {
+  return useContext(ChatInputContext) ?? noopContext;
+}

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

@@ -16,6 +16,8 @@ interface ChatInputProps {
   webSearchLabel?: string;
   /** Placeholder for message input */
   placeholder?: string;
+  /** Disable input (e.g., during generation) */
+  disabled?: boolean;
 }
 
 export function ChatInput({
@@ -25,12 +27,14 @@ export function ChatInput({
   toolbar,
   webSearchLabel = "Web",
   placeholder = "Type a message...",
+  disabled = false,
 }: ChatInputProps) {
   const [message, setMessage] = useState("");
   const [model, setModel] = useState(defaultModel ?? models[0]?.value ?? "");
   const [webSearch, setWebSearch] = useState(false);
 
   const handleSend = () => {
+    if (disabled) return;
     const text = message.trim();
     if (!text) return;
     onSend(text, { model, webSearch });
@@ -38,14 +42,14 @@ export function ChatInput({
   };
 
   return (
-    <Box className="p-3 space-y-2">
+    <Box className={`p-3 space-y-2 ${disabled ? "opacity-50 pointer-events-none" : ""}`}>
       {/* Input + send */}
       <div className="flex items-end gap-2">
         <div className="flex-1">
           <TextareaField
             value={message}
             onChange={(val) => setMessage(val ?? "")}
-            placeholder={placeholder}
+            placeholder={disabled ? "Generowanie..." : placeholder}
             rows={1}
           />
         </div>
@@ -53,7 +57,7 @@ export function ChatInput({
           size="sm"
           icon={Send}
           onClick={handleSend}
-          disabled={!message.trim()}
+          disabled={disabled || !message.trim()}
         />
       </div>
 

package/src/ds/chat/chat-tool-log.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { CheckCircle2, Loader2, AlertCircle } from "lucide-react";
+
+export interface ChatToolLogProps {
+  /** Tool label displayed in the header */
+  label: string;
+  /** Whether the tool is currently executing */
+  calling: boolean;
+  /** Error message (overrides success state) */
+  error?: string;
+  /** Optional icon name — reserved for future use */
+  icon?: string;
+  /** Additional details rendered below the label */
+  children?: ReactNode;
+}
+
+export function ChatToolLog({
+  label,
+  calling,
+  error,
+  children,
+}: ChatToolLogProps) {
+  const hasError = !!error;
+
+  const borderColor = hasError
+    ? "border-red-500/20 bg-red-500/5"
+    : calling
+      ? "border-blue-500/20 bg-blue-500/5"
+      : "border-green-500/20 bg-green-500/5";
+
+  const iconColor = hasError
+    ? "text-red-500"
+    : calling
+      ? "text-blue-500"
+      : "text-green-500";
+
+  const labelColor = hasError
+    ? "text-red-700 dark:text-red-400"
+    : calling
+      ? "text-blue-700 dark:text-blue-400"
+      : "text-green-700 dark:text-green-400";
+
+  return (
+    <div
+      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+    >
+      <div className={`mt-0.5 shrink-0 ${iconColor}`}>
+        {hasError ? (
+          <AlertCircle className="h-4 w-4" />
+        ) : calling ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <CheckCircle2 className="h-4 w-4" />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className={`text-xs font-medium ${labelColor}`}>{label}</p>
+        {hasError && (
+          <p className="text-xs text-red-600 dark:text-red-400 mt-0.5">
+            {error}
+          </p>
+        )}
+        {children && (
+          <div className="text-xs text-muted-foreground mt-0.5">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { MessageCircleQuestion, CheckCircle2 } from "lucide-react";
+
+export interface ChatToolQuestionProps {
+  /** Whether the tool is waiting for user response */
+  calling: boolean;
+  /** Content — question text + action buttons */
+  children: ReactNode;
+}
+
+export function ChatToolQuestion({
+  calling,
+  children,
+}: ChatToolQuestionProps) {
+  const borderColor = calling
+    ? "border-amber-500/20 bg-amber-500/5"
+    : "border-green-500/20 bg-green-500/5";
+
+  const iconColor = calling
+    ? "text-amber-500"
+    : "text-green-500";
+
+  return (
+    <div
+      className={`flex items-start gap-3 w-full rounded-xl border p-3 transition-colors ${borderColor}`}
+    >
+      <div className={`mt-0.5 shrink-0 ${iconColor}`}>
+        {calling ? (
+          <MessageCircleQuestion className="h-4 w-4" />
+        ) : (
+          <CheckCircle2 className="h-4 w-4" />
+        )}
+      </div>
+      <div className="flex-1 min-w-0 space-y-2 text-sm">{children}</div>
+    </div>
+  );
+}

package/src/ds/chat/chat.tsx

@@ -7,6 +7,7 @@ import type {
 } from "./types";
 import { ChatMessage } from "./chat-message";
 import { ChatInput } from "./chat-input";
+import { useChatInput } from "./chat-input-provider";
 import { QuestionTabs } from "./question-tabs";
 
 export interface ChatProps {
@@ -33,6 +34,8 @@ export interface ChatProps {
   toolbar?: ReactNode;
   /** Max width class for the message area */
   maxWidth?: string;
+  /** Disable input (during generation) */
+  disabled?: boolean;
   /** Labels for i18n */
   labels?: {
     questionsLabel?: string;
@@ -56,8 +59,10 @@ export function Chat({
   sidebar,
   toolbar,
   maxWidth = "max-w-3xl",
+  disabled = false,
   labels,
 }: ChatProps) {
+  const { inputOverride } = useChatInput();
   const [answeringMessageId, setAnsweringMessageId] = useState<string | null>(
     null,
   );
@@ -107,7 +112,9 @@ export function Chat({
 
         {/* Input area — sticky at bottom */}
         <div className={`sticky bottom-0 ${maxWidth} mx-auto w-full pb-4`}>
-          {answeringMessage?.questions ? (
+          {inputOverride ? (
+            inputOverride
+          ) : answeringMessage?.questions ? (
             <QuestionTabs
               questions={answeringMessage.questions}
               onSubmit={(answers) => {
@@ -126,6 +133,7 @@ export function Chat({
               toolbar={toolbar}
               webSearchLabel={labels?.webSearchLabel}
               placeholder={labels?.placeholder}
+              disabled={disabled}
             />
           )}
         </div>

package/src/index.ts

@@ -106,6 +106,11 @@ 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 { ChatToolLog } from "./ds/chat/chat-tool-log";
+export type { ChatToolLogProps } from "./ds/chat/chat-tool-log";
+export { ChatToolQuestion } from "./ds/chat/chat-tool-question";
+export type { ChatToolQuestionProps } from "./ds/chat/chat-tool-question";
+export { ChatInputProvider, useChatInput } from "./ds/chat/chat-input-provider";
 export type {
   ChatMessageData,
   ChatModel,