68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||
|
|
import { useEffect } from 'react'
|
||
|
|
import type { ComponentProps } from 'react'
|
||
|
|
import AudioBtn from '.'
|
||
|
|
import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
|
||
|
|
|
||
|
|
ensureMockAudioManager()
|
||
|
|
|
||
|
|
const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
|
||
|
|
useEffect(() => {
|
||
|
|
ensureMockAudioManager()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center space-x-3">
|
||
|
|
<AudioBtn {...props} />
|
||
|
|
<span className="text-xs text-gray-500">Audio toggle using ActionButton styling</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'Base/General/NewAudioButton',
|
||
|
|
component: AudioBtn,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'Updated audio playback trigger styled with `ActionButton`. Behaves like the legacy audio button but adopts the new button design system.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
nextjs: {
|
||
|
|
appDirectory: true,
|
||
|
|
navigation: {
|
||
|
|
pathname: '/apps/demo-app/text-to-audio',
|
||
|
|
params: { appId: 'demo-app' },
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
id: {
|
||
|
|
control: 'text',
|
||
|
|
description: 'Message identifier used by the audio request.',
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
control: 'text',
|
||
|
|
description: 'Prompt or response text that will be converted to speech.',
|
||
|
|
},
|
||
|
|
voice: {
|
||
|
|
control: 'text',
|
||
|
|
description: 'Voice profile for the generated speech.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} satisfies Meta<typeof AudioBtn>
|
||
|
|
|
||
|
|
export default meta
|
||
|
|
type Story = StoryObj<typeof meta>
|
||
|
|
|
||
|
|
export const Default: Story = {
|
||
|
|
render: args => <StoryWrapper {...args} />,
|
||
|
|
args: {
|
||
|
|
id: 'message-1',
|
||
|
|
value: 'Listen to the latest assistant message.',
|
||
|
|
voice: 'alloy',
|
||
|
|
},
|
||
|
|
}
|