// ArtifactSystem.stories.tsx
import React, { useEffect } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ArtifactProvider, useArtifact } from './context/ArtifactContext';
import ArtifactHandler from './components/ArtifactHandler/ArtifactHandler';
import ArtifactDrawer from './components/ArtifactDrawer/ArtifactDrawer';
import { ArtifactAPIBridge } from './utils/ArtifactAPI';
import Chat from '../Chat/Chat';
import {
Message,
Memori,
Tenant,
} from '@memori.ai/memori-api-client/dist/types';
import { sanitizeText } from '../../helpers/sanitizer';
import { ArtifactData } from './types/artifact.types';
// Note: Window.MemoriArtifactAPI types are defined in MemoriWidget.tsx
// Mock data for Chat component
const mockMemori: Memori = {
memoriID: 'test-memori-id',
name: 'Test Memori',
culture: 'en-US',
coverURL: '',
enableBoardOfExperts: false,
} as Memori;
const mockTenant: Tenant = {
name: 'test-tenant',
} as Tenant;
// Mock functions for Chat component
const mockPushMessage = (message: Message) => {
console.log('Push message:', message);
};
const mockSimulateUserPrompt = (text: string, translatedText?: string) => {
console.log('Simulate user prompt:', text, translatedText);
};
const mockOnChangeUserMessage = (userMessage: string) => {
console.log('Change user message:', userMessage);
};
const mockSendMessage = (msg: string, media?: any[]) => {
console.log('Send message:', msg, media);
};
const mockSetEnableFocusChatInput = (enableFocusChatInput: boolean) => {
console.log('Set enable focus chat input:', enableFocusChatInput);
};
const mockStopAudio = () => {
console.log('Stop audio');
};
const mockStartListening = () => {
console.log('Start listening');
};
const mockStopListening = () => {
console.log('Stop listening');
};
const mockSetSendOnEnter = (sendOnEnter: 'keypress' | 'click') => {
console.log('Set send on enter:', sendOnEnter);
};
const mockSetAttachmentsMenuOpen = (attachmentsMenuOpen: 'link' | 'media') => {
console.log('Set attachments menu open:', attachmentsMenuOpen);
};
// Story decorator to provide context
const withArtifactProvider = (Story: any) => (
);
const meta: Meta = {
title: 'Artifact System',
component: ArtifactHandler,
decorators: [withArtifactProvider],
parameters: {
layout: 'fullscreen',
},
};
export default meta;
type Story = StoryObj;
// Sample artifacts for different mime types
const htmlArtifact = `L'utente mi chiede di generare una semplice pagina HTML. Userò il sistema Artifact per creare una pagina HTML pulita e semplice, seguendo le linee guida fornite.
Devo:
1. Usare il formato corretto: deve essere DOPO