@vvedantb/ui 0.17.0 → 0.18.0

package/src/kibo/video-player.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import {
+  MediaControlBar,
+  MediaController,
+  MediaFullscreenButton,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaPlaybackRateButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange,
+} from "media-chrome/react";
+import type { ComponentProps } from "react";
+import { useCn, useUiConfig } from "../ui/ui-config";
+
+export interface VideoPlayerConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    /** `VideoPlayer` (the media controller): clipping, radius and shadow. */
+    root?: string;
+    /** `VideoPlayerControlBar`: backdrop, padding and control transitions. */
+    controlBar?: string;
+  };
+}
+
+const defaultClasses = {
+  root: "overflow-hidden rounded-surface shadow-lg shadow-black/20",
+  controlBar: "bg-zinc-950/95 px-1 *:transition-colors *:duration-150",
+};
+
+// The control bar carries the dark backdrop (set via Tailwind on the bar),
+// so individual controls stay transparent and hover applies a subtle light
+// overlay on top — that reads as a "dimmer highlight" rather than going
+// transparent against the chat bubble behind.
+// Tooltip background is set explicitly because the default falls through
+// to --media-secondary-color, which is transparent here.
+const variables: Record<string, string> = {
+  "--media-primary-color": "rgb(255 255 255 / 0.96)",
+  "--media-secondary-color": "transparent",
+  "--media-text-color": "rgb(255 255 255 / 0.92)",
+  "--media-background-color": "rgb(9 9 11 / 1)",
+  "--media-control-background": "transparent",
+  "--media-control-hover-background": "rgb(255 255 255 / 0.14)",
+  "--media-font-family": "var(--font-sans)",
+  "--media-live-button-icon-color": "rgb(255 255 255 / 0.78)",
+  "--media-live-button-indicator-color": "rgb(244 63 94)",
+  "--media-range-track-background": "rgb(255 255 255 / 0.22)",
+  "--media-range-thumb-background": "rgb(255 255 255 / 0.95)",
+  "--media-tooltip-background-color": "rgb(24 24 27 / 0.98)",
+  "--media-tooltip-arrow-color": "rgb(24 24 27 / 0.98)",
+  "--media-tooltip-filter":
+    "drop-shadow(0 6px 16px rgb(0 0 0 / 0.55)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.4))",
+  "--media-tooltip-distance": "10px",
+  "--media-tooltip-border-radius": "6px",
+};
+
+export type VideoPlayerProps = ComponentProps<typeof MediaController>;
+
+export const VideoPlayer = ({
+  style,
+  className,
+  ...props
+}: VideoPlayerProps) => {
+  const classes = { ...defaultClasses, ...useUiConfig("VideoPlayer")?.classes };
+  const merge = useCn();
+  return (
+    <MediaController
+      className={merge(classes.root, className)}
+      style={{
+        ...variables,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
+
+export const VideoPlayerControlBar = ({
+  className,
+  ...props
+}: VideoPlayerControlBarProps) => {
+  const classes = { ...defaultClasses, ...useUiConfig("VideoPlayer")?.classes };
+  const merge = useCn();
+  return <MediaControlBar className={merge(classes.controlBar, className)} {...props} />;
+};
+
+export type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
+
+export const VideoPlayerTimeRange = ({
+  className,
+  ...props
+}: VideoPlayerTimeRangeProps) => {
+  const merge = useCn();
+  return (
+    <MediaTimeRange className={merge("p-2.5 min-w-12", className)} {...props} />
+  );
+};
+
+export type VideoPlayerTimeDisplayProps = ComponentProps<
+  typeof MediaTimeDisplay
+>;
+
+export const VideoPlayerTimeDisplay = ({
+  className,
+  ...props
+}: VideoPlayerTimeDisplayProps) => {
+  const merge = useCn();
+  return (
+    <MediaTimeDisplay
+      className={merge("p-2.5 text-xs tabular-nums tracking-tight", className)}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerVolumeRangeProps = ComponentProps<
+  typeof MediaVolumeRange
+>;
+
+export const VideoPlayerVolumeRange = ({
+  className,
+  ...props
+}: VideoPlayerVolumeRangeProps) => {
+  const merge = useCn();
+  return (
+    <MediaVolumeRange className={merge("p-2 rounded-md", className)} {...props} />
+  );
+};
+
+export type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
+
+export const VideoPlayerPlayButton = ({
+  className,
+  ...props
+}: VideoPlayerPlayButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaPlayButton className={merge("p-2 rounded-md", className)} {...props} />
+  );
+};
+
+export type VideoPlayerSeekBackwardButtonProps = ComponentProps<
+  typeof MediaSeekBackwardButton
+>;
+
+export const VideoPlayerSeekBackwardButton = ({
+  className,
+  ...props
+}: VideoPlayerSeekBackwardButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaSeekBackwardButton
+      className={merge("p-2 rounded-md", className)}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerSeekForwardButtonProps = ComponentProps<
+  typeof MediaSeekForwardButton
+>;
+
+export const VideoPlayerSeekForwardButton = ({
+  className,
+  ...props
+}: VideoPlayerSeekForwardButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaSeekForwardButton
+      className={merge("p-2 rounded-md", className)}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
+
+export const VideoPlayerMuteButton = ({
+  className,
+  ...props
+}: VideoPlayerMuteButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaMuteButton className={merge("p-2 rounded-md", className)} {...props} />
+  );
+};
+
+export type VideoPlayerPlaybackRateButtonProps = ComponentProps<
+  typeof MediaPlaybackRateButton
+>;
+
+export const VideoPlayerPlaybackRateButton = ({
+  className,
+  ...props
+}: VideoPlayerPlaybackRateButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaPlaybackRateButton
+      className={merge("p-2 rounded-md", className)}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerFullscreenButtonProps = ComponentProps<
+  typeof MediaFullscreenButton
+>;
+
+export const VideoPlayerFullscreenButton = ({
+  className,
+  ...props
+}: VideoPlayerFullscreenButtonProps) => {
+  const merge = useCn();
+  return (
+    <MediaFullscreenButton
+      className={merge("p-2 rounded-md", className)}
+      {...props}
+    />
+  );
+};
+
+export type VideoPlayerContentProps = ComponentProps<"video">;
+
+export const VideoPlayerContent = ({
+  className,
+  ...props
+}: VideoPlayerContentProps) => {
+  const merge = useCn();
+  return (
+    <video className={merge("mt-0 mb-0", className)} {...props} />
+  );
+};

package/src/markdown/Markdown.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { memo } from "react";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import type { Components } from "streamdown";
+import {
+  Streamdown,
+  defaultRehypePlugins,
+  defaultRemarkPlugins,
+} from "streamdown";
+
+import { useCn } from "../ui/ui-config";
+import { parseMarkdownIntoBlocksIncremental } from "./incrementalBlocks";
+import { MarkdownBlockquote } from "./MarkdownBlockquote";
+import { MarkdownPre } from "./MarkdownCodeBlock";
+import { MarkdownInlineCode } from "./MarkdownInlineCode";
+import { MarkdownLink } from "./MarkdownLink";
+import { mermaidPlugin } from "./mermaid";
+import { copyMarkdownSelection } from "./markdownClipboard";
+import { rehypeGithubAlerts } from "./rehypeGithubAlerts";
+// The math plugin renders KaTeX markup but ships no stylesheet with it.
+import "katex/dist/katex.min.css";
+
+const PLUGINS = { cjk, code, math, mermaid: mermaidPlugin };
+
+/**
+ * `remarkPlugins` / `rehypePlugins` REPLACE Streamdown's defaults rather than
+ * extending them, so the defaults (GFM + fence meta; raw HTML, sanitise,
+ * harden) are spread back in first. Alerts run after the sanitiser, which
+ * would otherwise strip the attribute they set.
+ */
+const REMARK_PLUGINS = Object.values(defaultRemarkPlugins);
+const REHYPE_PLUGINS = [...Object.values(defaultRehypePlugins), rehypeGithubAlerts];
+
+/**
+ * Plain tags where Streamdown's defaults bake in Tailwind classes (text-3xl
+ * headings, `list-inside` lists, a `span` for bold, padded table cells): the
+ * `.markdown` stylesheet owns typography, so these render unstyled. `table`
+ * itself stays Streamdown's, for its copy / download / fullscreen controls.
+ */
+const MARKDOWN_COMPONENTS: Components = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  ul: "ul",
+  ol: "ol",
+  li: "li",
+  hr: "hr",
+  strong: "strong",
+  thead: "thead",
+  tbody: "tbody",
+  tr: "tr",
+  th: "th",
+  td: "td",
+  a: MarkdownLink,
+  blockquote: MarkdownBlockquote,
+  pre: MarkdownPre,
+  inlineCode: MarkdownInlineCode,
+};
+
+export type MarkdownProps = Omit<
+  ComponentProps<typeof Streamdown>,
+  "plugins" | "rehypePlugins" | "parseMarkdownIntoBlocksFn"
+> & {
+  children: string;
+};
+
+/**
+ * A markdown renderer for chat replies, reasoning, comments, PR bodies and
+ * changelogs. Streamdown streams it block by block; this layer adds the code
+ * blocks, callouts, links, typography and copy-as-markdown every surface
+ * shares. Typography lives in `@vvedantb/ui/tokens/css/markdown.css`.
+ * `components` and `remarkPlugins` extend the defaults, never replace them
+ * (mention chips, line breaks).
+ */
+export const Markdown = memo(function Markdown({
+  className,
+  components,
+  remarkPlugins,
+  children,
+  ...props
+}: MarkdownProps) {
+  const merge = useCn();
+  return (
+    <div className="contents" onCopy={copyMarkdownSelection}>
+      <Streamdown
+        className={merge("markdown", className)}
+        plugins={PLUGINS}
+        components={
+          components ? { ...MARKDOWN_COMPONENTS, ...components } : MARKDOWN_COMPONENTS
+        }
+        remarkPlugins={
+          remarkPlugins ? [...REMARK_PLUGINS, ...remarkPlugins] : REMARK_PLUGINS
+        }
+        rehypePlugins={REHYPE_PLUGINS}
+        // Streamdown re-renders only the block still being written, but its
+        // default split re-lexes the whole reply behind every token. This one
+        // reuses the blocks a byte-identical prefix already produced.
+        parseMarkdownIntoBlocksFn={parseMarkdownIntoBlocksIncremental}
+        {...props}
+      >
+        {children}
+      </Streamdown>
+    </div>
+  );
+});

package/src/markdown/MarkdownBlockquote.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react";
+import {
+  IconAlertOctagon,
+  IconAlertTriangle,
+  IconBulb,
+  IconInfoCircle,
+  IconMessageReport,
+} from "@tabler/icons-react";
+import type { ExtraProps } from "streamdown";
+
+import type { AlertKind } from "./rehypeGithubAlerts";
+import { isAlertKind } from "./rehypeGithubAlerts";
+
+const ALERTS: Record<AlertKind, { label: string; Icon: typeof IconInfoCircle }> = {
+  note: { label: "Note", Icon: IconInfoCircle },
+  tip: { label: "Tip", Icon: IconBulb },
+  important: { label: "Important", Icon: IconMessageReport },
+  warning: { label: "Warning", Icon: IconAlertTriangle },
+  caution: { label: "Caution", Icon: IconAlertOctagon },
+};
+
+/**
+ * `blockquote` renderer. Alerts tagged by `rehypeGithubAlerts` become a tinted
+ * callout with an icon and title; a plain quote stays a quote. The callout is
+ * a `div role="note"`, not a `blockquote`, so quote styling never mutes it.
+ */
+export function MarkdownBlockquote({
+  children,
+  node,
+}: ComponentProps<"blockquote"> & ExtraProps) {
+  const kind = node?.properties.dataAlert;
+  if (typeof kind !== "string" || !isAlertKind(kind)) {
+    return <blockquote>{children}</blockquote>;
+  }
+  const { label, Icon } = ALERTS[kind];
+  return (
+    <div role="note" className="markdown-alert" data-alert={kind}>
+      <p className="markdown-alert-title" data-markdown-copy={`[!${kind.toUpperCase()}]`}>
+        <Icon aria-hidden />
+        {label}
+      </p>
+      {children}
+    </div>
+  );
+}

package/src/markdown/MarkdownCodeBlock.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import type { ComponentProps, ReactNode, Ref } from "react";
+import { Fragment, cloneElement, isValidElement, useState } from "react";
+import {
+  IconCheck,
+  IconCopy,
+  IconFileCode,
+  IconTextWrap,
+} from "@tabler/icons-react";
+import type { ExtraProps } from "streamdown";
+import { useIsCodeFenceIncomplete } from "streamdown";
+
+import { MessageAction } from "../ai-elements/message";
+import type { FencedCode } from "./codeFence";
+import { readFencedCode } from "./codeFence";
+import type { CodeLine, HighlightToken } from "./codeHighlight";
+import { useHighlightedLines } from "./codeHighlight";
+import { useMermaidRender } from "./mermaid";
+const COPIED_MS = 1200;
+
+/**
+ * Token colours travel as custom properties so one render serves both
+ * themes: `--md-c` is the light colour, `--shiki-dark` the dark one, and the
+ * stylesheet picks between them.
+ */
+function tokenStyle(token: HighlightToken): Record<string, string> {
+  const style: Record<string, string> = {};
+  if (token.color) style["--md-c"] = token.color;
+  for (const [name, value] of Object.entries(token.htmlStyle ?? {})) {
+    style[name === "color" ? "--md-c" : name] = value;
+  }
+  return style;
+}
+
+function CodeLineView({ line, newline }: { line: CodeLine; newline: boolean }) {
+  return (
+    <span className="markdown-code-line">
+      {line.tokens === null
+        ? line.text
+        : line.tokens.map((token, index) => (
+            <span key={index} style={tokenStyle(token)}>
+              {token.content}
+            </span>
+          ))}
+      {newline ? "\n" : null}
+    </span>
+  );
+}
+
+function MarkdownCodeBlock({
+  code,
+  language,
+  title,
+  ref,
+}: {
+  code: string;
+  language: string;
+  title: string | null;
+  ref?: Ref<HTMLDivElement>;
+}) {
+  const isIncomplete = useIsCodeFenceIncomplete();
+  const lines = useHighlightedLines(code, language, isIncomplete);
+  const [wrap, setWrap] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), COPIED_MS);
+    });
+  };
+
+  return (
+    <div
+      ref={ref}
+      className="markdown-code"
+      data-language={language || undefined}
+      data-wrap={wrap || undefined}
+    >
+      <div className="markdown-code-header" data-markdown-copy="skip">
+        <span className="markdown-code-label">
+          {title ? (
+            <>
+              <IconFileCode aria-hidden />
+              <span className="truncate">{title}</span>
+            </>
+          ) : (
+            (language || "text").toLowerCase()
+          )}
+        </span>
+        <span className="markdown-code-actions">
+          <MessageAction
+            tooltip={wrap ? "Scroll long lines" : "Wrap long lines"}
+            size="icon-xs"
+            aria-pressed={wrap}
+            className={wrap ? "text-foreground" : "text-muted-foreground"}
+            onClick={() => setWrap(!wrap)}
+          >
+            <IconTextWrap />
+          </MessageAction>
+          <MessageAction
+            tooltip={copied ? "Copied" : "Copy code"}
+            size="icon-xs"
+            className="text-muted-foreground"
+            onClick={copy}
+          >
+            {copied ? <IconCheck /> : <IconCopy />}
+          </MessageAction>
+        </span>
+      </div>
+      <pre>
+        <code>
+          {lines.map((line, index) => (
+            <CodeLineView
+              key={index}
+              line={line}
+              newline={index < lines.length - 1}
+            />
+          ))}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+/** Start a diagram render this far before it scrolls into view. */
+const MERMAID_PRELOAD_MARGIN = "400px";
+
+/**
+ * A mermaid fence: the plain code block until the diagram has rendered, then
+ * Streamdown's diagram view (pan, zoom, fullscreen, download). A fence still
+ * streaming, or one that will not parse, stays code — no error box. Nothing
+ * renders (or loads mermaid) until the block nears the viewport, so a long
+ * chat does not render every diagram in its history on open.
+ */
+function MarkdownMermaid({
+  fenced,
+  diagram,
+}: {
+  fenced: FencedCode;
+  diagram: ReactNode;
+}) {
+  const isIncomplete = useIsCodeFenceIncomplete();
+  const [isNearView, setIsNearView] = useState(false);
+  const { theme, status } = useMermaidRender(
+    fenced.code,
+    !isIncomplete && isNearView,
+  );
+  const observeView = (element: HTMLDivElement | null) => {
+    if (element === null || isNearView) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) setIsNearView(true);
+      },
+      { rootMargin: MERMAID_PRELOAD_MARGIN },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  };
+  if (status === "done") {
+    // Streamdown renders once per mount, so a theme change remounts it.
+    return <Fragment key={theme}>{diagram}</Fragment>;
+  }
+  return (
+    <MarkdownCodeBlock
+      ref={observeView}
+      code={fenced.code}
+      language={fenced.language}
+      title={fenced.title}
+    />
+  );
+}
+
+/**
+ * `pre` renderer: fenced code becomes our code block (header with file name or
+ * language, wrap toggle, copy). Mermaid fences become diagrams once they
+ * render, through Streamdown's own `code` renderer, which is what its default
+ * `pre` does too.
+ */
+export function MarkdownPre({ children, node }: ComponentProps<"pre"> & ExtraProps) {
+  const fenced = node ? readFencedCode(node) : null;
+  const passthrough = isValidElement<{ "data-block"?: string }>(children)
+    ? cloneElement(children, { "data-block": "true" })
+    : <pre>{children}</pre>;
+  if (fenced === null) return passthrough;
+  if (fenced.language.toLowerCase() === "mermaid") {
+    return <MarkdownMermaid fenced={fenced} diagram={passthrough} />;
+  }
+  return (
+    <MarkdownCodeBlock
+      code={fenced.code}
+      language={fenced.language}
+      title={fenced.title}
+    />
+  );
+}

package/src/markdown/MarkdownInlineCode.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps } from "react";
+import { Children } from "react";
+import { IconFile } from "@tabler/icons-react";
+import type { ExtraProps } from "streamdown";
+
+/**
+ * Inline code that names a file, optionally with a `:line[:col]` suffix. A
+ * path with a directory (`src/a.ts`, `./x/y.md`, `~/z.json`) may end in any
+ * extension; a bare name must end in a common source extension, because
+ * `console.log` and `ctx.db` are code, not files.
+ */
+const PATH_WITH_DIRECTORY =
+  /^(?:~|\.{1,2})?\/?(?:[\w@.+-]+\/)*[\w@+-][\w@.+-]*\.[a-z][a-z0-9]{0,7}(?::\d+(?::\d+)?)?$/i;
+const BARE_FILE_NAME =
+  /^[\w@+-][\w@.+-]*\.(?:[cm]?[jt]sx?|json|jsonc|mdx?|css|scss|html|ya?ml|toml|py|rb|go|rs|java|kt|swift|c|h|cpp|hpp|cs|php|sh|sql|txt|lock|xml|svg|vue|svelte|astro|prisma|graphql|csv|ipynb|env)(?::\d+(?::\d+)?)?$/;
+
+export function looksLikeFilePath(text: string): boolean {
+  if (text.includes("://")) return false;
+  return text.includes("/")
+    ? PATH_WITH_DIRECTORY.test(text)
+    : BARE_FILE_NAME.test(text);
+}
+
+/**
+ * Inline `code` renderer. A span that names a file gets a file icon so paths
+ * read as paths at a glance; everything else is ordinary inline code.
+ */
+export function MarkdownInlineCode({ children }: ComponentProps<"code"> & ExtraProps) {
+  const parts = Children.toArray(children);
+  const text = parts.length === 1 && typeof parts[0] === "string" ? parts[0] : null;
+  if (text === null || !looksLikeFilePath(text)) {
+    return <code className="markdown-inline-code">{children}</code>;
+  }
+  return (
+    <code className="markdown-inline-code" data-file title={text}>
+      <IconFile aria-hidden />
+      {text}
+    </code>
+  );
+}