@data-club/ai-hub 0.0.1

package/src/components/Layout/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * `<Layout />` — the flex container holding the sessions panel beside the
+ * main column.
+ *
+ * The default monolith puts the sessions panel on the left at 25% width;
+ * Tier 3 wrappers use this primitive directly to flip the position
+ * (`panelPosition="right"`) or to drop the panel entirely.
+ *
+ * Exported under `AIHub.Layout`.
+ *
+ * @see SPECIFICATIONS.md §7.1 — exports
+ * @see SPECIFICATIONS.md §7.9 — Tier-3 composition
+ * @see ui-sketches/03-chat.md — sessions_panel + main_column
+ */
+
+import { type CSSProperties, type ReactNode } from "react";
+
+/**
+ * BEM class names emitted by `<Layout />`. The class names react to the
+ * `panelPosition` prop via a single modifier on the root.
+ */
+export interface LayoutClassNames {
+  /** Outer flex container. */
+  root: string;
+  /** Modifier appended when `panelPosition === "left"` (default). */
+  rootPanelLeft: string;
+  /** Modifier appended when `panelPosition === "right"`. */
+  rootPanelRight: string;
+}
+
+const DEFAULT_CLASS_NAMES: LayoutClassNames = Object.freeze({
+  root: "data-club-ai-hub__layout",
+  rootPanelLeft: "data-club-ai-hub__layout--panel-left",
+  rootPanelRight: "data-club-ai-hub__layout--panel-right",
+}) as LayoutClassNames;
+
+/**
+ * Props for `<Layout />`.
+ */
+export interface LayoutProps {
+  /**
+   * Which side the sessions panel sits on. Defaults to `"left"`.
+   * `<DataClubAIHub />` forwards its `sessionsPanelPosition` prop here.
+   */
+  panelPosition?: "left" | "right";
+  /**
+   * Sessions panel width in percent. Defaults to `25`. Layout only uses
+   * this for the CSS custom property `--dc-aih-sessions-panel-width`;
+   * the panel itself reads it.
+   */
+  panelWidthPercent?: number;
+  /** Extra className merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<LayoutClassNames>;
+  /**
+   * Children — typically `<SessionsPanel />` and `<MainColumn />` in
+   * either order; this primitive trusts the caller to put them in DOM
+   * order. The `panelPosition` modifier flips the visual order via
+   * `flex-direction: row-reverse` in CSS, so the sessions panel is
+   * always rendered first in the DOM regardless.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Renders the layout container.
+ *
+ * @param props - see `LayoutProps`.
+ * @returns the rendered layout.
+ */
+export function Layout(props: LayoutProps): ReactNode {
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const position = props.panelPosition ?? "left";
+  const widthPercent = props.panelWidthPercent ?? 25;
+  const rootClasses = [
+    cls.root,
+    position === "right" ? cls.rootPanelRight : cls.rootPanelLeft,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const style: CSSProperties = {
+    // Custom property consumed by the sessions panel.
+    ["--dc-aih-sessions-panel-width" as keyof CSSProperties]: `${widthPercent}%`,
+  } as CSSProperties;
+  return (
+    <div className={rootClasses} data-testid="layout" style={style}>
+      {props.children}
+    </div>
+  );
+}

package/src/components/MainColumn/index.tsx

@@ -0,0 +1,131 @@
+/**
+ * `<MainColumn />` — the right side of the chat layout: chat header on
+ * top, scrollable message list in the middle, input area on the bottom.
+ *
+ * Step 10 mounts `<TurnStatusIndicator />` in the chat header to the right
+ * of the agent display name (gated by `showTurnStatus`, which the
+ * upstream §8.4 resolver passes in as a boolean prop). The
+ * `customHeaderContent` slot remains the wrapper-owned right-side slot
+ * (rendered after the turn-status indicator).
+ *
+ * Exported under `AIHub.MainColumn`.
+ *
+ * @see SPECIFICATIONS.md §7.1 — exports
+ * @see ui-sketches/03-chat.md — main_column + chat_header
+ */
+
+import { useMemo, type ReactNode } from "react";
+
+import {
+  resolveAIHubTexts,
+  type AIHubTexts,
+  type DeepPartial,
+} from "../../auth/texts.js";
+import { useAIHub } from "../../context/useAIHub.js";
+
+import { TurnStatusIndicator } from "../TurnStatusIndicator/index.js";
+
+/**
+ * BEM class names emitted by `<MainColumn />`.
+ */
+export interface MainColumnClassNames {
+  /** Outer column. */
+  root: string;
+  /** Chat header strip at the top. */
+  header: string;
+  /** Back-to-agents-picker link. */
+  back: string;
+  /** Agent display-name text. */
+  title: string;
+  /** Wrapper for slot content on the right side of the header. */
+  extras: string;
+  /** Children container (messages + input live here). */
+  body: string;
+}
+
+const DEFAULT_CLASS_NAMES: MainColumnClassNames = Object.freeze({
+  root: "data-club-ai-hub__main-column",
+  header: "data-club-ai-hub__chat-header",
+  back: "data-club-ai-hub__chat-header__back",
+  title: "data-club-ai-hub__chat-header__title",
+  extras: "data-club-ai-hub__chat-header__extras",
+  body: "data-club-ai-hub__main-column__body",
+}) as MainColumnClassNames;
+
+/**
+ * Props for `<MainColumn />`.
+ */
+export interface MainColumnProps {
+  /**
+   * Whether the back link to the agents picker is shown. Controlled by
+   * `<DataClubAIHub />`'s `showAgentsPicker` prop (the monolith hides
+   * the link in single-agent embeds). Defaults to true.
+   */
+  showBackToAgents?: boolean;
+  /**
+   * Whether to mount the turn-status indicator in the chat header.
+   * Receives the resolved §8.4 flag stack (server toggle > prop >
+   * default). Defaults to true.
+   */
+  showTurnStatus?: boolean;
+  /** Slot rendered on the right side of the chat header. */
+  customHeaderContent?: ReactNode;
+  /** The children — `<MessageList />` + `<MessageInput />` (or whatever). */
+  children: ReactNode;
+  /** Extra class merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<MainColumnClassNames>;
+  /** Wrapper-supplied i18n. */
+  texts?: DeepPartial<AIHubTexts>;
+}
+
+/**
+ * Renders the main column.
+ *
+ * @param props - see `MainColumnProps`.
+ * @returns the rendered column.
+ */
+export function MainColumn(props: MainColumnProps): ReactNode {
+  const { agents, activeAgentId, setActiveAgent } = useAIHub();
+  const texts = resolveAIHubTexts(props.texts);
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const showBack = props.showBackToAgents ?? true;
+  const showTurnStatus = props.showTurnStatus ?? true;
+
+  const activeAgent = useMemo(
+    () => agents.find((a) => a.id === activeAgentId) ?? null,
+    [agents, activeAgentId],
+  );
+
+  const rootClass = props.className
+    ? `${cls.root} ${props.className}`
+    : cls.root;
+
+  return (
+    <section className={rootClass} data-testid="main-column">
+      <header className={cls.header} data-testid="chat-header">
+        {showBack ? (
+          <button
+            type="button"
+            className={cls.back}
+            onClick={() => setActiveAgent(null)}
+            data-testid="chat-header-back"
+          >
+            {texts.chat.backToAgentsLink}
+          </button>
+        ) : null}
+        <h2 className={cls.title} data-testid="chat-header-title">
+          {activeAgent?.display_name ?? ""}
+        </h2>
+        {showTurnStatus ? <TurnStatusIndicator /> : null}
+        {props.customHeaderContent ? (
+          <div className={cls.extras} data-testid="chat-header-extras">
+            {props.customHeaderContent}
+          </div>
+        ) : null}
+      </header>
+      <div className={cls.body}>{props.children}</div>
+    </section>
+  );
+}

package/src/components/MarkdownRenderer/index.tsx

@@ -0,0 +1,256 @@
+/**
+ * `<MarkdownRenderer />` — renders the textual body of an assistant
+ * message as GitHub-flavored Markdown with LaTeX-style math.
+ *
+ * The plumbing is the de-facto standard for AI chat output:
+ *
+ * - `react-markdown` parses the source into a hast (HTML AST) tree.
+ * - `remark-gfm` adds GitHub-flavored extensions on the mdast (markdown
+ *   AST) side: pipe tables, task lists, strikethrough, autolinked URLs.
+ * - `remark-math` recognises `$inline$` and `$$block$$` LaTeX-style
+ *   math, leaving it as an inline / block math node in mdast.
+ * - `rehype-katex` walks the hast tree and replaces those math nodes
+ *   with rendered KaTeX HTML; consumers MUST also import
+ *   `katex/dist/katex.min.css` (the chat shell's stylesheet bundles
+ *   it — see `src/styles/default.css`) for the equations to look right.
+ *
+ * Every node we override emits a BEM-style class under
+ * `data-club-ai-hub__markdown__*`. The default stylesheet themes those
+ * via `--dc-aih-*` custom properties so per-customer wrappers keep
+ * working without touching this component.
+ *
+ * @see SPECIFICATIONS.md §7.3 — message bubble variants
+ * @see docs/react/markdown-rendering.md
+ */
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import type { Components } from "react-markdown";
+import type { ReactNode } from "react";
+
+/**
+ * BEM class names emitted by `<MarkdownRenderer />`.
+ *
+ * Every element a markdown document can produce gets a stable class so
+ * per-customer wrappers can override individual pieces (e.g. brand the
+ * table border without touching the surrounding bubble).
+ */
+export interface MarkdownRendererClassNames {
+  /** Wrapper around the rendered markdown tree. */
+  root: string;
+  /** `<p>` paragraph. */
+  paragraph: string;
+  /** `<h1>` — `<h6>` headings. */
+  heading: string;
+  /** `<ul>` unordered list. */
+  ul: string;
+  /** `<ol>` ordered list. */
+  ol: string;
+  /** `<li>` list item. */
+  li: string;
+  /** `<a>` link. */
+  link: string;
+  /** `<blockquote>`. */
+  blockquote: string;
+  /** `<hr>` horizontal rule. */
+  hr: string;
+  /** Inline `<code>` (within a paragraph). */
+  inlineCode: string;
+  /** Fenced code block — the `<pre>` wrapper. */
+  codeBlock: string;
+  /** Wrapping `<div>` around `<table>` (horizontal-scroll container). */
+  tableWrapper: string;
+  /** The `<table>` itself. */
+  table: string;
+  /** `<thead>`. */
+  thead: string;
+  /** `<tbody>`. */
+  tbody: string;
+  /** `<tr>`. */
+  tr: string;
+  /** `<th>` header cell. */
+  th: string;
+  /** `<td>` body cell. */
+  td: string;
+}
+
+const DEFAULT_CLASS_NAMES: MarkdownRendererClassNames = Object.freeze({
+  root: "data-club-ai-hub__markdown",
+  paragraph: "data-club-ai-hub__markdown__p",
+  heading: "data-club-ai-hub__markdown__heading",
+  ul: "data-club-ai-hub__markdown__ul",
+  ol: "data-club-ai-hub__markdown__ol",
+  li: "data-club-ai-hub__markdown__li",
+  link: "data-club-ai-hub__markdown__a",
+  blockquote: "data-club-ai-hub__markdown__blockquote",
+  hr: "data-club-ai-hub__markdown__hr",
+  inlineCode: "data-club-ai-hub__markdown__code--inline",
+  codeBlock: "data-club-ai-hub__markdown__pre",
+  tableWrapper: "data-club-ai-hub__markdown__table-wrapper",
+  table: "data-club-ai-hub__markdown__table",
+  thead: "data-club-ai-hub__markdown__thead",
+  tbody: "data-club-ai-hub__markdown__tbody",
+  tr: "data-club-ai-hub__markdown__tr",
+  th: "data-club-ai-hub__markdown__th",
+  td: "data-club-ai-hub__markdown__td",
+}) as MarkdownRendererClassNames;
+
+/**
+ * Props for `<MarkdownRenderer />`.
+ */
+export interface MarkdownRendererProps {
+  /** Raw markdown source. Empty / whitespace-only input renders nothing. */
+  content: string;
+  /** Extra class merged onto the root. */
+  className?: string;
+  /** Per-element class overrides. */
+  classNames?: Partial<MarkdownRendererClassNames>;
+}
+
+/**
+ * Build the `react-markdown` component overrides table. Pulled out of
+ * the render body so the closure captures only `cls` (cheap to recreate)
+ * and the JSX inside is uncluttered.
+ */
+function buildComponents(cls: MarkdownRendererClassNames): Components {
+  return {
+    p({ children }) {
+      return <p className={cls.paragraph}>{children}</p>;
+    },
+    h1({ children }) {
+      return (
+        <h1 className={`${cls.heading} ${cls.heading}--1`}>{children}</h1>
+      );
+    },
+    h2({ children }) {
+      return (
+        <h2 className={`${cls.heading} ${cls.heading}--2`}>{children}</h2>
+      );
+    },
+    h3({ children }) {
+      return (
+        <h3 className={`${cls.heading} ${cls.heading}--3`}>{children}</h3>
+      );
+    },
+    h4({ children }) {
+      return (
+        <h4 className={`${cls.heading} ${cls.heading}--4`}>{children}</h4>
+      );
+    },
+    h5({ children }) {
+      return (
+        <h5 className={`${cls.heading} ${cls.heading}--5`}>{children}</h5>
+      );
+    },
+    h6({ children }) {
+      return (
+        <h6 className={`${cls.heading} ${cls.heading}--6`}>{children}</h6>
+      );
+    },
+    ul({ children }) {
+      return <ul className={cls.ul}>{children}</ul>;
+    },
+    ol({ children }) {
+      return <ol className={cls.ol}>{children}</ol>;
+    },
+    li({ children }) {
+      return <li className={cls.li}>{children}</li>;
+    },
+    a({ href, children }) {
+      return (
+        <a
+          className={cls.link}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {children}
+        </a>
+      );
+    },
+    blockquote({ children }) {
+      return <blockquote className={cls.blockquote}>{children}</blockquote>;
+    },
+    hr() {
+      return <hr className={cls.hr} />;
+    },
+    code({ className, children, ...rest }) {
+      // `react-markdown` calls this renderer for BOTH inline (`` `foo` ``)
+      // and fenced (```` ```lang … ``` ````) code. The fenced form gets a
+      // `language-<lang>` class from remark; inline code has no className.
+      const langMatch = /language-(\w+)/.exec(className ?? "");
+      const isFenced = langMatch !== null;
+      if (!isFenced) {
+        return (
+          <code className={cls.inlineCode} {...rest}>
+            {children}
+          </code>
+        );
+      }
+      // Fenced: keep `react-markdown`'s default `<pre><code class="language-…">`
+      // structure so future syntax-highlighter integrations (or wrapper
+      // overrides via `renderMessageBubble`) can target the language class.
+      return (
+        <code className={className} {...rest}>
+          {children}
+        </code>
+      );
+    },
+    pre({ children }) {
+      return <pre className={cls.codeBlock}>{children}</pre>;
+    },
+    // GFM tables. We wrap the table in a horizontally-scrollable div so
+    // wide tables (which Letta loves to produce when summarising data)
+    // don't push the chat bubble past its `max-width: 80%`.
+    table({ children }) {
+      return (
+        <div className={cls.tableWrapper}>
+          <table className={cls.table}>{children}</table>
+        </div>
+      );
+    },
+    thead({ children }) {
+      return <thead className={cls.thead}>{children}</thead>;
+    },
+    tbody({ children }) {
+      return <tbody className={cls.tbody}>{children}</tbody>;
+    },
+    tr({ children }) {
+      return <tr className={cls.tr}>{children}</tr>;
+    },
+    th({ children }) {
+      return <th className={cls.th}>{children}</th>;
+    },
+    td({ children }) {
+      return <td className={cls.td}>{children}</td>;
+    },
+  };
+}
+
+/**
+ * Render markdown source as the body of an assistant message.
+ *
+ * @param props - see `MarkdownRendererProps`.
+ * @returns the rendered markdown tree, or `null` if `content` is
+ *   whitespace-only.
+ */
+export function MarkdownRenderer(props: MarkdownRendererProps): ReactNode {
+  const trimmed = props.content.trim();
+  if (trimmed === "") return null;
+  const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+  const rootClass = props.className
+    ? `${cls.root} ${props.className}`
+    : cls.root;
+  return (
+    <div className={rootClass} data-testid="markdown">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex]}
+        components={buildComponents(cls)}
+      >
+        {trimmed}
+      </ReactMarkdown>
+    </div>
+  );
+}