dsh-side-chat-plus 0.3.2 → 0.3.4

package/src/client/attachments/AttachmentRail.tsx

@@ -1,173 +1,173 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import {
-  IconChevronLeftOutline14,
-  IconChevronRightOutline14,
-  IconCloseFill14,
-} from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './AttachmentRail.module.css'
-
-/** One rail thumbnail; strings arrive resolved (zero-cordis atom). */
-export interface AttachmentRailItem {
-  /** Stable identity for the React key. */
-  id: string
-  /** Object or data URL rendered as the thumbnail. */
-  previewUrl: string
-  /** Image alt text (display name with the owner's fallback applied). */
-  alt: string
-  /** Accessible label of the item's remove control. */
-  removeLabel: string
-}
-
-/** Rail-level strings the owner resolves from its own locale namespace. */
-export interface AttachmentRailLabels {
-  /** Accessible name of the rail group. */
-  group: string
-  /** Thumbnail tooltip inviting the original-image preview. */
-  open: string
-  /** Accessible label of the left paging arrow. */
-  scrollLeft: string
-  /** Accessible label of the right paging arrow. */
-  scrollRight: string
-}
-
-/** Approximate pixels per wheel step for `deltaMode` LINE deltas (Firefox notch wheels report lines). */
-const WHEEL_LINE_PX = 16
-
-/** Smooth paging unless the user asked for reduced motion. */
-function pageBehavior(): ScrollBehavior {
-  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'
-}
-
-/**
- * Horizontal thumbnail rail over the caller's draft attachments.
- *
- * The rail scrolls with its scrollbar hidden; overflow is announced by edge
- * arrows recomputed from scroll geometry on scroll, item-count changes, and
- * rail size changes (a ResizeObserver on the rail element, so sidebar or panel
- * resizes count, not only window resizes). A vertical wheel pans the rail
- * horizontally and is consumed exclusively, a newly added item is revealed at
- * the rail's end, and each thumbnail opens on a single click while its remove
- * control sits inside the card. The owner decides mounting.
- */
-export function AttachmentRail<T extends AttachmentRailItem>({ items, labels, onOpen, onRemove }: {
-  items: readonly T[]
-  labels: AttachmentRailLabels
-  onOpen: (item: T) => void
-  onRemove: (item: T) => void
-}) {
-  const railRef = useRef<HTMLDivElement | null>(null)
-  // null marks the first layout pass: a rail that MOUNTS over an existing
-  // draft is initial display, not growth, and must not jump to the end.
-  const countRef = useRef<number | null>(null)
-  const [edges, setEdges] = useState({ left: false, right: false })
-  const updateEdges = useCallback(() => {
-    const el = railRef.current
-    if (el === null) return
-    // 1px slack: engines report fractional scroll positions at the edges.
-    const left = el.scrollLeft > 1
-    const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
-    setEdges(prev => prev.left === left && prev.right === right ? prev : { left, right })
-  }, [])
-  useLayoutEffect(() => {
-    const grew = countRef.current !== null && items.length > countRef.current
-    countRef.current = items.length
-    const el = railRef.current
-    if (el === null) return
-    // A newly added attachment lands at the rail's end: reveal it.
-    if (grew) el.scrollLeft = el.scrollWidth - el.clientWidth
-    updateEdges()
-  }, [items.length, updateEdges])
-  useEffect(() => {
-    const el = railRef.current
-    if (el === null) return
-    // The rail's width follows the composer, which resizes with sidebars and
-    // panels, not only the window — observe the element itself.
-    let disconnect = (): void => {}
-    if (typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver(updateEdges)
-      observer.observe(el)
-      disconnect = () => { observer.disconnect() }
-    }
-    // The rail scrolls horizontally ONLY: any wheel tick with a vertical
-    // component is consumed — without preventDefault it would also scroll the
-    // conversation behind the composer, and React's root wheel listener is
-    // passive, so the exclusion needs this manually attached non-passive
-    // listener.
-    const onWheel = (event: globalThis.WheelEvent): void => {
-      if (event.deltaY === 0) return
-      const scale = event.deltaMode === WheelEvent.DOM_DELTA_LINE
-        ? WHEEL_LINE_PX
-        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? el.clientWidth : 1
-      event.preventDefault()
-      el.scrollBy({
-        left: event.deltaX !== 0
-          ? event.deltaX * scale
-          : Math.sign(event.deltaY) * Math.min(Math.abs(event.deltaY) * scale, 60),
-        behavior: 'auto',
-      })
-    }
-    el.addEventListener('wheel', onWheel, { passive: false })
-    return () => {
-      disconnect()
-      el.removeEventListener('wheel', onWheel)
-    }
-  }, [updateEdges])
-  const page = (direction: -1 | 1): void => {
-    const el = railRef.current
-    if (el === null) return
-    // One viewport minus a card keeps the last visible thumbnail as context.
-    el.scrollBy({ left: direction * Math.max(el.clientWidth - 64, 200), behavior: pageBehavior() })
-  }
-  return (
-    <div className={css.root}>
-      {edges.left && (
-        <button
-          type="button"
-          className={`${css.arrow} ${css.arrowLeft}`}
-          aria-label={labels.scrollLeft}
-          onClick={() => { page(-1) }}
-        >
-          <IconChevronLeftOutline14 />
-        </button>
-      )}
-      <div
-        ref={railRef}
-        className={css.rail}
-        role="group"
-        aria-label={labels.group}
-        onScroll={updateEdges}
-      >
-        {items.map(item => (
-          <div key={item.id} className={css.item}>
-            <button
-              type="button"
-              className={css.thumbnail}
-              title={labels.open}
-              onClick={() => { onOpen(item) }}
-            >
-              <img src={item.previewUrl} alt={item.alt} />
-            </button>
-            <button
-              type="button"
-              className={css.remove}
-              aria-label={item.removeLabel}
-              onClick={() => { onRemove(item) }}
-            >
-              <IconCloseFill14 size={12} />
-            </button>
-          </div>
-        ))}
-      </div>
-      {edges.right && (
-        <button
-          type="button"
-          className={`${css.arrow} ${css.arrowRight}`}
-          aria-label={labels.scrollRight}
-          onClick={() => { page(1) }}
-        >
-          <IconChevronRightOutline14 />
-        </button>
-      )}
-    </div>
-  )
-}
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import {
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconCloseFill14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './AttachmentRail.module.css'
+
+/** One rail thumbnail; strings arrive resolved (zero-cordis atom). */
+export interface AttachmentRailItem {
+  /** Stable identity for the React key. */
+  id: string
+  /** Object or data URL rendered as the thumbnail. */
+  previewUrl: string
+  /** Image alt text (display name with the owner's fallback applied). */
+  alt: string
+  /** Accessible label of the item's remove control. */
+  removeLabel: string
+}
+
+/** Rail-level strings the owner resolves from its own locale namespace. */
+export interface AttachmentRailLabels {
+  /** Accessible name of the rail group. */
+  group: string
+  /** Thumbnail tooltip inviting the original-image preview. */
+  open: string
+  /** Accessible label of the left paging arrow. */
+  scrollLeft: string
+  /** Accessible label of the right paging arrow. */
+  scrollRight: string
+}
+
+/** Approximate pixels per wheel step for `deltaMode` LINE deltas (Firefox notch wheels report lines). */
+const WHEEL_LINE_PX = 16
+
+/** Smooth paging unless the user asked for reduced motion. */
+function pageBehavior(): ScrollBehavior {
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'
+}
+
+/**
+ * Horizontal thumbnail rail over the caller's draft attachments.
+ *
+ * The rail scrolls with its scrollbar hidden; overflow is announced by edge
+ * arrows recomputed from scroll geometry on scroll, item-count changes, and
+ * rail size changes (a ResizeObserver on the rail element, so sidebar or panel
+ * resizes count, not only window resizes). A vertical wheel pans the rail
+ * horizontally and is consumed exclusively, a newly added item is revealed at
+ * the rail's end, and each thumbnail opens on a single click while its remove
+ * control sits inside the card. The owner decides mounting.
+ */
+export function AttachmentRail<T extends AttachmentRailItem>({ items, labels, onOpen, onRemove }: {
+  items: readonly T[]
+  labels: AttachmentRailLabels
+  onOpen: (item: T) => void
+  onRemove: (item: T) => void
+}) {
+  const railRef = useRef<HTMLDivElement | null>(null)
+  // null marks the first layout pass: a rail that MOUNTS over an existing
+  // draft is initial display, not growth, and must not jump to the end.
+  const countRef = useRef<number | null>(null)
+  const [edges, setEdges] = useState({ left: false, right: false })
+  const updateEdges = useCallback(() => {
+    const el = railRef.current
+    if (el === null) return
+    // 1px slack: engines report fractional scroll positions at the edges.
+    const left = el.scrollLeft > 1
+    const right = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+    setEdges(prev => prev.left === left && prev.right === right ? prev : { left, right })
+  }, [])
+  useLayoutEffect(() => {
+    const grew = countRef.current !== null && items.length > countRef.current
+    countRef.current = items.length
+    const el = railRef.current
+    if (el === null) return
+    // A newly added attachment lands at the rail's end: reveal it.
+    if (grew) el.scrollLeft = el.scrollWidth - el.clientWidth
+    updateEdges()
+  }, [items.length, updateEdges])
+  useEffect(() => {
+    const el = railRef.current
+    if (el === null) return
+    // The rail's width follows the composer, which resizes with sidebars and
+    // panels, not only the window — observe the element itself.
+    let disconnect = (): void => {}
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(updateEdges)
+      observer.observe(el)
+      disconnect = () => { observer.disconnect() }
+    }
+    // The rail scrolls horizontally ONLY: any wheel tick with a vertical
+    // component is consumed — without preventDefault it would also scroll the
+    // conversation behind the composer, and React's root wheel listener is
+    // passive, so the exclusion needs this manually attached non-passive
+    // listener.
+    const onWheel = (event: globalThis.WheelEvent): void => {
+      if (event.deltaY === 0) return
+      const scale = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+        ? WHEEL_LINE_PX
+        : event.deltaMode === WheelEvent.DOM_DELTA_PAGE ? el.clientWidth : 1
+      event.preventDefault()
+      el.scrollBy({
+        left: event.deltaX !== 0
+          ? event.deltaX * scale
+          : Math.sign(event.deltaY) * Math.min(Math.abs(event.deltaY) * scale, 60),
+        behavior: 'auto',
+      })
+    }
+    el.addEventListener('wheel', onWheel, { passive: false })
+    return () => {
+      disconnect()
+      el.removeEventListener('wheel', onWheel)
+    }
+  }, [updateEdges])
+  const page = (direction: -1 | 1): void => {
+    const el = railRef.current
+    if (el === null) return
+    // One viewport minus a card keeps the last visible thumbnail as context.
+    el.scrollBy({ left: direction * Math.max(el.clientWidth - 64, 200), behavior: pageBehavior() })
+  }
+  return (
+    <div className={css.root}>
+      {edges.left && (
+        <button
+          type="button"
+          className={`${css.arrow} ${css.arrowLeft}`}
+          aria-label={labels.scrollLeft}
+          onClick={() => { page(-1) }}
+        >
+          <IconChevronLeftOutline14 />
+        </button>
+      )}
+      <div
+        ref={railRef}
+        className={css.rail}
+        role="group"
+        aria-label={labels.group}
+        onScroll={updateEdges}
+      >
+        {items.map(item => (
+          <div key={item.id} className={css.item}>
+            <button
+              type="button"
+              className={css.thumbnail}
+              title={labels.open}
+              onClick={() => { onOpen(item) }}
+            >
+              <img src={item.previewUrl} alt={item.alt} />
+            </button>
+            <button
+              type="button"
+              className={css.remove}
+              aria-label={item.removeLabel}
+              onClick={() => { onRemove(item) }}
+            >
+              <IconCloseFill14 size={12} />
+            </button>
+          </div>
+        ))}
+      </div>
+      {edges.right && (
+        <button
+          type="button"
+          className={`${css.arrow} ${css.arrowRight}`}
+          aria-label={labels.scrollRight}
+          onClick={() => { page(1) }}
+        >
+          <IconChevronRightOutline14 />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/client/attachments/DropOverlay.module.css

@@ -1,38 +1,38 @@
-.mask {
-  position: fixed;
-  inset: 0;
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* Decoration only: drag targeting must stay on the page below. */
-  pointer-events: none;
-  background: rgba(255, 255, 255, 0.72);
-  border: 2px dashed var(--dsw-color-border-strong, #4d6bfe);
-  border-radius: 12px;
-}
-
-.wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-}
-
-.illustration {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--dsw-color-text, #1f2329);
-}
-
-.desc {
-  font-size: 13px;
-  color: var(--dsw-color-text-secondary, #646a73);
-}
+.mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Decoration only: drag targeting must stay on the page below. */
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.72);
+  border: 2px dashed var(--dsw-color-border-strong, #4d6bfe);
+  border-radius: 12px;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.illustration {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dsw-color-text, #1f2329);
+}
+
+.desc {
+  font-size: 13px;
+  color: var(--dsw-color-text-secondary, #646a73);
+}

package/src/client/attachments/DropOverlay.tsx

@@ -1,62 +1,62 @@
-import { createPortal } from 'react-dom'
-import css from './DropOverlay.module.css'
-
-/** Drop-overlay strings the owner resolves from its own locale namespace. */
-export interface DropOverlayLabels {
-  /** Headline inviting the drop, or naming why it is unavailable. */
-  title: string
-  /** Limits line under the title; shown only while drops are accepted. */
-  desc?: string | undefined
-}
-
-/**
- * Full-viewport invitation shown while a file drag is over the page.
- * Decoration only: `pointer-events: none` keeps drag targeting on the page
- * below, so the owner's document-level listeners keep an accurate enter/leave
- * count and own accept/reject. Rendered through a body portal for the same
- * transformed-ancestor reason as the lightbox.
- */
-export function DropOverlay({ disabled, labels }: {
-  disabled: boolean
-  labels: DropOverlayLabels
-}) {
-  return createPortal(
-    <div className={css.mask} role="status">
-      <div className={css.wrap}>
-        <div className={css.illustration} aria-hidden="true">
-          {disabled ? <BlockedIllustration /> : <UploadIllustration />}
-        </div>
-        <div className={css.title}>{labels.title}</div>
-        {!disabled && labels.desc !== undefined && <div className={css.desc}>{labels.desc}</div>}
-      </div>
-    </div>,
-    document.body,
-  )
-}
-
-/** Tilted photo-and-note cards. */
-const UploadIllustration = () => (
-  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#9ce5ed" />
-    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#679efe" />
-    <rect x="26" y="30" width="38" height="38" rx="10" fill="#3964fe" />
-    <path
-      d="M33 62c1-2 4-8 7-14 1-2 5-2 6 1 2 5 5 9 7 10 3 1 7-9 17 2"
-      stroke="#fff"
-      strokeWidth="3"
-      fill="none"
-    />
-    <circle cx="53" cy="43" r="4" fill="#fff" />
-  </svg>
-)
-
-/** Greyed cards with a blocked badge. */
-const BlockedIllustration = () => (
-  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#c4c9d0" />
-    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#b0b6be" />
-    <rect x="26" y="30" width="38" height="38" rx="10" fill="#d8dce1" />
-    <circle cx="45" cy="49" r="12" stroke="#fff" strokeWidth="3" fill="none" />
-    <path d="M36 40l18 18" stroke="#fff" strokeWidth="3" strokeLinecap="round" />
-  </svg>
-)
+import { createPortal } from 'react-dom'
+import css from './DropOverlay.module.css'
+
+/** Drop-overlay strings the owner resolves from its own locale namespace. */
+export interface DropOverlayLabels {
+  /** Headline inviting the drop, or naming why it is unavailable. */
+  title: string
+  /** Limits line under the title; shown only while drops are accepted. */
+  desc?: string | undefined
+}
+
+/**
+ * Full-viewport invitation shown while a file drag is over the page.
+ * Decoration only: `pointer-events: none` keeps drag targeting on the page
+ * below, so the owner's document-level listeners keep an accurate enter/leave
+ * count and own accept/reject. Rendered through a body portal for the same
+ * transformed-ancestor reason as the lightbox.
+ */
+export function DropOverlay({ disabled, labels }: {
+  disabled: boolean
+  labels: DropOverlayLabels
+}) {
+  return createPortal(
+    <div className={css.mask} role="status">
+      <div className={css.wrap}>
+        <div className={css.illustration} aria-hidden="true">
+          {disabled ? <BlockedIllustration /> : <UploadIllustration />}
+        </div>
+        <div className={css.title}>{labels.title}</div>
+        {!disabled && labels.desc !== undefined && <div className={css.desc}>{labels.desc}</div>}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+/** Tilted photo-and-note cards. */
+const UploadIllustration = () => (
+  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#9ce5ed" />
+    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#679efe" />
+    <rect x="26" y="30" width="38" height="38" rx="10" fill="#3964fe" />
+    <path
+      d="M33 62c1-2 4-8 7-14 1-2 5-2 6 1 2 5 5 9 7 10 3 1 7-9 17 2"
+      stroke="#fff"
+      strokeWidth="3"
+      fill="none"
+    />
+    <circle cx="53" cy="43" r="4" fill="#fff" />
+  </svg>
+)
+
+/** Greyed cards with a blocked badge. */
+const BlockedIllustration = () => (
+  <svg width="96" height="72" viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="14" width="38" height="38" rx="10" transform="rotate(-22 0 14)" fill="#c4c9d0" />
+    <rect x="62" y="7" width="37" height="43" rx="8" transform="rotate(17 62 7)" fill="#b0b6be" />
+    <rect x="26" y="30" width="38" height="38" rx="10" fill="#d8dce1" />
+    <circle cx="45" cy="49" r="12" stroke="#fff" strokeWidth="3" fill="none" />
+    <path d="M36 40l18 18" stroke="#fff" strokeWidth="3" strokeLinecap="round" />
+  </svg>
+)

package/src/client/attachments/ImageLightbox.module.css

@@ -1,44 +1,44 @@
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-}
-
-.mask {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.72);
-}
-
-.image {
-  position: relative;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  border-radius: 8px;
-}
-
-.close {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.16);
-  color: #fff;
-  cursor: pointer;
-}
-
-.close:hover {
-  background: rgba(255, 255, 255, 0.28);
-}
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.72);
+}
+
+.image {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+  cursor: pointer;
+}
+
+.close:hover {
+  background: rgba(255, 255, 255, 0.28);
+}