@neurocode-ai/session-ui 1.18.8

package/src/components/message-file.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test"
+import type { FilePart } from "@neurocode-ai/sdk/v2"
+import { attached, inline, kind, typeLabel } from "./message-file"
+
+function file(part: Partial<FilePart> = {}): FilePart {
+  return {
+    id: "part_1",
+    sessionID: "ses_1",
+    messageID: "msg_1",
+    type: "file",
+    mime: "text/plain",
+    url: "file:///repo/README.txt",
+    filename: "README.txt",
+    ...part,
+  }
+}
+
+describe("message-file", () => {
+  test("treats data URLs as attachments", () => {
+    expect(attached(file({ url: "data:text/plain;base64,SGVsbG8=" }))).toBe(true)
+    expect(attached(file())).toBe(false)
+  })
+
+  test("keeps data-backed file mentions inline", () => {
+    expect(
+      inline(
+        file({
+          source: {
+            type: "file",
+            path: "/repo/README.txt",
+            text: { value: "@README.txt", start: 0, end: 11 },
+          },
+        }),
+      ),
+    ).toBe(true)
+
+    const mentioned = file({
+      url: "data:text/plain;base64,SGVsbG8=",
+      source: {
+        type: "file",
+        path: "/repo/README.txt",
+        text: { value: "@README.txt", start: 0, end: 11 },
+      },
+    })
+    expect(inline(mentioned)).toBe(true)
+    expect(attached(mentioned)).toBe(false)
+  })
+
+  test("separates image and file attachment kinds", () => {
+    expect(kind(file({ mime: "image/png" }))).toBe("image")
+    expect(kind(file({ mime: "application/pdf" }))).toBe("file")
+  })
+
+  test("labels attachment types from the basename extension", () => {
+    expect(typeLabel("list.md", "text/plain")).toBe("Markdown")
+    expect(typeLabel("/repo/src/main.ts", "text/plain")).toBe("TypeScript")
+    expect(typeLabel("/tmp/report.pdf", "application/pdf")).toBe("PDF")
+    expect(typeLabel("notes.xyz", "text/plain")).toBe("XYZ")
+    expect(typeLabel("/home/user/my.project/Makefile", "text/plain")).toBe("File")
+    expect(typeLabel(".gitignore", "text/plain")).toBe("File")
+    expect(typeLabel("/repo/.env", "text/plain")).toBe("File")
+  })
+})

package/src/components/message-file.ts

@@ -0,0 +1,34 @@
+import { bundledLanguagesInfo } from "shiki"
+import { getFilename } from "@neurocode-ai/core/util/path"
+import type { FilePart } from "@neurocode-ai/sdk/v2"
+
+export function attached(part: FilePart) {
+  return part.url.startsWith("data:") && !inline(part)
+}
+
+export function inline(part: FilePart) {
+  return part.source?.text?.start !== undefined && part.source?.text?.end !== undefined
+}
+
+export function kind(part: FilePart) {
+  return part.mime.startsWith("image/") ? "image" : "file"
+}
+
+// language metadata only; grammars stay behind shiki's lazy imports
+const LANGUAGE_NAMES = new Map<string, string>(
+  bundledLanguagesInfo.flatMap((info) =>
+    [info.id, ...(info.aliases ?? [])].map((alias) => [alias, info.name] as [string, string]),
+  ),
+)
+
+// attachments carry text/plain for all text files, so the label comes from the extension;
+// filename may be an absolute path, so extract the basename before looking for one
+export function typeLabel(filename: string, mime: string) {
+  if (mime === "application/pdf") return "PDF"
+  const base = getFilename(filename)
+  // idx 0 is a dotfile like .gitignore, not an extension
+  const idx = base.lastIndexOf(".")
+  const suffix = idx <= 0 ? "" : base.slice(idx + 1).toLowerCase()
+  if (!suffix) return "File"
+  return LANGUAGE_NAMES.get(suffix) ?? suffix.toUpperCase()
+}

package/src/components/message-nav.css

@@ -0,0 +1,127 @@
+[data-component="message-nav"] {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 0;
+  list-style: none;
+
+  &[data-size="normal"] {
+    width: 200px;
+    gap: 4px;
+  }
+
+  &[data-size="compact"] {
+    width: 24px;
+  }
+}
+
+[data-slot="message-nav-item"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: flex-end;
+
+  [data-component="message-nav"][data-size="normal"] & {
+    justify-content: flex-start;
+  }
+}
+
+[data-slot="message-nav-tick-button"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 12px;
+  width: 24px;
+  border: none;
+  background: none;
+  padding: 0;
+
+  &[data-active] [data-slot="message-nav-tick-line"] {
+    background-color: var(--icon-strong-base);
+    height: 2px;
+    width: 100%;
+  }
+}
+
+[data-slot="message-nav-tick-line"] {
+  height: 1px;
+  width: 16px;
+  background-color: var(--icon-base);
+  transition:
+    width 0.2s,
+    background-color 0.2s;
+}
+
+[data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
+  width: 100%;
+  background-color: var(--icon-strong-base);
+}
+
+[data-slot="message-nav-message-button"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  column-gap: 10px;
+  cursor: default;
+  border: none;
+  background: none;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+}
+
+[data-slot="message-nav-title-preview"] {
+  font-size: 14px; /* text-14-regular */
+  color: var(--text-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  text-align: left;
+
+  &[data-active] {
+    color: var(--text-strong);
+    font-weight: 500;
+  }
+}
+
+[data-slot="message-nav-item"]:has([data-slot="message-nav-title-preview"][data-active])
+  [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base);
+}
+[data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
+  background-color: var(--surface-base-active);
+}
+
+[data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
+  color: var(--text-base);
+}
+
+[data-slot="message-nav-hovercard-content"] {
+  z-index: 1000;
+  display: flex;
+  padding: 4px 4px 6px 4px;
+  justify-content: center;
+  align-items: start;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  max-height: min(480px, calc(100vh - 6rem));
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* border/shadow-xs/base */
+  box-shadow:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+  * {
+    margin: 0 !important;
+  }
+}

