@morlay/ui-conversation-message-actions 0.0.10 → 0.0.12

package/src/client/import-action.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useRef, useState, type ReactElement } from "react";
+import { Button, IconProps } from "@deepseek-ai/dsh-client-ui-primitives";
+import type { SessionEditorState } from "./controller.ts";
+
+export interface SessionImportActionProps {
+  useSessionEditor: <S>(sel: (s: SessionEditorState) => S) => S;
+
+  importSession: (file: File) => Promise<boolean>;
+}
+
+export const IconUpload = ({ size = 14, className }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 3v12" />
+    <path d="m17 8-5-5-5 5" />
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  </svg>
+);
+
+export function SessionImportAction({
+  useSessionEditor,
+  importSession,
+}: SessionImportActionProps): ReactElement {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const importing = useSessionEditor((s) => s.pending === "import");
+  const error = useSessionEditor((s) => s.error);
+  const [busy, setBusy] = useState(false);
+
+  const onPick = useCallback(
+    (file: File | undefined) => {
+      if (file === undefined) return;
+      setBusy(true);
+      void importSession(file).finally(() => setBusy(false));
+    },
+    [importSession],
+  );
+
+  const working = busy || importing;
+  return (
+    <>
+      <Button
+        size="sm"
+        icon={<IconUpload />}
+        disabled={working}
+        aria-busy={working}
+        aria-label={working ? "导入中…" : "导入会话"}
+        title={error ?? "导入会话：用导出的 zip 覆盖当前会话内容"}
+        onClick={() => inputRef.current?.click()}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept=".zip,application/zip"
+          style={{ display: "none" }}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = "";
+            onPick(file);
+          }}
+        />
+      </Button>
+    </>
+  );
+}

package/src/client/index.ts

@@ -0,0 +1,50 @@
+import type { Context } from "@deepseek-ai/cordis";
+import type {} from "@deepseek-ai/dsh-client-ui-conversation/client";
+import type {} from "@deepseek-ai/dsh-client-ui-chat/client";
+import type {} from "@deepseek-ai/dsh-client-ui-renderer/client";
+import type { SessionId } from "@deepseek-ai/dsh-session";
+import { SessionEditorController } from "./controller.ts";
+import { registerChatNodeRenderers } from "./chat-node/register.ts";
+import { SessionImportAction } from "./import-action.tsx";
+
+export const inject = ["slots", "conversation", "connection", "sessions"];
+
+export function apply(ctx: Context): void {
+  const controllers = new Map<SessionId, SessionEditorController>();
+  const controllerFor = (sessionId: SessionId): SessionEditorController => {
+    let controller = controllers.get(sessionId);
+    if (controller === undefined) {
+      controller = new SessionEditorController(ctx, sessionId);
+      controllers.set(sessionId, controller);
+    }
+    return controller;
+  };
+
+  ctx.on("connection/reset", () => {
+    for (const controller of controllers.values()) void controller.load();
+  });
+
+  // 新版 `conversation.chat.node` 是 keyed slot（reuse key 即替换该节点的
+  // 渲染器）；register 内部经 ctx.slots.inject 等待声明。
+  registerChatNodeRenderers(ctx, controllerFor);
+
+  // 会话头部「导入会话」入口：导出按钮旁（header.utilities list 槽），
+  // 用导出的 zip 覆盖当前会话内容（host 端 `/api/session.import`）。
+  ctx.slots.inject("conversation.session.header.utilities", () =>
+    ctx.slots.register(
+      {
+        name: "conversation.session.header.utilities",
+        id: "session-editor.import",
+        inject: (sessionId: SessionId) => {
+          const face = controllerFor(sessionId).face;
+          return {
+            hooks: face.hooks,
+            // face 方法是闭包（已绑定 this），直接透传。
+            importSession: (file: File) => face.importSession(file),
+          };
+        },
+      } as never,
+      SessionImportAction as never,
+    ),
+  );
+}