@codrstudio/openclaude-chat 0.1.0

package/dist/ui/scroll-area.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/ui/separator.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Skeleton({ className, ...props }) {
+    return _jsx("div", { className: cn("animate-pulse rounded-md bg-primary/10", className), ...props });
+}
+export { Skeleton };

package/dist/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/ui/table.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@codrstudio/openclaude-chat",
+  "version": "0.1.0",
+  "description": "Rich chat UI component — HTTP+SSE counterpart to @codrstudio/openclaude-sdk. Shadcn-native (consumes host tokens).",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
+    "build:ts": "tsc",
+    "build:css": "npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@radix-ui/react-collapsible": "^1",
+    "@radix-ui/react-dialog": "^1",
+    "@radix-ui/react-dropdown-menu": "^2",
+    "@radix-ui/react-scroll-area": "^1",
+    "@radix-ui/react-separator": "^1",
+    "@tanstack/react-virtual": "^3.13.23",
+    "class-variance-authority": "^0.7",
+    "clsx": "^2",
+    "embla-carousel-react": "^8",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^0.400.0",
+    "react-markdown": "^9",
+    "recharts": "^2",
+    "rehype-highlight": "^7",
+    "remark-gfm": "^4",
+    "sucrase": "^3.35.1",
+    "tailwind-merge": "^3"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:codrstudio/openclaude-chat.git"
+  }
+}

package/src/components/Chat.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { cn } from "../lib/utils.js";
+import { ChatProvider, useChatContext } from "../hooks/ChatProvider.js";
+import { MessageList } from "./MessageList.js";
+import { MessageInput } from "./MessageInput.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import type { Message } from "../types.js";
+
+export interface ChatProps {
+  /** Base URL do servico openclaude (ex: http://localhost:9500/api/v1/ai). */
+  endpoint: string;
+  token?: string;
+  /** Sessao live existente. Se omitida, o hook cria uma via POST /sessions. */
+  sessionId?: string;
+  initialMessages?: Message[];
+  sessionOptions?: Record<string, unknown>;
+  turnOptions?: Record<string, unknown>;
+  displayRenderers?: DisplayRendererMap;
+  placeholder?: string;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  enableAttachments?: boolean;
+  enableVoice?: boolean;
+  fetcher?: typeof fetch;
+  emptyState?: React.ReactNode;
+}
+
+interface ChatContentProps {
+  displayRenderers?: DisplayRendererMap;
+  placeholder?: string;
+  enableAttachments?: boolean;
+  enableVoice?: boolean;
+  emptyState?: React.ReactNode;
+}
+
+function ChatContent({ displayRenderers, placeholder, enableAttachments = true, enableVoice = true, emptyState }: ChatContentProps) {
+  const { messages, input, setInput, handleSubmit, isLoading, stop, error, reload } = useChatContext();
+
+  return (
+    <>
+      <MessageList
+        messages={messages}
+        isLoading={isLoading}
+        displayRenderers={displayRenderers}
+        error={error ?? undefined}
+        onRetry={reload}
+        emptyState={emptyState}
+      />
+      <div className="px-4 pb-4">
+        <MessageInput
+          input={input}
+          setInput={setInput}
+          handleSubmit={handleSubmit}
+          isLoading={isLoading}
+          stop={stop}
+          placeholder={placeholder}
+          enableAttachments={enableAttachments}
+          enableVoice={enableVoice}
+        />
+      </div>
+    </>
+  );
+}
+
+export function Chat({
+  endpoint,
+  token,
+  sessionId,
+  initialMessages,
+  sessionOptions,
+  turnOptions,
+  displayRenderers,
+  placeholder,
+  header,
+  footer,
+  className,
+  enableAttachments,
+  enableVoice,
+  fetcher,
+  emptyState,
+}: ChatProps) {
+  return (
+    <ChatProvider
+      key={sessionId}
+      endpoint={endpoint}
+      token={token}
+      sessionId={sessionId}
+      initialMessages={initialMessages}
+      sessionOptions={sessionOptions}
+      turnOptions={turnOptions}
+      fetcher={fetcher}
+    >
+      <div className={cn("flex flex-col h-full bg-background text-foreground", className)}>
+        {header}
+        <ChatContent
+          displayRenderers={displayRenderers}
+          placeholder={placeholder}
+          enableAttachments={enableAttachments}
+          enableVoice={enableVoice}
+          emptyState={emptyState}
+        />
+        {footer}
+      </div>
+    </ChatProvider>
+  );
+}

