@tangle-network/ui 1.0.0

package/src/chat/user-message.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { UserMessage } from './user-message'
+import type { SessionMessage } from '../types/message'
+import type { SessionPart } from '../types/parts'
+
+const meta: Meta<typeof UserMessage> = {
+  title: 'Chat/UserMessage',
+  component: UserMessage,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-[var(--bg-root)] p-8">
+        <div className="mx-auto max-w-2xl">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof UserMessage>
+
+const makeMessage = (id: string): SessionMessage => ({
+  id,
+  role: 'user',
+  time: { created: Date.now() },
+})
+
+const textPart = (text: string): SessionPart => ({ type: 'text', text })
+
+export const Simple: Story = {
+  args: {
+    message: makeMessage('msg-1'),
+    parts: [textPart('How do I implement a binary search tree in TypeScript?')],
+  },
+}
+
+export const Multiline: Story = {
+  args: {
+    message: makeMessage('msg-2'),
+    parts: [
+      textPart(
+        `I have a React component that fetches data on mount but the loading state flickers briefly even when data is cached.\n\nHere's what I'm doing:\n\n\`\`\`tsx\nconst [data, setData] = useState(null)\nconst [loading, setLoading] = useState(true)\n\nuseEffect(() => {\n  fetchData().then(setData).finally(() => setLoading(false))\n}, [])\n\`\`\`\n\nWhat's the cleanest fix?`,
+      ),
+    ],
+  },
+}
+
+export const ShortQuestion: Story = {
+  args: {
+    message: makeMessage('msg-3'),
+    parts: [textPart('What is the time complexity of quicksort in the worst case?')],
+  },
+}
+
+export const WithMarkdown: Story = {
+  args: {
+    message: makeMessage('msg-4'),
+    parts: [
+      textPart(
+        `Can you refactor this so it uses **async/await** instead of promise chains?\n\nAlso make sure:\n- Error handling is explicit\n- The return type is \`Promise<Result<T, Error>>\`\n- No unhandled rejections`,
+      ),
+    ],
+  },
+}
+
+export const LongMessage: Story = {
+  args: {
+    message: makeMessage('msg-5'),
+    parts: [
+      textPart(
+        `I'm building a distributed rate limiter that needs to work across multiple Node.js instances behind a load balancer. The requirements are:\n\n1. Max 100 requests per minute per user\n2. Sliding window (not fixed)\n3. Redis as the shared store\n4. Must handle Redis failure gracefully (fail open)\n5. Sub-millisecond p99 overhead\n\nI've seen the token bucket and leaky bucket algorithms but I'm not sure which is better here. Can you walk me through the implementation in TypeScript using ioredis, and explain the trade-offs?`,
+      ),
+    ],
+  },
+}
+
+export const WithActions: Story = {
+  args: {
+    message: makeMessage('msg-6'),
+    parts: [textPart('Write a SQL query to find the top 5 customers by revenue this quarter.')],
+    actions: (
+      <button className="text-xs text-muted-foreground hover:text-foreground">
+        Edit
+      </button>
+    ),
+  },
+}

package/src/chat/user-message.tsx

@@ -0,0 +1,43 @@
+import { memo, type ReactNode } from "react";
+import type { SessionMessage } from "../types/message";
+import type { SessionPart } from "../types/parts";
+
+export interface UserMessageProps {
+  message: SessionMessage;
+  parts: SessionPart[];
+  actions?: ReactNode;
+}
+
+/**
+ * Simple user message bubble.
+ * Renders text parts from the user's message.
+ */
+export const UserMessage = memo(({ message, parts, actions }: UserMessageProps) => {
+  const textContent = parts
+    .filter((p) => p.type === "text")
+    .map((p) => (p as { text: string }).text)
+    .join("\n");
+
+  if (!textContent.trim()) return null;
+
+  return (
+    <div className="flex justify-end">
+      <div className="flex max-w-[78%] flex-col items-end gap-2">
+        <div className="w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]">
+          <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60">
+            You
+          </div>
+          <div className="whitespace-pre-wrap text-[15px] leading-6.5 text-white">
+            {textContent}
+          </div>
+        </div>
+        {actions ? (
+          <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+            {actions}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+UserMessage.displayName = "UserMessage";

package/src/editor/document-editor-pane.tsx

@@ -0,0 +1,351 @@
+"use client";
+
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
+import { Markdown } from "../markdown/markdown";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/tabs";
+import { cn } from "../lib/utils";
+import { ArtifactPane, type ArtifactPaneProps } from "../primitives/artifact-pane";
+import {
+  CollaboratorsList,
+  TiptapEditor,
+  type TiptapEditorProps,
+} from "./tiptap-editor";
+import {
+  EditorProvider,
+  type ConnectionState,
+  type EditorProviderProps,
+} from "./editor-provider";
+import { MarkdownDocumentEditor } from "./markdown-document-editor";
+import {
+  htmlToMarkdown,
+  markdownToHtml,
+  normalizeMarkdown,
+} from "./markdown-conversion";
+import { useCollaborators, useEditorConnection } from "./use-editor";
+
+export type DocumentEditorMode = "preview" | "edit";
+export type DocumentEditorBackend = "local" | "collaborative";
+
+export interface DocumentEditorPaneCollaborationConfig
+  extends Omit<EditorProviderProps, "children"> {}
+
+export interface DocumentEditorPaneProps
+  extends Omit<ArtifactPaneProps, "children" | "tabs" | "toolbar" | "emptyState"> {
+  tabs?: ArtifactPaneProps["tabs"];
+  toolbar?: ReactNode;
+  markdown?: string;
+  mode?: DocumentEditorMode;
+  defaultMode?: DocumentEditorMode;
+  onModeChange?: (mode: DocumentEditorMode) => void;
+  backend?: DocumentEditorBackend;
+  placeholder?: string;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+  onChange?: (markdown: string) => void;
+  onSave?: (markdown: string) => Promise<void> | void;
+  saving?: boolean;
+  saveLabel?: string;
+  previewClassName?: string;
+  editorClassName?: string;
+  collaboration?: DocumentEditorPaneCollaborationConfig;
+}
+
+function connectionTone(state: ConnectionState) {
+  switch (state) {
+    case "synced":
+      return "text-[var(--surface-success-text)] border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]";
+    case "connected":
+    case "connecting":
+      return "text-[var(--surface-info-text)] border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]";
+    case "disconnected":
+    default:
+      return "text-[var(--surface-warning-text)] border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]";
+  }
+}
+
+function connectionLabel(state: ConnectionState) {
+  switch (state) {
+    case "synced":
+      return "Live synced";
+    case "connected":
+      return "Connected";
+    case "connecting":
+      return "Connecting";
+    case "disconnected":
+    default:
+      return "Offline";
+  }
+}
+
+function connectionDescription(
+  state: ConnectionState,
+  collaborators: number,
+  readOnly?: boolean,
+) {
+  if (readOnly) {
+    return state === "disconnected"
+      ? "Live access is paused. You can keep reading while the editor reconnects."
+      : "You are viewing the live document in read-only mode.";
+  }
+
+  switch (state) {
+    case "synced":
+      return collaborators > 0
+        ? `You and ${collaborators} collaborator${
+            collaborators === 1 ? "" : "s"
+          } are editing the same document.`
+        : "You are editing the live document. Changes sync automatically.";
+    case "connected":
+    case "connecting":
+      return "Connecting the live document. Local edits stay in place while sync catches up.";
+    case "disconnected":
+    default:
+      return "Live updates are paused. You can keep editing and reconnect when the transport is healthy again.";
+  }
+}
+
+function CollaborativeDocumentSurface({
+  markdown,
+  placeholder,
+  autoFocus,
+  readOnly,
+  className,
+  onChange,
+}: {
+  markdown: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+  className?: string;
+  onChange?: (markdown: string) => void;
+}) {
+  const { state } = useEditorConnection();
+  const { collaborators } = useCollaborators();
+  const initialContent = useMemo(() => markdownToHtml(markdown), [markdown]);
+  const collaboratorCount = collaborators.length + 1;
+
+  return (
+    <div className={cn("flex h-full min-h-0 flex-col gap-3", className)}>
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-border bg-card px-3 py-2">
+        <div className="min-w-0 space-y-2">
+          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-medium",
+                connectionTone(state),
+              )}
+            >
+              {state === "disconnected" ? (
+                <WifiOff className="h-3.5 w-3.5" />
+              ) : (
+                <Wifi className="h-3.5 w-3.5" />
+              )}
+              {connectionLabel(state)}
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1">
+              <Users className="h-3.5 w-3.5" />
+              {collaborators.length === 0 ? "Solo editing" : `${collaboratorCount} active`}
+            </span>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {connectionDescription(state, collaborators.length, readOnly)}
+          </p>
+        </div>
+        <CollaboratorsList collaborators={collaborators} />
+      </div>
+
+      <TiptapEditor
+        initialContent={initialContent}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        readOnly={readOnly}
+        className={cn("h-full min-h-[16rem]", className)}
+        onUpdate={(editor) => {
+          onChange?.(normalizeMarkdown(htmlToMarkdown(editor.getHTML())));
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * DocumentEditorPane — reusable markdown document surface with preview/edit
+ * modes and optional collaborative editing backed by Yjs/Hocuspocus.
+ */
+export function DocumentEditorPane({
+  eyebrow,
+  title,
+  subtitle,
+  meta,
+  headerActions,
+  footer,
+  className,
+  contentClassName,
+  tabs,
+  toolbar,
+  markdown = "",
+  mode,
+  defaultMode = "preview",
+  onModeChange,
+  backend = "local",
+  placeholder = "Start writing...",
+  autoFocus = false,
+  readOnly = false,
+  onChange,
+  onSave,
+  saving = false,
+  saveLabel = "Save changes",
+  previewClassName,
+  editorClassName,
+  collaboration,
+}: DocumentEditorPaneProps) {
+  const [draft, setDraft] = useState(markdown);
+  const [uncontrolledMode, setUncontrolledMode] =
+    useState<DocumentEditorMode>(defaultMode);
+  const activeMode = mode ?? uncontrolledMode;
+  const isCollaborative = backend === "collaborative" && Boolean(collaboration);
+  const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(markdown);
+  const saveStateLabel = readOnly
+    ? "Read only"
+    : isCollaborative
+      ? isDirty
+        ? "Snapshot pending"
+        : "Live document current"
+      : isDirty
+        ? "Unsaved changes"
+        : "Saved";
+
+  useEffect(() => {
+    setDraft(markdown);
+  }, [markdown]);
+
+  useEffect(() => {
+    if (mode === undefined) {
+      setUncontrolledMode(defaultMode);
+    }
+  }, [defaultMode, mode]);
+
+  const setMode = (nextMode: DocumentEditorMode) => {
+    if (mode === undefined) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+
+  const handleChange = (nextMarkdown: string) => {
+    setDraft(nextMarkdown);
+    onChange?.(nextMarkdown);
+  };
+
+  const editorToolbar = (
+    <div className="flex flex-wrap items-center justify-between gap-3">
+      <TabsList
+        variant="underline"
+        className="h-auto gap-4 border-0 bg-transparent p-0 text-muted-foreground"
+      >
+        <TabsTrigger
+          value="preview"
+          variant="underline"
+          className="pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground"
+        >
+          Preview
+        </TabsTrigger>
+        <TabsTrigger
+          value="edit"
+          variant="underline"
+          className="flex items-center gap-2 pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground"
+        >
+          <PencilLine className="h-3.5 w-3.5" />
+          {isCollaborative ? "Live edit" : "Edit"}
+        </TabsTrigger>
+      </TabsList>
+
+      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+        {toolbar}
+        <span className="rounded-full border border-border bg-card px-2.5 py-1 font-medium">
+          {isCollaborative ? "Live document" : "Local draft"}
+        </span>
+        <span className="rounded-full border border-border bg-background px-2.5 py-1">
+          {saveStateLabel}
+        </span>
+        {onSave && !readOnly && (
+          <button
+            type="button"
+            onClick={() => void onSave(draft)}
+            disabled={saving || !isDirty}
+            className="inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-primary/40 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Save className="h-3.5 w-3.5" />
+            {saving ? "Saving..." : saveLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+
+  const preview = (
+    <div
+      className={cn(
+        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
+        previewClassName,
+      )}
+    >
+      <Markdown className="prose-sm max-w-none">{draft}</Markdown>
+    </div>
+  );
+
+  const localEditor = (
+    <MarkdownDocumentEditor
+      value={draft}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      readOnly={readOnly}
+      onChange={(nextMarkdown) => {
+        handleChange(nextMarkdown);
+      }}
+      className={editorClassName}
+    />
+  );
+
+  const collaborativeEditor = collaboration ? (
+    <EditorProvider key={collaboration.documentName} {...collaboration}>
+      <CollaborativeDocumentSurface
+        markdown={draft}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        readOnly={readOnly}
+        className={editorClassName}
+        onChange={handleChange}
+      />
+    </EditorProvider>
+  ) : localEditor;
+
+  return (
+    <Tabs
+      value={activeMode}
+      onValueChange={(nextValue) => setMode(nextValue as DocumentEditorMode)}
+      className="h-full"
+    >
+      <ArtifactPane
+        eyebrow={eyebrow}
+        title={title}
+        subtitle={subtitle}
+        meta={meta}
+        headerActions={headerActions}
+        footer={footer}
+        tabs={tabs}
+        className={className}
+        contentClassName={contentClassName}
+        toolbar={editorToolbar}
+      >
+        <TabsContent value="preview" className="mt-0 h-full px-4 py-4">
+          {preview}
+        </TabsContent>
+        <TabsContent value="edit" className="mt-0 h-full px-4 py-4">
+          {isCollaborative ? collaborativeEditor : localEditor}
+        </TabsContent>
+      </ArtifactPane>
+    </Tabs>
+  );
+}