@jcy2387/dsh-conversation-ui 0.1.0-rc.12

package/src/client/ConversationCard.module.css

@@ -0,0 +1,253 @@
+/* Mirrors the shipped PluginCard chrome without importing an internal module
+   from another client package. */
+
+.card {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3);
+  transition: border-color .16s, background .16s;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.cardOpen {
+  border-color: var(--dsw-alias-label-dimmed);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.header {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  border-radius: 12px;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
+}
+
+.headText {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.name {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+}
+
+.description {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.version {
+  flex: none;
+  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.pending {
+  flex: none;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+  transition: transform .16s;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  margin: 0 16px;
+  padding-bottom: 8px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.readOnly {
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+}
+
+.fieldHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.label {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+
+.toggle {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: pointer;
+}
+
+.toggle:disabled {
+  cursor: default;
+}
+
+.toggle:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.failure {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.updateRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.updateCopy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 4px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.save,
+.discard,
+.update {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 5px 14px;
+  cursor: pointer;
+}
+
+.save {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.discard {
+  border-color: var(--dsw-alias-border-l2);
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.discard:hover:not(:disabled),
+.update:hover:not(:disabled) {
+  border-color: var(--dsw-alias-label-dimmed);
+  color: var(--dsw-alias-label-primary);
+}
+
+.update {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: 6px;
+  border-color: var(--dsw-alias-border-l2);
+  background: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.discard:disabled,
+.save:disabled,
+.update:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.discard:focus-visible,
+.save:focus-visible,
+.update:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}

package/src/client/ConversationCard.tsx

@@ -0,0 +1,122 @@
+/**
+ * The conversation-ui plugin configuration card, rendered inside the Web
+ * Settings "plugin configuration" page. One toggle, staged until the user
+ * saves — the same shape as the Host-shipped cards, hand-drawn because the
+ * Host cards' chrome is not exported for reuse.
+ */
+
+import { useState } from 'react'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
+import { IconChevronDownOutline14, IconRefreshOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ConversationCardFace } from './conversation-ui-card-controller.ts'
+import css from './ConversationCard.module.css'
+
+/** Props the renderer binds for the conversation-ui card. */
+export type ConversationCardProps =
+  PropsRuntime<'settings.plugin.item'>
+  & PropsLocale<'settings.conversationUi'>
+  & InjectFace<ConversationCardFace>
+
+/** Render the conversation-ui card independently of the core settings namespace allowlist. */
+export function ConversationCard(props: ConversationCardProps) {
+  const { t } = props
+  const [open, setOpen] = useState(false)
+  const state = props.useConversationUiCard(snapshot => snapshot)
+  const blocked = !state.dirty || state.saving || state.status !== 'ready'
+  const versionLabel = state.version === undefined
+    ? null
+    : t(state.installation === 'development' ? 'developmentVersion' : 'version')
+      .replace('{version}', state.version)
+
+  return (
+    <li className={open ? `${css.card} ${css.cardOpen}` : css.card}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{t('title')}</span>
+          <span className={css.description}>{t('description')}</span>
+        </span>
+        {versionLabel === null ? null : <span className={css.version}>{versionLabel}</span>}
+        {state.dirty ? <span className={css.pending}>{t('unsaved')}</span> : null}
+        <IconChevronDownOutline14 className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron} />
+      </button>
+      {open
+        ? (
+          <div className={css.body}>
+            {state.status === 'loading' ? <p className={css.readOnly} role="status">{t('loading')}</p> : null}
+            {state.status === 'unavailable' ? (
+              <div className={css.failure}>
+                <p className={css.readOnly} role="status">{t('unavailable')}</p>
+                <button type="button" className={css.discard} onClick={props.reload}>{t('retry')}</button>
+              </div>
+            ) : null}
+            {state.status === 'ready' ? (
+              <>
+                {!state.writable ? <p className={css.readOnly} role="status">{t('readOnly')}</p> : null}
+                <label className={css.field}>
+                  <span className={css.fieldHead}>
+                    <span className={css.label}>{t('thinkAutoExpand')}</span>
+                    <input
+                      type="checkbox"
+                      className={css.toggle}
+                      checked={state.thinkAutoExpand}
+                      disabled={!state.writable}
+                      onChange={(event) => { props.edit(event.target.checked) }}
+                    />
+                  </span>
+                  <span className={css.hint}>{t('thinkAutoExpandHint')}</span>
+                </label>
+                <div className={css.updateRow}>
+                  <span className={css.updateCopy}>
+                    <span className={css.label}>{t('updates')}</span>
+                    <span className={css.hint}>
+                      {state.restartRequired
+                        ? t('restartRequired')
+                        : state.installation === 'npm' ? t('updateHint')
+                          : state.installation === 'development' ? t('developmentBuild') : t('updateUnavailable')}
+                    </span>
+                  </span>
+                  <button
+                    type="button"
+                    className={css.update}
+                    disabled={!state.canUpgrade || state.upgrading || state.restartRequired}
+                    title={state.canUpgrade ? undefined : t('updateUnavailable')}
+                    onClick={props.upgrade}
+                  >
+                    <span aria-hidden="true"><IconRefreshOutline14 /></span>
+                    {t(state.upgrading ? 'updating' : 'update')}
+                  </button>
+                </div>
+                {state.upgradeFailed ? <p className={css.failed} role="status">{t('updateFailed')}</p> : null}
+                <div className={css.footer}>
+                  {state.failed ? <p className={css.failed} role="status">{t('saveFailed')}</p> : null}
+                  <button
+                    type="button"
+                    className={css.discard}
+                    disabled={!state.dirty || state.saving}
+                    onClick={props.discard}
+                  >
+                    {t('discard')}
+                  </button>
+                  <button
+                    type="button"
+                    className={css.save}
+                    disabled={blocked}
+                    onClick={props.save}
+                  >
+                    {t(state.saving ? 'saving' : 'save')}
+                  </button>
+                </div>
+              </>
+            ) : null}
+          </div>
+        )
+        : null}
+    </li>
+  )
+}

package/src/client/DeliverablesCard.module.css

@@ -0,0 +1,187 @@
+:global([data-turn-tail]:has([data-stream-deliverables-card]) > *:has([data-produced-files-row])) {
+  display: none !important;
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: 16px;
+  padding: 12px 12px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-primary);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
+  line-height: 22px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+  padding: 4px 8px 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.headerIcon {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.heading {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.title {
+  color: var(--dsw-alias-label-primary);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.subtitle {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: start;
+  cursor: pointer;
+}
+
+.subtitle:hover {
+  color: var(--dsw-alias-label-secondary);
+  text-decoration: underline;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 10px 8px 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 28px;
+  gap: 0;
+  margin: 0;
+  padding: 2px 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 22px;
+  text-align: start;
+  cursor: pointer;
+}
+
+.item:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.item:focus-visible,
+.more:focus-visible,
+.subtitle:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-l3);
+  outline-offset: 1px;
+}
+
+.filePath,
+.websitePath {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.parentPath {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileName {
+  flex: none;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.websitePath {
+  overflow: hidden;
+  color: var(--dsw-alias-label-secondary);
+  text-overflow: ellipsis;
+}
+
+.stats {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+  margin-inline-start: 8px;
+  font-size: 13px;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+.added {
+  color: var(--dsw-alias-label-success, #2f9e44);
+}
+
+.removed {
+  color: var(--dsw-alias-label-danger, #d94841);
+}
+
+.external {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.more {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 5px;
+  margin: 8px 8px 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.more:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.moreIcon {
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}

package/src/client/DeliverablesCard.tsx

@@ -0,0 +1,142 @@
+import { useLayoutEffect, useState } from 'react'
+import type { TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import {
+  IconChevronDownOutline14,
+  IconChevronUpOutline14,
+  IconGlobeOutline14,
+  IconProjectAddOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { DeliverableEntry } from './deliverables.ts'
+import css from './DeliverablesCard.module.css'
+
+export interface DeliverablesCardProps extends TurnTailOwnerProps {
+  readonly matched: readonly DeliverableEntry[]
+}
+
+function isWebsite(entry: DeliverableEntry): boolean {
+  return entry.kind === 'website' || /^https?:\/\//i.test(entry.path)
+}
+
+function openWebsite(path: string): void {
+  if (typeof window !== 'undefined') window.open(path, '_blank', 'noopener,noreferrer')
+}
+
+function pathParts(path: string): { parent: string; name: string } {
+  const separator = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'))
+  if (separator < 0) return { parent: '', name: path }
+  return { parent: path.slice(0, separator + 1), name: path.slice(separator + 1) }
+}
+
+function hiddenKindLabel(entries: readonly DeliverableEntry[]): string {
+  if (entries.every(isWebsite)) return '网站'
+  if (entries.every(entry => !isWebsite(entry))) return '文件'
+  return '产物'
+}
+
+function countLabel(entries: readonly DeliverableEntry[]): string {
+  const files = entries.filter(entry => !isWebsite(entry)).length
+  const websites = entries.length - files
+  if (files > 0 && websites === 0) return `已编辑 ${files} 个文件`
+  if (files === 0) return `交付 ${websites} 个网站`
+  return `已交付 ${entries.length} 项产物`
+}
+
+interface EditStats {
+  readonly added: number
+  readonly removed: number
+}
+
+function collectEditStats(turn: number): ReadonlyMap<string, EditStats> {
+  const result = new Map<string, EditStats>()
+  if (typeof document === 'undefined') return result
+  for (const element of document.querySelectorAll<HTMLElement>('[data-stream-edit-stats]')) {
+    const row = element.closest<HTMLElement>('[data-stream-turn]')
+    if (row?.getAttribute('data-stream-turn') !== String(turn)) continue
+    const path = element.getAttribute('data-stream-edit-file')
+    const match = /\+(\d+)\s+-\s*(\d+)/.exec(element.textContent ?? '')
+    if (path === null || match === null) continue
+    result.set(path, { added: Number(match[1]), removed: Number(match[2]) })
+  }
+  return result
+}
+
+/** Codex-style turn-tail card for edited files and deployed websites. */
+export function DeliverablesCard({ matched, turn, openFile }: DeliverablesCardProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [domStats, setDomStats] = useState<ReadonlyMap<string, EditStats>>(() => new Map())
+  useLayoutEffect(() => {
+    setDomStats(collectEditStats(turn.turn))
+  }, [turn.turn, matched])
+  const entries = matched.map(entry => {
+    const stats = domStats.get(entry.path)
+    return stats === undefined || entry.added > 0 || entry.removed > 0 ? entry : { ...entry, ...stats }
+  })
+  const visible = expanded ? entries : entries.slice(0, 3)
+  const hidden = entries.length - visible.length
+  const summary = countLabel(entries)
+  const hasFiles = entries.some(entry => !isWebsite(entry))
+  const firstWebsite = entries.find(isWebsite)
+  return (
+    <section className={css.root} data-stream-deliverables-card data-stream-deliverables-count={entries.length}>
+      <div className={css.header}>
+        <span className={css.headerIcon} aria-hidden>
+          {hasFiles ? <IconProjectAddOutline16 size={20} /> : <IconGlobeOutline14 size={20} />}
+        </span>
+        <div className={css.heading}>
+          <strong className={css.title}>{summary}</strong>
+          {hasFiles ? (
+            <button type="button" className={css.subtitle} onClick={() => { setExpanded(true) }}>
+              查看更改 ↗
+            </button>
+          ) : firstWebsite !== undefined ? (
+            <button type="button" className={css.subtitle} onClick={() => { openWebsite(firstWebsite.path) }}>
+              打开网站 ↗
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <div className={css.list}>
+        {visible.map(entry => {
+          const website = isWebsite(entry)
+          const parts = pathParts(entry.path)
+          return (
+            <button
+              key={`${entry.kind}:${entry.path}`}
+              type="button"
+              className={css.item}
+              title={entry.path}
+              onClick={() => { website ? openWebsite(entry.path) : openFile(entry.path) }}
+            >
+              {website ? (
+                <span className={css.websitePath}>{entry.path}</span>
+              ) : (
+                <span className={css.filePath}>
+                  {parts.parent !== '' && <span className={css.parentPath}>{parts.parent}</span>}
+                  <span className={css.fileName}>{parts.name || entry.path}</span>
+                </span>
+              )}
+              {!website && (entry.added > 0 || entry.removed > 0) && (
+                <span className={css.stats}>
+                  {entry.added > 0 && <span className={css.added}>+{entry.added}</span>}
+                  {entry.removed > 0 && <span className={css.removed}>-{entry.removed}</span>}
+                </span>
+              )}
+              {website && <span className={css.external} aria-hidden>↗</span>}
+            </button>
+          )
+        })}
+      </div>
+      {hidden > 0 && (
+        <button type="button" className={css.more} onClick={() => { setExpanded(true) }}>
+          再显示 {hidden} 个{hiddenKindLabel(entries.slice(visible.length))}
+          <span className={css.moreIcon} aria-hidden><IconChevronDownOutline14 /></span>
+        </button>
+      )}
+      {expanded && entries.length > 3 && (
+        <button type="button" className={css.more} onClick={() => { setExpanded(false) }}>
+          收起 <span className={css.moreIcon} aria-hidden><IconChevronUpOutline14 /></span>
+        </button>
+      )}
+    </section>
+  )
+}