package/src/components/ErrorNote.tsx

@@ -0,0 +1,35 @@
+import { AlertTriangle, RotateCcw } from "lucide-react";
+import { cn } from "../lib/utils.js";
+
+export interface ErrorNoteProps {
+  message?: string;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export function ErrorNote({ message, onRetry, className }: ErrorNoteProps) {
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive",
+        className
+      )}
+    >
+      <AlertTriangle className="size-4 shrink-0 mt-0.5" />
+      <span className="flex-1 min-w-0 break-words">
+        {message ?? "Falha ao processar mensagem"}
+      </span>
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="shrink-0 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors"
+        >
+          <RotateCcw className="size-3.5" />
+          Tentar novamente
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/LazyRender.tsx

@@ -0,0 +1,42 @@
+import { useRef, useState, useEffect, type ReactNode } from "react";
+
+interface LazyRenderProps {
+  children: ReactNode;
+  minHeight?: number;
+  rootMargin?: string;
+}
+
+export function LazyRender({ children, minHeight = 120, rootMargin = "200px" }: LazyRenderProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rootMargin]);
+
+  if (visible) return <>{children}</>;
+
+  return (
+    <div
+      ref={ref}
+      className="flex items-center justify-center text-muted-foreground text-xs rounded-md bg-muted/20 animate-pulse"
+      style={{ minHeight }}
+    >
+      Carregando...
+    </div>
+  );
+}

package/src/components/Markdown.tsx

