@flamingo-stack/openframe-frontend-core 0.0.219 → 0.0.220-snapshot.20260602172647

package/src/stories/GuideWelcome.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { GuideWelcome } from '../components/chat/guide-welcome'
+import { GuideModeBanner } from '../components/chat/guide-mode-banner'
+import { MingoOnboardingCard } from '../components/chat/mingo-onboarding-card'
+import {
+  Rocket01Icon,
+  CompassIcon,
+  NewspaperIcon,
+} from '../components/icons-v2-generated'
+
+const ACTIONS = [
+  { id: 'recent', label: 'Recent', onClick: () => console.log('recent') },
+  { id: 'search', label: 'Search', onClick: () => console.log('search') },
+  { id: 'find', label: 'Find', onClick: () => console.log('find') },
+]
+
+// Quick actions are caller-provided (GuideWelcome ships no defaults); these
+// demonstrate the inline chips + the "⋯" overflow menu.
+const SAMPLE_QUICK_ACTIONS = [
+  { id: 'how-to-start', label: 'How to start' },
+  { id: 'connect-device', label: 'Connect device' },
+  { id: 'find-device', label: 'Find device' },
+  { id: 'remote-connection', label: 'Remote connection' },
+  { id: 'run-scripts', label: 'Run scripts' },
+  { id: 'device-software', label: 'Device software' },
+  { id: 'bulk-update', label: 'Bulk update' },
+]
+
+const SAMPLE_LIST = (
+  <div className="shrink-0 overflow-hidden rounded-md border border-ods-border">
+    <MingoOnboardingCard
+      icon={<Rocket01Icon size={16} />}
+      title="Product Releases"
+      slashCommand="/release-notes"
+      description="OpenFrame version releases, changelogs, and update notes"
+      actions={ACTIONS}
+    />
+    <MingoOnboardingCard
+      icon={<NewspaperIcon size={16} />}
+      title="Blog Posts"
+      slashCommand="/blogs"
+      description="Latest articles, guides, and announcements from the blog"
+      actions={ACTIONS}
+    />
+    <MingoOnboardingCard
+      icon={<CompassIcon size={16} />}
+      title="Onboarding Guides"
+      slashCommand="/getting-started"
+      description="Step-by-step guides to get started with OpenFrame"
+      actions={ACTIONS}
+    />
+  </div>
+)
+
+const meta: Meta<typeof GuideWelcome> = {
+  title: 'Chat/GuideWelcome',
+  component: GuideWelcome,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Figma node `7532:328214`. Guide-mode chat empty state — a guide-mode banner, a centred greeting sharing one scroll region with the slash-command onboarding list, and a pinned quick-action chip row (overflowing to a "⋯" menu). Content is configurable with OpenFrame defaults.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    quickActions: { control: false },
+    onQuickAction: { control: false },
+    children: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      // Mimic the narrow drawer panel: dark `ods-bg` surface (the guide content
+      // background), banner pinned at the top.
+      <div className="flex h-[760px] w-[440px] flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg">
+        <GuideModeBanner />
+        <div className="flex flex-1 min-h-0 flex-col p-4">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof GuideWelcome>
+
+/** Full guide-mode empty state with the slash-command list and quick actions. */
+export const Default: Story = {
+  args: {
+    quickActions: SAMPLE_QUICK_ACTIONS,
+    onQuickAction: (a) => console.log('quick action', a.id),
+    children: SAMPLE_LIST,
+  },
+}
+
+/** No slash commands available yet — greeting + quick actions only. */
+export const NoCommands: Story = {
+  args: {
+    quickActions: SAMPLE_QUICK_ACTIONS,
+    onQuickAction: (a) => console.log('quick action', a.id),
+  },
+}
+
+/** No quick actions supplied (the default) — the chip row is omitted entirely. */
+export const NoQuickActions: Story = {
+  args: {
+    children: SAMPLE_LIST,
+  },
+}
+
+/** Custom greeting copy. */
+export const CustomCopy: Story = {
+  args: {
+    title: 'Ask the Guide',
+    subtitle: 'A temporary session for exploring docs and tickets.',
+    quickActions: SAMPLE_QUICK_ACTIONS,
+    onQuickAction: (a) => console.log('quick action', a.id),
+    children: SAMPLE_LIST,
+  },
+}

package/src/stories/MingoChatModals.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import * as React from 'react'
+import {
+  RenameChatModal,
+  ArchiveChatModal,
+} from '../components/chat/mingo-chat-modals'
+
+const meta: Meta = {
+  title: 'Chat/MingoChatModals',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Rename Chat (Figma `7592:225962`) and Archive Chat (Figma `7592:226181`) modals, triggered from the chat header `⋯` and the dialog-history row menus. Built on `ModalV2` (Azeret Mono title, p-40 / gap-24, in-house overlay).',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[100dvh] bg-ods-bg">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj
+
+/** Rename Chat — input seeded with the current name, Cancel + Save. */
+export const Rename: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(true)
+    return (
+      <>
+        <button
+          type="button"
+          className="m-8 rounded-md bg-ods-accent px-4 py-2 text-h3 text-ods-text-on-accent"
+          onClick={() => setOpen(true)}
+        >
+          Open Rename modal
+        </button>
+        <RenameChatModal
+          isOpen={open}
+          initialName="Troubleshooting Exchange Online connection issues"
+          onClose={() => setOpen(false)}
+          onSave={(name) => {
+            console.log('save', name)
+            setOpen(false)
+          }}
+        />
+      </>
+    )
+  },
+}
+
+/** Archive Chat — confirmation with a destructive red action. */
+export const Archive: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(true)
+    return (
+      <>
+        <button
+          type="button"
+          className="m-8 rounded-md bg-ods-accent px-4 py-2 text-h3 text-ods-text-on-accent"
+          onClick={() => setOpen(true)}
+        >
+          Open Archive modal
+        </button>
+        <ArchiveChatModal
+          isOpen={open}
+          onClose={() => setOpen(false)}
+          onConfirm={() => {
+            console.log('archive confirmed')
+            setOpen(false)
+          }}
+        />
+      </>
+    )
+  },
+}

