dify

dify/web/app/components/base/prompt-log-modal/index.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect } from 'react'
+import PromptLogModal from '.'
+import { useStore } from '@/app/components/app/store'
+import type { IChatItem } from '@/app/components/base/chat/chat/type'
+
+type PromptLogModalProps = React.ComponentProps<typeof PromptLogModal>
+
+const mockLogItem: IChatItem = {
+  id: 'message-1',
+  isAnswer: true,
+  content: 'Summarize our meeting notes about launch blockers.',
+  log: [
+    {
+      role: 'system',
+      text: 'You are an assistant that extracts key launch blockers from the dialogue.',
+    },
+    {
+      role: 'user',
+      text: 'Team discussed QA, marketing assets, and infra readiness. Highlight risks.',
+    },
+    {
+      role: 'assistant',
+      text: 'Blocking items:\n1. QA needs staging data by Friday.\n2. Marketing awaiting final visuals.\n3. Infra rollout still missing approval.',
+    },
+  ],
+}
+
+const usePromptLogMocks = () => {
+  useEffect(() => {
+    useStore.getState().setCurrentLogItem(mockLogItem)
+    return () => {
+      useStore.getState().setCurrentLogItem(undefined)
+    }
+  }, [])
+}
+
+const PromptLogPreview = (props: PromptLogModalProps) => {
+  usePromptLogMocks()
+
+  return (
+    <div className="relative min-h-[540px] w-full bg-background-default-subtle p-6">
+      <PromptLogModal
+        {...props}
+        currentLogItem={mockLogItem}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/PromptLogModal',
+  component: PromptLogPreview,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Shows the prompt and message transcript used for a chat completion, with copy-to-clipboard support for single prompts.',
+      },
+    },
+  },
+  args: {
+    width: 960,
+    onCancel: () => {
+      console.log('Prompt log closed')
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PromptLogPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}