@@ -0,0 +1,114 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import type { Components } from "react-markdown";
+import { cn } from "../lib/utils.js";
+
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_PLUGINS = [rehypeHighlight];
+
+const components: Components = {
+  h1({ children }) {
+    return <h1 className="text-xl font-semibold" style={{ marginTop: "20px", marginBottom: "8px" }}>{children}</h1>;
+  },
+  h2({ children }) {
+    return <h2 className="text-lg font-semibold" style={{ marginTop: "20px", marginBottom: "8px" }}>{children}</h2>;
+  },
+  h3({ children }) {
+    return <h3 className="text-base font-semibold" style={{ marginTop: "20px", marginBottom: "8px" }}>{children}</h3>;
+  },
+  h4({ children }) {
+    return <h4 className="font-semibold" style={{ marginTop: "20px", marginBottom: "8px" }}>{children}</h4>;
+  },
+  p({ children }) {
+    return <p className="mb-4 last:mb-0">{children}</p>;
+  },
+  ul({ children }) {
+    return <ul style={{ paddingLeft: "24px", marginTop: "8px", marginBottom: "8px", listStyleType: "disc" }}>{children}</ul>;
+  },
+  ol({ children }) {
+    return <ol style={{ paddingLeft: "24px", marginTop: "8px", marginBottom: "8px", listStyleType: "decimal" }}>{children}</ol>;
+  },
+  li({ children }) {
+    return <li style={{ marginTop: "4px", marginBottom: "4px" }}>{children}</li>;
+  },
+  hr() {
+    return <hr className="border-border" style={{ marginTop: "16px", marginBottom: "16px" }} />;
+  },
+  pre({ children }) {
+    return (
+      <pre className="bg-muted border border-border rounded-md overflow-hidden" style={{ marginTop: "12px", marginBottom: "12px" }}>
+        {children}
+      </pre>
+    );
+  },
+  code({ className, children }) {
+    const isBlock = className?.startsWith("language-");
+    if (isBlock) {
+      return (
+        <code className={cn("block p-4 overflow-x-auto font-mono text-sm", className)}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-sm">
+        {children}
+      </code>
+    );
+  },
+  a({ href, children }) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary underline underline-offset-2 hover:opacity-80">
+        {children}
+      </a>
+    );
+  },
+  blockquote({ children }) {
+    return (
+      <blockquote className="border-l-[3px] border-border py-1 px-3 text-muted-foreground" style={{ marginTop: "12px", marginBottom: "12px" }}>
+        {children}
+      </blockquote>
+    );
+  },
+  table({ children }) {
+    return (
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse text-sm">{children}</table>
+      </div>
+    );
+  },
+  th({ children }) {
+    return (
+      <th className="border border-border px-3 py-1.5 text-left font-semibold bg-muted">
+        {children}
+      </th>
+    );
+  },
+  td({ children }) {
+    return (
+      <td className="border border-border px-3 py-1.5 text-left">
+        {children}
+      </td>
+    );
+  },
+};
+
+interface MarkdownProps {
+  children: string;
+}
+
+export const Markdown = memo(function Markdown({ children }: MarkdownProps) {
+  return (
+    <div className="text-foreground text-sm" style={{ lineHeight: "1.625em" }}>
+      <ReactMarkdown
+        remarkPlugins={REMARK_PLUGINS}
+        rehypePlugins={REHYPE_PLUGINS}
+        components={components}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,107 @@
+import { memo, useState, useCallback } from "react";
+import type { Message } from "../types.js";
+import { cn } from "../lib/utils.js";
+import { Markdown } from "./Markdown.js";
+import { StreamingIndicator } from "./StreamingIndicator.js";
+import { PartRenderer } from "../parts/PartRenderer.js";
+import { PartErrorBoundary } from "../parts/PartErrorBoundary.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { Copy, Check } from "lucide-react";
+
+export interface MessageBubbleProps {
+  message: Message;
+  isStreaming?: boolean;
+  displayRenderers?: DisplayRendererMap;
+  className?: string;
+}
+
+function extractText(message: Message): string {
+  if (message.content) return message.content;
+  if (!Array.isArray(message.parts)) return "";
+  return message.parts
+    .filter((p): p is { type: "text"; text: string } => (p as { type: string }).type === "text")
+    .map((p) => p.text)
+    .join("\n");
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className={cn(
+        "h-7 w-7 flex items-center justify-center rounded-lg transition-all",
+        "text-muted-foreground/50 opacity-0 group-hover/bubble:opacity-100",
+        "hover:bg-muted/50 hover:text-muted-foreground",
+      )}
+      aria-label={copied ? "Copiado" : "Copiar mensagem"}
+    >
+      {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+    </button>
+  );
+}
+
+export const MessageBubble = memo(function MessageBubble({ message, isStreaming, displayRenderers, className }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+  const hasParts = Array.isArray(message.parts) && message.parts.length > 0;
+  const hasText = typeof message.content === "string" && message.content.length > 0;
+  const isEmptyAssistant = !isUser && !hasParts && !hasText && !isStreaming;
+
+  return (
+    <div className={cn("group/bubble", isUser ? "flex flex-col items-end" : "flex flex-col items-start")}>
+      {/* Bubble */}
+      <div
+        className={cn(
+          "min-w-0 overflow-hidden",
+          isUser
+            ? "max-w-[80%] rounded-lg rounded-br-sm bg-muted text-foreground px-4 py-2.5"
+            : "w-full text-foreground py-1",
+          className
+        )}
+      >
+        {hasParts
+          ? <div className="flex flex-col gap-3">
+              {(message.parts as { type: string }[]).map((part, i) => (
+                <PartErrorBoundary key={i} label={`part:${part.type}`}>
+                  <PartRenderer
+                    part={part as Parameters<typeof PartRenderer>[0]["part"]}
+                    isStreaming={isStreaming}
+                    displayRenderers={displayRenderers}
+                  />
+                </PartErrorBoundary>
+              ))}
+            </div>
+          : hasText
+            ? <Markdown>{message.content}</Markdown>
+            : isEmptyAssistant
+              ? <span className="text-xs italic text-muted-foreground">(resposta vazia)</span>
+              : null
+        }
+        {isStreaming && !isUser && <StreamingIndicator />}
+      </div>
+
+      {/* Action bar — outside bubble, below */}
+      {!isStreaming && (
+        <div className={cn(
+          "flex items-center gap-0.5 mt-0.5",
+          isUser ? "justify-end" : "justify-start"
+        )}>
+          <CopyButton text={extractText(message)} />
+        </div>
+      )}
+    </div>
+  );
+}, (prev, next) =>
+  prev.message === next.message
+  && prev.isStreaming === next.isStreaming
+  && prev.displayRenderers === next.displayRenderers
+  && prev.className === next.className
+);