package/src/components/message-nav.stories.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import * as mod from "./message-nav"
+import { create } from "@neurocode-ai/ui/storybook/scaffold"
+
+const story = create({ title: "UI/MessageNav", mod })
+export default { title: "UI/MessageNav", id: "components-message-nav", component: story.meta.component }
+export const Basic = story.Basic

package/src/components/message-nav.tsx

@@ -0,0 +1,102 @@
+import { UserMessage } from "@neurocode-ai/sdk/v2"
+import { HoverCard } from "@kobalte/core/hover-card"
+import { ComponentProps, For, Match, Show, createSignal, splitProps, Switch } from "solid-js"
+import { DiffChanges } from "@neurocode-ai/ui/diff-changes"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+
+export function MessageNav(
+  props: ComponentProps<"ul"> & {
+    messages: UserMessage[]
+    current?: UserMessage
+    size: "normal" | "compact"
+    onMessageSelect: (message: UserMessage) => void
+    getLabel?: (message: UserMessage) => string | undefined
+  },
+) {
+  const i18n = useI18n()
+  const [local, others] = splitProps(props, ["messages", "current", "size", "onMessageSelect", "getLabel", "class"])
+  const [hovercardOpen, setHovercardOpen] = createSignal(false)
+
+  const selectMessage = (message: UserMessage) => {
+    setHovercardOpen(false)
+    local.onMessageSelect(message)
+  }
+
+  const content = (className?: string) => (
+    <ul role="list" data-component="message-nav" data-size={local.size} class={className} {...others}>
+      <For each={local.messages}>
+        {(message) => {
+          const handleClick = () => selectMessage(message)
+
+          const handleKeyPress = (event: KeyboardEvent) => {
+            if (event.key !== "Enter" && event.key !== " ") return
+            event.preventDefault()
+            selectMessage(message)
+          }
+
+          return (
+            <li data-slot="message-nav-item">
+              <Switch>
+                <Match when={local.size === "compact"}>
+                  <div
+                    data-slot="message-nav-tick-button"
+                    data-active={message.id === local.current?.id || undefined}
+                    role="button"
+                    tabindex={0}
+                    onClick={handleClick}
+                    onKeyDown={handleKeyPress}
+                  >
+                    <div data-slot="message-nav-tick-line" />
+                  </div>
+                </Match>
+                <Match when={local.size === "normal"}>
+                  <button data-slot="message-nav-message-button" onClick={handleClick} onKeyDown={handleKeyPress}>
+                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                    <div
+                      data-slot="message-nav-title-preview"
+                      data-active={message.id === local.current?.id || undefined}
+                    >
+                      <Show
+                        when={local.getLabel?.(message) ?? message.summary?.title}
+                        fallback={i18n.t("ui.messageNav.newMessage")}
+                      >
+                        {local.getLabel?.(message) ?? message.summary?.title}
+                      </Show>
+                    </div>
+                  </button>
+                </Match>
+              </Switch>
+            </li>
+          )
+        }}
+      </For>
+    </ul>
+  )
+
+  return (
+    <Switch>
+      <Match when={local.size === "compact"}>
+        <HoverCard
+          open={hovercardOpen()}
+          onOpenChange={setHovercardOpen}
+          openDelay={0}
+          closeDelay={120}
+          placement="right-start"
+          gutter={8}
+          overflowPadding={24}
+          fitViewport
+        >
+          <HoverCard.Trigger as="div" data-component="message-nav-hovercard" class={local.class}>
+            {content()}
+          </HoverCard.Trigger>
+          <HoverCard.Portal>
+            <HoverCard.Content data-slot="message-nav-hovercard-content">
+              <MessageNav {...props} size="normal" class="" onMessageSelect={selectMessage} />
+            </HoverCard.Content>
+          </HoverCard.Portal>
+        </HoverCard>
+      </Match>
+      <Match when={local.size === "normal"}>{content(local.class)}</Match>
+    </Switch>
+  )
+}

package/src/components/message-part-text.ts

@@ -0,0 +1,3 @@
+export function readPartText(accum: Record<string, string> | undefined, part: { id: string; text?: string }): string {
+  return (accum?.[part.id] ?? part.text ?? "").trim()
+}