75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
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 = {}
|