import React from 'react';
import { Meta, Story } from '@storybook/react';
import CompletionProviderStatus, { Props } from './CompletionProviderStatus';
import './CompletionProviderStatus.css';
// Import the actual component for the live examples
import I18nWrapper from '../../I18nWrapper';
// Create a mock I18n provider instead of trying to replace useTranslation
const MockI18nProvider = ({ children }: { children: React.ReactNode }) => {
// We'll create a wrapper component that provides the translation context
return
{children}
;
};
// Mock wrapper that also provides example tooltips
const MockI18nWrapper = ({ children, status }: { children: React.ReactNode, status?: string }) => {
return (
);
};
// Helper function to get status messages
const getStatusMessage = (status: string): string => {
switch (status) {
case 'major_outage':
return 'Mistral service is completely down. Please try again later.';
case 'partial_outage':
return 'Anthropic service is experiencing significant disruptions.';
case 'degraded_performance':
return 'OpenAI service is responding slower than usual.';
default:
return 'The service is currently experiencing issues.';
}
};
const meta: Meta = {
title: 'Completion Provider Status',
component: CompletionProviderStatus as React.ComponentType,
parameters: {
layout: 'centered',
controls: { expanded: true },
},
};
// Add real examples of the component for reference
export const LiveExample_OpenAI_DegradedPerformance = () => (
);
export default meta;
// Status container to add some context around the icon
const StatusContainer = ({ status, children }: { status: string, children: React.ReactNode }) => (
{status}
{children}
← Hover to see message
);
// Stories for each status type - we'll create visual examples instead of using the component
export const AllStatusTypes = () => (
Status Alert Types
Each alert has a different icon and color based on severity.
i
"OpenAI service is responding slower than usual."
⚠️
"Anthropic service is experiencing significant disruptions."
⚠️
"Mistral service is completely down. Please try again later."
);
// Individual stories for each status using visual examples
export const DegradedPerformance = () => (
i
"OpenAI service is responding slower than usual."
);
export const PartialOutage = () => (
⚠️
"Anthropic service is experiencing significant disruptions."
);
export const MajorOutage = () => (
⚠️
"Mistral service is completely down. Please try again later."
);
// All statuses for each provider
export const AllProvidersWithDifferentStatuses = () => (