feat(frontend): embed prompt dynamic variables section

2026-08-03 10:46:56 +08:00
parent b0f82142a5
commit cff591aa13
4 changed files with 60 additions and 72 deletions
--- a/frontend/src/components/assistant-editor/dynamic-variables.tsx
+++ b/frontend/src/components/assistant-editor/dynamic-variables.tsx
@@ -1,16 +1,9 @@
 "use client";

-import { Braces, Check, Copy } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { useState } from "react";

 import { Badge } from "@/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import {
  Select,
@@ -141,40 +134,6 @@ export function DynamicVariableEditorHint({
  );
 }

-export function DynamicVariablesDialog({
-  open,
-  onOpenChange,
-  definitions,
-  onChange,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  definitions: Record<string, DynamicVariableDefinition>;
-  onChange: (definitions: Record<string, DynamicVariableDefinition>) => void;
-}) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[78vh] overflow-hidden rounded-2xl border-hairline bg-card p-0 sm:max-w-[520px]">
-        <DialogHeader className="border-b border-hairline px-6 py-5 text-left">
-          <DialogTitle className="flex items-center gap-2 text-base font-medium">
-            <Braces size={17} />
-            动态变量
-          </DialogTitle>
-          <DialogDescription className="text-xs leading-5">
-            助手配置中引用的自定义变量会自动出现在这里。
-          </DialogDescription>
-        </DialogHeader>
-
-        <DynamicVariablesEditor
-          definitions={definitions}
-          onChange={onChange}
-          layout="dialog"
-        />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
 export function DynamicVariablesPanel({
  definitions,
  onChange,
@@ -196,6 +155,27 @@ export function DynamicVariablesPanel({
  );
 }

+export function DynamicVariablesSection({
+  definitions,
+  onChange,
+}: {
+  definitions: Record<string, DynamicVariableDefinition>;
+  onChange: (definitions: Record<string, DynamicVariableDefinition>) => void;
+}) {
+  return (
+    <div className="space-y-3">
+      <p className="text-xs leading-5 text-muted-foreground">
+        助手配置中引用的自定义变量会自动出现在这里。
+      </p>
+      <DynamicVariablesEditor
+        definitions={definitions}
+        onChange={onChange}
+        layout="section"
+      />
+    </div>
+  );
+}
+
 function DynamicVariablesEditor({
  definitions,
  onChange,
@@ -203,7 +183,7 @@ function DynamicVariablesEditor({
 }: {
  definitions: Record<string, DynamicVariableDefinition>;
  onChange: (definitions: Record<string, DynamicVariableDefinition>) => void;
-  layout: "dialog" | "panel";
+  layout: "panel" | "section";
 }) {
  const entries = Object.entries(definitions);
  const [copiedSystemVariable, setCopiedSystemVariable] = useState<string | null>(
@@ -226,7 +206,7 @@ function DynamicVariablesEditor({
      className={
        layout === "panel"
          ? "flex min-h-0 flex-1 flex-col"
-          : "min-h-0 px-6 pb-6"
+          : "min-h-0 flex-none"
      }
    >
      <TabsList className="grid w-full shrink-0 grid-cols-2 bg-surface-strong">
@@ -249,7 +229,7 @@ function DynamicVariablesEditor({
            className={
              layout === "panel"
                ? "scrollbar-subtle min-h-0 flex-1 overflow-y-auto pt-3"
-                : "max-h-[calc(78vh-168px)] overflow-y-auto pt-3"
+                : "flex-none pt-3"
            }
          >
            {entries.length === 0 ? (
@@ -371,7 +351,7 @@ function DynamicVariablesEditor({
            className={
              layout === "panel"
                ? "scrollbar-subtle min-h-0 flex-1 space-y-3 overflow-y-auto pt-3"
-                : "max-h-[calc(78vh-168px)] space-y-3 overflow-y-auto pt-3"
+                : "flex-none space-y-3 pt-3"
            }
          >
            <p className="text-[11px] leading-5 text-muted-foreground">
--- a/frontend/src/components/assistant-editor/prompt-editor.tsx
+++ b/frontend/src/components/assistant-editor/prompt-editor.tsx
@@ -2,6 +2,7 @@

 import { useEffect, useRef, useState } from "react";
 import {
+  Braces,
  Bot,
  Brain,
  Database,
@@ -15,7 +16,7 @@ import {
 import { DebugDrawer } from "@/components/assistant-editor/debug-preview";
 import {
  DynamicVariableEditorHint,
-  DynamicVariablesDialog,
+  DynamicVariablesSection,
 } from "@/components/assistant-editor/dynamic-variables";
 import {
  AssistantIdentity,
@@ -43,6 +44,7 @@ const promptSections = [
  { id: "models", label: "模型与语音" },
  { id: "capabilities", label: "知识与工具" },
  { id: "interaction", label: "交互策略" },
+  { id: "variables", label: "动态变量" },
 ] as const;

 type PromptSectionId = (typeof promptSections)[number]["id"];
@@ -50,7 +52,6 @@ type PromptSectionId = (typeof promptSections)[number]["id"];
 type PromptEditorProps = {
  assistantId: string | null;
  form: AssistantForm;
-  dynamicVariablesOpen: boolean;
  dynamicVariableDefinitions: Record<string, DynamicVariableDefinition>;
  saving: boolean;
  dirty: boolean;
@@ -64,7 +65,6 @@ type PromptEditorProps = {
  tools: Tool[];
  onBack: () => void;
  onSave: () => void;
-  setDynamicVariablesOpen: (open: boolean) => void;
  updateForm: <K extends keyof AssistantForm>(
    key: K,
    value: AssistantForm[K],
@@ -76,7 +76,6 @@ type PromptEditorProps = {
 export function PromptEditor({
  assistantId,
  form,
-  dynamicVariablesOpen,
  dynamicVariableDefinitions,
  saving,
  dirty,
@@ -90,7 +89,6 @@ export function PromptEditor({
  tools,
  onBack,
  onSave,
-  setDynamicVariablesOpen,
  updateForm,
  handlePromptVisionEnabledChange,
  handlePromptModelChange,
@@ -102,6 +100,7 @@ export function PromptEditor({
    models: null,
    capabilities: null,
    interaction: null,
+    variables: null,
  });
  const selectedAnchorRef = useRef<PromptSectionId | null>(null);
  const [activeSection, setActiveSection] =
@@ -217,7 +216,7 @@ export function PromptEditor({
  }

  return (
-    <div className="-mt-6 flex h-full flex-col gap-4">
+    <div className="-mt-6 flex h-full flex-col gap-4 overflow-hidden bg-background">
      <div className="flex shrink-0 items-center justify-between gap-6 border-b border-hairline pb-3 pt-1">
        <div className="flex min-w-0 items-center gap-2">
          <EditorBackButton onClick={onBack} />
@@ -249,25 +248,13 @@ export function PromptEditor({
        </div>
      </div>

-      <DynamicVariablesDialog
-        open={dynamicVariablesOpen}
-        onOpenChange={setDynamicVariablesOpen}
-        definitions={dynamicVariableDefinitions}
-        onChange={(dynamicVariableDefinitions) =>
-          updateForm(
-            "dynamicVariableDefinitions",
-            dynamicVariableDefinitions,
-          )
-        }
-      />
-
      <div className="flex min-h-0 flex-1 gap-4">
        <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
          <nav
            aria-label="提示词配置分区"
-            className="shrink-0 overflow-x-auto"
+            className="shrink-0 overflow-x-auto overscroll-none"
          >
-            <div className="grid min-w-[22rem] grid-cols-4 border-b border-hairline">
+            <div className="grid min-w-[28rem] grid-cols-5 border-b border-hairline">
              {promptSections.map((section) => {
                const active = activeSection === section.id;

@@ -293,7 +280,7 @@ export function PromptEditor({

          <div
            ref={scrollContainerRef}
-            className="scrollbar-subtle min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto pr-1"
+            className="scrollbar-subtle min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto overscroll-none bg-background pr-1"
          >
            <section
              ref={(element) => {
@@ -314,7 +301,7 @@ export function PromptEditor({
                />
                <DynamicVariableEditorHint
                  count={Object.keys(dynamicVariableDefinitions).length}
-                  onOpen={() => setDynamicVariablesOpen(true)}
+                  onOpen={() => scrollToSection("variables")}
                />
              </SectionCard>

@@ -330,7 +317,7 @@ export function PromptEditor({
                />
                <DynamicVariableEditorHint
                  count={Object.keys(dynamicVariableDefinitions).length}
-                  onOpen={() => setDynamicVariablesOpen(true)}
+                  onOpen={() => scrollToSection("variables")}
                />
                {form.runtimeMode === "pipeline" && (
                  <div className="mt-4 space-y-3 border-t border-hairline pt-4">
@@ -550,6 +537,29 @@ export function PromptEditor({
                )}
              </SectionCard>
            </section>
+
+            <section
+              ref={(element) => {
+                sectionRefs.current.variables = element;
+              }}
+              className="scroll-mt-3 space-y-3"
+            >
+              <SectionCard
+                icon={<Braces size={15} />}
+                title="动态变量"
+                description="编辑提示词和开场白中引用的自定义变量"
+              >
+                <DynamicVariablesSection
+                  definitions={dynamicVariableDefinitions}
+                  onChange={(dynamicVariableDefinitions) =>
+                    updateForm(
+                      "dynamicVariableDefinitions",
+                      dynamicVariableDefinitions,
+                    )
+                  }
+                />
+              </SectionCard>
+            </section>
          </div>
        </div>

--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -8,7 +8,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);

  return (
-    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+    <div className="fixed inset-0 flex overflow-hidden bg-background text-foreground">
      <Sidebar collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />

      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
@@ -1565,7 +1565,6 @@ export function AssistantPage(props: AssistantPageProps) {
    <PromptEditor
      assistantId={editingId}
      form={form}
-      dynamicVariablesOpen={dynamicVariablesOpen}
      dynamicVariableDefinitions={effectiveDynamicVariableDefinitions}
      saving={saving}
      dirty={dirty}
@@ -1579,7 +1578,6 @@ export function AssistantPage(props: AssistantPageProps) {
      tools={tools}
      onBack={() => router.push("/assistants")}
      onSave={() => void handleSavePrompt()}
-      setDynamicVariablesOpen={setDynamicVariablesOpen}
      updateForm={updateForm}
      handlePromptVisionEnabledChange={handlePromptVisionEnabledChange}
      handlePromptModelChange={handlePromptModelChange}