@flamingo-stack/openframe-frontend-core 0.0.684 → 0.0.685-2452.7452.1

package/src/stories/FaeLayoutV2.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+
+import { ChatInput } from '../components/chat/chat-input';
+import { ChatListEmptyState } from '../components/chat/chat-list-empty-state';
+import { ChatMessageList } from '../components/chat/chat-message-list';
+import { ChatListItem, ChatNavSidebar } from '../components/chat/chat-nav-sidebar';
+import { ChatTopNavigation } from '../components/chat/chat-top-navigation';
+import { MspOrganizationCard } from '../components/chat/msp-organization-card';
+import type { Message } from '../components/chat/types/message.types';
+import { OpenFrameLogo } from '../components/icons';
+import {
+  ChatPlusIcon,
+  ChatQuestionIcon,
+  ChatsIcon,
+  CheckCircleIcon,
+  ClockHistoryIcon,
+  DotsLoaderIcon,
+  HourglassClockIcon,
+  MessageIndicatorIcon,
+  UserCheckIcon,
+} from '../components/icons-v2-generated';
+import { Button } from '../components/ui/button';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
+
+const THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content: "I'll run a quick diagnostic to identify what's causing the performance issues.",
+    timestamp: at(47),
+  },
+];
+
+const CHATS = [
+  { id: '1', title: 'Slow Laptop', mark: <DotsLoaderIcon className="text-ods-accent" /> },
+  { id: '2', title: 'Forgot my password' },
+  { id: '3', title: 'Teams mic not working', mark: <HourglassClockIcon className="text-ods-accent" /> },
+  { id: '4', title: 'Email not syncing on phone', mark: <MessageIndicatorIcon className="text-ods-accent" /> },
+  { id: '5', title: 'Blue screen on startup', resolved: true },
+];
+
+function Layout({ withChats, withThread }: { withChats: boolean; withThread: boolean }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  return (
+    <div data-surface="brand-tinted" className="flex h-[800px] w-[1024px] border-t border-ods-border bg-ods-bg">
+      {sidebarOpen && (
+        <ChatNavSidebar
+          logo={
+            <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
+              <OpenFrameLogo
+                className="size-6"
+                lowerPathColor="var(--ods-open-yellow-base)"
+                upperPathColor="var(--color-text-primary)"
+              />
+              <span className="text-wordmark">OpenFrame</span>
+            </span>
+          }
+          items={[
+            { id: 'new', label: 'Start New Chat', icon: <ChatPlusIcon />, active: !withThread },
+            { id: 'archive', label: 'Chat Archive', icon: <ClockHistoryIcon /> },
+            { id: 'guide', label: 'What to ask Fae?', icon: <ChatQuestionIcon /> },
+          ]}
+          sectionLabel="Your Current Chats"
+          footer={<MspOrganizationCard variant="footer" name="TechFlow Solutions" onOpenWebsite={() => undefined} />}
+        >
+          {withChats ? (
+            CHATS.map((chat, i) => (
+              <ChatListItem
+                key={chat.id}
+                title={chat.title}
+                subtitle="Ticket Number: 1932"
+                active={withThread && i === 0}
+                leading={chat.resolved ? <CheckCircleIcon className="text-ods-success" /> : undefined}
+                trailing={chat.mark}
+              />
+            ))
+          ) : (
+            <ChatListEmptyState
+              icon={<ChatsIcon size={24} />}
+              title="No Current Chats"
+              description="Your conversations will show here"
+            />
+          )}
+        </ChatNavSidebar>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <ChatTopNavigation
+          name="Fae"
+          subtitle="Your AI Assistant"
+          sidebarOpen={sidebarOpen}
+          onToggleSidebar={() => setSidebarOpen(open => !open)}
+          onOpenSettings={() => undefined}
+          actions={
+            <Button variant="outline" size="small" leftIcon={<UserCheckIcon />}>
+              Request a Technician
+            </Button>
+          }
+        />
+        <main className="ods-glow-accent-corner flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)] pt-[var(--spacing-system-mf)]">
+          {withThread ? (
+            <ChatMessageList
+              messages={THREAD}
+              assistantType="fae"
+              approvalVariant="client"
+              appearance="v2"
+              fullWidth
+              contentClassName="px-0"
+              autoScroll={false}
+            />
+          ) : (
+            <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-[var(--spacing-system-l)]">
+              <div className="flex flex-col gap-[var(--spacing-system-xsf)] text-center">
+                <h1 className="text-ods-text-primary text-h2">Hi, I&apos;m your IT assistant</h1>
+                <p className="text-ods-text-secondary text-h4">
+                  Having trouble with your computer, email, Wi-Fi, or software? Just describe it.
+                </p>
+              </div>
+            </div>
+          )}
+          <ChatInput fullWidth appearance="v2" placeholder="Enter your request here..." />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Layout> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Layout v2',
+  component: Layout,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Layout>;
+
+export const StartEmpty: Story = { args: { withChats: false, withThread: false } };
+export const ChatOpen: Story = { args: { withChats: true, withThread: true } };

package/src/stories/FaeOnboardingV2.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { OnboardingCarousel, type OnboardingCarouselStep } from '../components/chat/onboarding-carousel';
+import { PoweredByFlamingo } from '../components/features/auth/auth-branding';
+import { OpenFrameLogo } from '../components/icons';
+import { ClockCheckIcon, MessagesIcon, UserCheckIcon } from '../components/icons-v2-generated';
+import { SquareAvatar } from '../components/ui/square-avatar';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const STEPS: OnboardingCarouselStep[] = [
+  {
+    id: 'meet',
+    icon: <SquareAvatar variant="round" sizePx={28} fallback="Fae" />,
+    title: 'Meet Your AI IT Assistant',
+    description: 'Fixes what it can right away,\nand hands off the rest to your technicians.',
+  },
+  {
+    id: 'type',
+    icon: <MessagesIcon size={28} />,
+    title: "Type what's going on.",
+    description:
+      "Your assistant troubleshoots first.\nAnything it can't solve goes to your technician with full context.",
+  },
+  {
+    id: 'human',
+    icon: <UserCheckIcon size={28} />,
+    title: 'Need a human?',
+    description: 'Skip the chat and create a ticket.\nIt goes straight to your technicians.',
+  },
+  {
+    id: 'anytime',
+    icon: <ClockCheckIcon size={28} />,
+    title: 'Ask anything, anytime.',
+    description: 'No hold music, no queue.\nJust immediate help.',
+  },
+];
+
+function Screen() {
+  return (
+    <div className="flex h-[800px] w-[1024px] flex-col items-center gap-[calc(2*var(--spacing-system-xlf))] bg-ods-bg px-[calc(2*var(--spacing-system-xlf))] py-[var(--spacing-system-xl)]">
+      <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
+        <OpenFrameLogo
+          className="size-6"
+          lowerPathColor="var(--ods-open-yellow-base)"
+          upperPathColor="var(--color-text-primary)"
+        />
+        <span className="text-wordmark">OpenFrame</span>
+      </span>
+      {/* The side cards run to the window edge, past the screen padding. */}
+      <div className="-mx-[calc(2*var(--spacing-system-xlf))] flex min-h-0 flex-1 self-stretch">
+        <OnboardingCarousel steps={STEPS} onComplete={() => undefined} />
+      </div>
+      <PoweredByFlamingo />
+    </div>
+  );
+}
+
+const meta: Meta<typeof Screen> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Onboarding v2',
+  component: Screen,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Screen>;
+
+export const Introduction: Story = {};

package/src/stories/FaeThreadV2.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { ChatInput } from '../components/chat/chat-input';
+import { ChatMessageList } from '../components/chat/chat-message-list';
+import type { ChatAppearance } from '../components/chat/types/chat.types';
+import type { Message } from '../components/chat/types/message.types';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
+
+// The "Admin joins" frame of the fae chat v2 escalation flow: a user request,
+// an escalation offer the user approved, the hand-off and join receipts, then
+// the technician's reply.
+const ESCALATION_THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content: 'Sorry, I can’t help with this problem',
+    timestamp: at(47),
+  },
+  { id: 'u2', role: 'user', name: 'John Smith', content: 'call the admin', timestamp: at(47) },
+  {
+    id: 'a2',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      {
+        type: 'escalation_offer',
+        status: 'approved',
+        resolvedByName: 'User',
+        data: {
+          offerId: 'offer-1',
+          text: 'Having issues with the AI assistant? This ticket can be handed off to a technician. Fae will no longer respond in this conversation. A technician will review the ticket and reply when available.',
+        },
+      },
+      { type: 'ticket_escalated', data: { ticketId: 't-1', reason: 'MANUAL' } },
+      {
+        type: 'error',
+        title: 'AI response error',
+        details: 'Something went wrong. Please try again.',
+      },
+    ],
+  },
+  {
+    id: 's1',
+    role: 'user',
+    authorType: 'system',
+    name: 'Michael Johnson joined the chat',
+    content: '',
+    timestamp: at(48),
+  },
+  {
+    id: 't1',
+    role: 'assistant',
+    name: 'Michael Johnson',
+    authorType: 'admin',
+    content: 'I’ll do it faster',
+    timestamp: at(48),
+  },
+  { id: 'u3', role: 'user', name: 'John Smith', content: 'Cool!', timestamp: at(48) },
+];
+
+const APPROVAL_THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content:
+      'I found that your C: drive is 89% full. I can clean up temporary files to free some space - may I proceed with clearing C:/temp?',
+    timestamp: at(47),
+  },
+  {
+    id: 'a2',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      {
+        type: 'approval_request',
+        status: 'pending',
+        data: {
+          requestId: 'req-1',
+          command: 'Remove-Item C:\\Temp\\* -Recurse',
+          explanation: 'Clears temporary files in C:\\Temp to free disk space.',
+        },
+        onApprove: () => undefined,
+        onReject: () => undefined,
+      },
+    ],
+  },
+];
+
+function Thread({
+  messages,
+  appearance,
+  handedOff,
+}: {
+  messages: Message[];
+  appearance: ChatAppearance;
+  handedOff?: boolean;
+}) {
+  return (
+    <div className="flex h-[720px] w-[728px] flex-col bg-ods-bg">
+      <ChatMessageList
+        messages={messages}
+        assistantType="fae"
+        approvalVariant="client"
+        appearance={appearance}
+        fullWidth
+        autoScroll={false}
+      />
+      <div className="px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+        <ChatInput
+          fullWidth
+          placeholder="Enter your request here..."
+          awaitingResponse={handedOff}
+          appearance={appearance}
+          awaitingTeam={[
+            { key: '1', name: 'Roman Smith' },
+            { key: '2', name: 'Ada Lin' },
+            { key: '3', name: 'Michael Johnson' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Thread> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Thread v2',
+  component: Thread,
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Thread>;
+
+export const EscalationV2: Story = { args: { messages: ESCALATION_THREAD, appearance: 'v2', handedOff: true } };
+export const EscalationClassic: Story = {
+  args: { messages: ESCALATION_THREAD, appearance: 'classic', handedOff: true },
+};
+
+const approvalCard = (id: string, status: 'approved' | 'rejected' | 'cancelled', resolvedByName: string) => ({
+  type: 'approval_request' as const,
+  status,
+  resolvedByName,
+  data: {
+    requestId: id,
+    command: 'Remove-Item C:\\Temp\\* -Recurse',
+    explanation: 'Clears temporary files in C:\\Temp.',
+  },
+});
+
+const APPROVAL_STATES_THREAD: Message[] = [
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      approvalCard('r1', 'approved', 'Michael Johnson'),
+      approvalCard('r2', 'rejected', 'Michael Johnson'),
+      approvalCard('r3', 'cancelled', 'Michael Johnson'),
+    ],
+  },
+];
+
+export const ApprovalV2: Story = { args: { messages: APPROVAL_THREAD, appearance: 'v2' } };
+
+export const ApprovalStatesV2: Story = { args: { messages: APPROVAL_STATES_THREAD, appearance: 'v2' } };

package/src/stories/fae-brand-decorator.tsx

@@ -0,0 +1,28 @@
+import type { Decorator } from '@storybook/nextjs-vite';
+import { useLayoutEffect, type ReactNode } from 'react';
+
+/**
+ * Renders a story in the Fae client's default brand. The chat app sets
+ * `data-app-type="flamingo"` on <html> before first paint, which points the
+ * accent tokens at flamingo pink; without it Storybook falls back to the
+ * OpenFrame yellow and a Fae screen shows two brand colours at once. Restores
+ * the previous value so the next story is unaffected.
+ */
+function FaeBrand({ children }: { children: ReactNode }) {
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const previous = root.getAttribute('data-app-type');
+    root.setAttribute('data-app-type', 'flamingo');
+    return () => {
+      if (previous === null) root.removeAttribute('data-app-type');
+      else root.setAttribute('data-app-type', previous);
+    };
+  }, []);
+  return <>{children}</>;
+}
+
+export const withFaeBrand: Decorator = Story => (
+  <FaeBrand>
+    <Story />
+  </FaeBrand>
+);

package/src/styles/ods-colors.css

@@ -407,6 +407,16 @@
   --color-focus-ring: #00ff00;
 }
 
