@codrstudio/openclaude-chat 0.1.0 → 0.1.9

package/src/components/Chat.tsx

@@ -1,107 +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>
-  );
-}
+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

@@ -1,35 +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>
-  );
-}
+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

@@ -1,42 +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>
-  );
-}
+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

@@ -1,114 +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>
-  );
-});
+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>
+  );
+});