chore: add more stories (#27403)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-10-29 14:33:43 +08:00
parent 23b49b8304
commit f092bc1912
100 changed files with 6144 additions and 30 deletions
--- a/web/app/components/base/markdown-blocks/code-block.stories.tsx
+++ b/web/app/components/base/markdown-blocks/code-block.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import CodeBlock from './code-block'
+
+const SAMPLE_CODE = `const greet = (name: string) => {
+  return \`Hello, \${name}\`
+}
+
+console.log(greet('Dify'))`
+
+const CodeBlockDemo = ({
+  language = 'typescript',
+}: {
+  language?: string
+}) => {
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Code block</div>
+      <CodeBlock
+        className={`language-${language}`}
+      >
+        {SAMPLE_CODE}
+      </CodeBlock>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Display/CodeBlock',
+  component: CodeBlockDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Syntax highlighted code block with copy button and SVG toggle support.',
+      },
+    },
+  },
+  argTypes: {
+    language: {
+      control: 'radio',
+      options: ['typescript', 'json', 'mermaid'],
+    },
+  },
+  args: {
+    language: 'typescript',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CodeBlockDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const Mermaid: Story = {
+  args: {
+    language: 'mermaid',
+  },
+  render: ({ language }) => (
+    <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <CodeBlock className={`language-${language}`}>
+        {`graph TD
+  Start --> Decision{User message?}
+  Decision -->|Tool| ToolCall[Call web search]
+  Decision -->|Respond| Answer[Compose draft]
+`}
+      </CodeBlock>
+    </div>
+  ),
+}
--- a/web/app/components/base/markdown-blocks/think-block.stories.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import ThinkBlock from './think-block'
+import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
+
+const THOUGHT_TEXT = `
+Gather docs from knowledge base.
+Score snippets against query.
+[ENDTHINKFLAG]
+`
+
+const ThinkBlockDemo = ({
+  responding = false,
+}: {
+  responding?: boolean
+}) => {
+  const [isResponding, setIsResponding] = useState(responding)
+
+  return (
+    <ChatContextProvider
+      config={undefined}
+      isResponding={isResponding}
+      chatList={[]}
+      showPromptLog={false}
+      questionIcon={undefined}
+      answerIcon={undefined}
+      onSend={undefined}
+      onRegenerate={undefined}
+      onAnnotationEdited={undefined}
+      onAnnotationAdded={undefined}
+      onAnnotationRemoved={undefined}
+      onFeedback={undefined}
+    >
+      <div className="flex w-full max-w-xl flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+        <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+          <span>Think block</span>
+          <button
+            type="button"
+            className="rounded-md border border-divider-subtle bg-background-default px-3 py-1 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+            onClick={() => setIsResponding(prev => !prev)}
+          >
+            {isResponding ? 'Mark complete' : 'Simulate thinking'}
+          </button>
+        </div>
+        <ThinkBlock data-think>
+          <pre className="whitespace-pre-wrap text-sm text-text-secondary">
+            {THOUGHT_TEXT}
+          </pre>
+        </ThinkBlock>
+      </div>
+    </ChatContextProvider>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Display/ThinkBlock',
+  component: ThinkBlockDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Expandable chain-of-thought block used in chat responses. Toggles between “thinking” and completed states.',
+      },
+    },
+  },
+  argTypes: {
+    responding: { control: 'boolean' },
+  },
+  args: {
+    responding: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ThinkBlockDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}