+/* ===================================================================== */
+/* BRAND-TINTED SURFACE — the page background takes 2% of the accent.    */
+/* Figma's fae-background (#1a1719) and mingo-background (#171b1a) are   */
+/* exactly 2% of their brand over the base background. Resolved on the   */
+/* element, so it follows the theme and a runtime (tenant) accent.       */
+/* ===================================================================== */
+[data-surface='brand-tinted'] {
+  --color-bg: color-mix(in srgb, var(--color-accent-primary) 2%, var(--ods-system-greys-background));
+}
+
 /* ===================================================================== */
 /* PLATFORM OVERRIDES — brand/accent ONLY.                               */
 /* Reference `--ods-*` so they follow the active theme; never touch      */

package/src/styles/ods-effects.css

@@ -51,3 +51,16 @@
 .ods-shadow-glyph {
   filter: var(--ods-shadow-glyph);
 }
+
+/* The brand glow in the bottom-right corner of a chat surface (Fae chat v2):
+   the accent at 4% fading out over the whole surface (radial fill centred on
+   the corner, radii 100% × 103% as in the design). Written
+   on the class, not as a :root variable, so the accent resolves on the element
+   and follows a platform or runtime (tenant) accent set below the root. */
+.ods-glow-accent-corner {
+  background-image: radial-gradient(
+    100% 103% at 100% 100%,
+    color-mix(in srgb, var(--color-accent-primary) 4%, transparent) 0%,
+    color-mix(in srgb, var(--color-accent-primary) 0%, transparent) 100%
+  );
+}