dify

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

@@ -0,0 +1,42 @@
+import type { FC } from 'react'
+import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
+
+type CardProps = {
+  log: { role: string; text: string }[]
+}
+const Card: FC<CardProps> = ({
+  log,
+}) => {
+  return (
+    <>
+      {
+        log.length === 1 && (
+          <div className='px-4 py-2'>
+            <div className='whitespace-pre-line text-text-secondary'>
+              {log[0].text}
+            </div>
+          </div>
+        )
+      }
+      {
+        log.length > 1 && (
+          <div>
+            {
+              log.map((item, index) => (
+                <div key={index} className='group/card mb-2 rounded-xl px-4 pb-4 pt-2 last-of-type:mb-0 hover:bg-state-base-hover'>
+                  <div className='flex h-8 items-center justify-between'>
+                    <div className='font-semibold text-[#2D31A6]'>{item.role.toUpperCase()}</div>
+                    <CopyFeedbackNew className='hidden h-6 w-6 group-hover/card:block' content={item.text} />
+                  </div>
+                  <div className='whitespace-pre-line text-text-secondary'>{item.text}</div>
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </>
+  )
+}
+
+export default Card

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 = {}

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

@@ -0,0 +1,72 @@
+import type { FC } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useClickAway } from 'ahooks'
+import { RiCloseLine } from '@remixicon/react'
+import Card from './card'
+import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
+import type { IChatItem } from '@/app/components/base/chat/chat/type'
+
+type PromptLogModalProps = {
+  currentLogItem?: IChatItem
+  width: number
+  onCancel: () => void
+}
+const PromptLogModal: FC<PromptLogModalProps> = ({
+  currentLogItem,
+  width,
+  onCancel,
+}) => {
+  const ref = useRef(null)
+  const [mounted, setMounted] = useState(false)
+
+  useClickAway(() => {
+    if (mounted)
+      onCancel()
+  }, ref)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!currentLogItem || !currentLogItem.log)
+    return null
+
+  return (
+    <div
+      className='relative z-10 flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
+      style={{
+        width: 480,
+        position: 'fixed',
+        top: 56 + 8,
+        left: 8 + (width - 480),
+        bottom: 16,
+      }}
+      ref={ref}
+    >
+      <div className='flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5'>
+        <div className='text-base font-semibold text-text-primary'>PROMPT LOG</div>
+        <div className='flex items-center'>
+          {
+            currentLogItem.log?.length === 1 && (
+              <>
+                <CopyFeedbackNew className='h-6 w-6' content={currentLogItem.log[0].text} />
+                <div className='mx-2.5 h-[14px] w-[1px] bg-divider-regular' />
+              </>
+            )
+          }
+          <div
+            onClick={onCancel}
+            className='flex h-6 w-6 cursor-pointer items-center justify-center'
+          >
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+      </div>
+      <div className='grow overflow-y-auto p-2'>
+        <Card log={currentLogItem.log} />
+      </div>
+    </div>
+  )
+}
+
+export default PromptLogModal