dsh-side-chat-plus 0.3.2 → 0.3.3

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);
+}

package/src/client/attachments/ImageLightbox.tsx

@@ -1,58 +1,58 @@
-import { useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import css from './ImageLightbox.module.css'
-
-/** Preview strings the owner resolves from its own locale namespace. */
-export interface ImageLightboxLabels {
-  /** Accessible name of the preview dialog. */
-  dialog: string
-  /** Accessible label of the close control. */
-  close: string
-}
-
-/**
- * Document-level original-image preview opened by clicking a thumbnail.
- * Closes on Escape, backdrop press, or the close control, and restores focus
- * to the opener on unmount. Rendered through a body portal: an opener inside
- * a transformed or filtered ancestor would otherwise trap the fixed backdrop
- * in that ancestor's box instead of covering the viewport.
- */
-export function ImageLightbox({ src, alt, labels, onClose }: {
-  src: string
-  alt: string
-  labels: ImageLightboxLabels
-  onClose: () => void
-}) {
-  const closeRef = useRef<HTMLButtonElement | null>(null)
-  const restoreRef = useRef<HTMLElement | null>(null)
-
-  useEffect(() => {
-    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
-    closeRef.current?.focus()
-    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
-      if (event.key === 'Escape') onClose()
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-      restoreRef.current?.focus()
-    }
-  }, [onClose])
-
-  return createPortal(
-    <div
-      className={css.backdrop}
-      role="dialog"
-      aria-modal="true"
-      aria-label={labels.dialog}
-    >
-      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
-      <img className={css.image} src={src} alt={alt} />
-      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
-        <IconCloseOutline16 size={16} />
-      </button>
-    </div>,
-    document.body,
-  )
-}
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { IconCloseOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './ImageLightbox.module.css'
+
+/** Preview strings the owner resolves from its own locale namespace. */
+export interface ImageLightboxLabels {
+  /** Accessible name of the preview dialog. */
+  dialog: string
+  /** Accessible label of the close control. */
+  close: string
+}
+
+/**
+ * Document-level original-image preview opened by clicking a thumbnail.
+ * Closes on Escape, backdrop press, or the close control, and restores focus
+ * to the opener on unmount. Rendered through a body portal: an opener inside
+ * a transformed or filtered ancestor would otherwise trap the fixed backdrop
+ * in that ancestor's box instead of covering the viewport.
+ */
+export function ImageLightbox({ src, alt, labels, onClose }: {
+  src: string
+  alt: string
+  labels: ImageLightboxLabels
+  onClose: () => void
+}) {
+  const closeRef = useRef<HTMLButtonElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    restoreRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus()
+    }
+  }, [onClose])
+
+  return createPortal(
+    <div
+      className={css.backdrop}
+      role="dialog"
+      aria-modal="true"
+      aria-label={labels.dialog}
+    >
+      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
+      <img className={css.image} src={src} alt={alt} />
+      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
+        <IconCloseOutline16 size={16} />
+      </button>
+    </div>,
+    document.body,
+  )
+}

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

@@ -1,61 +1,61 @@
-.gallery {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-width: 100%;
-}
-
-.gallery[data-align='start'] {
-  justify-content: flex-start;
-}
-
-.gallery[data-align='end'] {
-  justify-content: flex-end;
-}
-
-.frame {
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.08));
-  border-radius: 8px;
-  background: none;
-  cursor: pointer;
-}
-
-.frame[data-variant='tile'] {
-  width: 64px;
-  height: 64px;
-}
-
-.frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-width: 64px;
-  min-height: 64px;
-  font-size: 12px;
-  color: var(--dsw-color-text-secondary, #646a73);
-}
-
-.error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 64px;
-  min-height: 64px;
-  padding: 0 8px;
-  border: 1px dashed var(--dsw-color-border, rgba(0, 0, 0, 0.16));
-  border-radius: 8px;
-  background: none;
-  font-size: 12px;
-  color: var(--dsw-color-text-secondary, #646a73);
-  cursor: pointer;
-}
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  max-width: 100%;
+}
+
+.gallery[data-align='start'] {
+  justify-content: flex-start;
+}
+
+.gallery[data-align='end'] {
+  justify-content: flex-end;
+}
+
+.frame {
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+}
+
+.frame[data-variant='tile'] {
+  width: 64px;
+  height: 64px;
+}
+
+.frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-width: 64px;
+  min-height: 64px;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 64px;
+  min-height: 64px;
+  padding: 0 8px;
+  border: 1px dashed var(--dsw-color-border, rgba(0, 0, 0, 0.16));
+  border-radius: 8px;
+  background: none;
+  font-size: 12px;
+  color: var(--dsw-color-text-secondary, #646a73);
+  cursor: pointer;
+}