package/src/stories/MingoWelcome.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { MingoWelcome } from '../components/chat/mingo-welcome'
+import { MingoChatHistory } from '../components/chat/mingo-chat-history'
+
+const SAMPLE_HISTORY = (
+  <MingoChatHistory
+    dialogs={[
+      { id: 'd1', title: 'PowerShell script for bulk user creation', unreadMessagesCount: 1 },
+      { id: 'd2', title: 'Setting up automated backup verification', unreadMessagesCount: 1 },
+      { id: 'd3', title: 'Network segmentation best practices for client' },
+      { id: 'd4', title: 'Creating GPO for software deployment' },
+      { id: 'd5', title: 'WSUS patching strategy optimization' },
+      { id: 'd6', title: 'Analyzing unusual network traffic patterns' },
+    ]}
+    onSelectDialog={(id) => console.log('select', id)}
+    onRequestRename={(d) => console.log('request rename', d.id)}
+    onRequestArchive={(d) => console.log('request archive', d.id)}
+  />
+)
+
+const meta: Meta<typeof MingoWelcome> = {
+  title: 'Chat/MingoWelcome',
+  component: MingoWelcome,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Figma node `7532:222444`. Default (Mingo-mode) chat empty state — a vertically-centred greeting, a 2-up capability grid, an optional "New to OpenFrame?" Guide-chat promo, and a quick-action chip row. Content is configurable with OpenFrame defaults; the only wired action is "Start Guide Chat" (`onStartGuideChat`).',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: false },
+    subtitle: { control: false },
+    featureCards: { control: false },
+    promo: { control: false },
+    quickActions: { control: false },
+    onStartGuideChat: { control: false },
+    hasExistingChats: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      // Mimic the narrow drawer panel the empty state lives in: fixed height so
+      // the greeting's `flex-1` centring and the pinned grid/chips read
+      // correctly.
+      <div className="flex h-[760px] w-[440px] flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg px-5 py-4">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MingoWelcome>
+
+/** Full default state with the Guide CTA wired (promo card + yellow chip). */
+export const Default: Story = {
+  args: {
+    onStartGuideChat: () => console.log('switch to guide mode'),
+  },
+}
+
+/** Greeting personalised with a first name. */
+export const WithUserName: Story = {
+  args: {
+    userName: 'Grace',
+    onStartGuideChat: () => console.log('switch to guide mode'),
+  },
+}
+
+/** Guide mode not configured → the promo card and "Start Guide Chat" chip are
+ *  suppressed (no dead-end CTA). */
+export const WithoutGuide: Story = {
+  args: {},
+}
+
+/** Extra quick-action chips appended after the built-in Guide chip. */
+export const WithQuickActions: Story = {
+  args: {
+    onStartGuideChat: () => console.log('switch to guide mode'),
+    quickActions: [
+      { id: 'weekly', label: 'Weekly Log Summary' },
+      { id: 'more', label: '…' },
+    ],
+  },
+}
+
+/** Returning user (`hasExistingChats`) — the "New to OpenFrame?" notification
+ *  is hidden and the "Start Guide Chat" chip drops to the muted outline style. */
+export const ReturningUser: Story = {
+  args: {
+    onStartGuideChat: () => console.log('switch to guide mode'),
+    hasExistingChats: true,
+    dialogHistory: SAMPLE_HISTORY,
+    quickActions: [
+      { id: 'weekly', label: 'Weekly Log Summary' },
+      { id: 'more', label: '…' },
+    ],
+  },
+}
+
+/** Wide panel (e.g. in-layout / desktop) — the grid columns read roomy. */
+export const Wide: Story = {
+  args: {
+    onStartGuideChat: () => console.log('switch to guide mode'),
+    quickActions: [
+      { id: 'weekly', label: 'Weekly Log Summary' },
+      { id: 'more', label: '…' },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-[760px] w-[960px] flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg px-5 py-4">
+        <Story />
+      </div>
+    ),
+  ],
+}