);
});
CodeBlock.displayName = 'CodeBlock';
// Get time-based greeting
const getGreeting = () => {
const hour = new Date().getHours();
if (hour < 12) return 'Good morning';
if (hour < 18) return 'Good afternoon';
return 'Good evening';
};
// ============================================
// SUGGESTED QUESTIONS CONFIGURATION
// ============================================
// Each config has a pattern (regex) to match the URL path
// and an array of questions to show. Questions are checked
// in order - first matching pattern wins.
// ============================================
interface SuggestedQuestion {
label: string;
prompt: string;
}
interface QuestionConfig {
pattern: RegExp;
questions: SuggestedQuestion[];
}
const suggestedQuestionsConfig: QuestionConfig[] = [
// Message pages (events, commands, queries) - most specific first
{
pattern: /^\/docs\/(events|commands|queries)\/.+/,
questions: [
{ label: 'Which services publish this?', prompt: 'Who produces this message?' },
{ label: 'Which services subscribe to this?', prompt: 'Who consumes this message?' },
{ label: 'View the message schema', prompt: 'Show me the schema for this message' },
{ label: 'What breaks if this changes?', prompt: 'What services would be affected if this message changes?' },
],
},
// AsyncAPI specification page
{
pattern: /^\/docs\/services\/.+\/asyncapi\/.+/,
questions: [
{ label: 'Summarize this API', prompt: 'Help me understand this AsyncAPI specification' },
{ label: 'Show all channels', prompt: 'What channels are defined in this AsyncAPI spec?' },
{ label: 'How do I authenticate?', prompt: 'What authentication is required for this service?' },
{ label: 'What message formats are used?', prompt: 'What are the message formats and schemas?' },
],
},
// OpenAPI specification page
{
pattern: /^\/docs\/services\/.+\/spec\/.+/,
questions: [
{ label: 'Summarize this API', prompt: 'Help me understand this OpenAPI specification' },
{ label: 'Show all endpoints', prompt: 'What endpoints are available in this API?' },
{ label: 'How do I authenticate?', prompt: 'What authentication is required for this API?' },
{ label: 'What are the request & response formats?', prompt: 'What are the request and response formats?' },
],
},
// Services page
{
pattern: /^\/docs\/services\/.+/,
questions: [
{ label: 'Who owns this service?', prompt: 'Who owns this service and how do I contact them?' },
{
label: 'What does this service depend on?',
prompt: 'What are the upstream and downstream dependencies of this service?',
},
{ label: 'How do I integrate with this service?', prompt: 'How do I integrate with this service?' },
{ label: 'What messages are published and consumed?', prompt: 'What messages does this service produce and consume?' },
],
},
// Domains page
{
pattern: /^\/docs\/domains\/.+/,
questions: [
{ label: 'What services are in this domain?', prompt: 'What services belong to this domain?' },
{ label: 'What business capability is this?', prompt: 'What business capability does this domain represent?' },
{ label: 'What events come from this domain?', prompt: 'What events are published by this domain?' },
{ label: 'Who owns this domain?', prompt: 'Who owns this domain and how do I contact them?' },
],
},
// Systems page
{
pattern: /^\/(docs|visualiser|architecture)\/systems\/.+/,
questions: [
{ label: 'What services are in this system?', prompt: 'What services belong to this system?' },
{ label: 'What flows are in this system?', prompt: 'What flows belong to this system?' },
{
label: 'What does this system connect to?',
prompt: 'What systems, services, actors, or resources does this system connect to?',
},
{ label: 'Who owns this system?', prompt: 'Who owns this system and how do I contact them?' },
],
},
// Business Flows / Workflows (must be before general visualiser pattern)
{
pattern: /^\/(docs|visualiser)\/flows\/.+/,
questions: [
{
label: 'Walk me through this workflow',
prompt:
'Get the architecture diagram for this flow and walk me through each step of this business workflow. Explain what happens at each stage.',
},
{
label: 'What services are involved?',
prompt:
'Using the architecture diagram, list all the services involved in this workflow and explain their role in the process.',
},
{
label: 'What events does this trigger?',
prompt: 'What events are produced during this workflow? When are they triggered and who consumes them?',
},
{
label: 'What can go wrong?',
prompt:
'Analyze this workflow and identify potential failure points. What happens if a step fails? Are there retry mechanisms or compensating actions?',
},
],
},
// Visualizer page (/visualiser/*) - general fallback for other visualiser pages
{
pattern: /^\/visualiser\/.+/,
questions: [
{
label: 'Explain this architecture',
prompt:
'Get the architecture diagram for this resource and explain what I am looking at. Describe the key components and how they connect.',
},
{
label: 'What are the dependencies?',
prompt: 'Using the architecture diagram, show me what this resource depends on and what depends on it.',
},
{
label: 'How does data flow here?',
prompt: 'Get the architecture diagram and explain how data flows through this part of the system.',
},
{
label: 'What would break if this changes?',
prompt:
'Analyze the architecture diagram to identify what services or components would be affected if this resource changes.',
},
],
},
// Data Products page
{
pattern: /^\/(docs|visualiser)\/data-products\/.+/,
questions: [
{ label: 'What are the inputs and outputs?', prompt: 'What are the inputs and outputs of this data product?' },
{ label: 'Show me the data contracts', prompt: 'What are the data contracts for this data product?' },
{ label: 'Is this data product production ready?', prompt: 'Is this data product production ready?' },
{ label: 'What is the quality & SLA of this product?', prompt: 'What is the quality & SLA of this product?' },
{ label: 'Who owns this data product?', prompt: 'Who owns this data product and how do I contact them?' },
],
},
// Designs page
{
pattern: /^\/diagrams\/.+/,
questions: [
{ label: 'Tell me more about this diagram?', prompt: 'Tell me more about this diagram?' },
{ label: 'Help me understand this diagram', prompt: 'Help me understand this diagram' },
{ label: 'What is the context of this diagram?', prompt: 'What is the context of this diagram, what is it related to?' },
],
},
// Match /schemas with specType=graphql as query parameter
{
pattern: /^\/schemas.*[?&]specType=graphql/,
questions: [
{ label: 'Tell me more about this GraphQL schema', prompt: 'Tell me more about this GraphQL schema' },
{ label: 'What queries are available?', prompt: 'What queries are available in this GraphQL schema?' },
{ label: 'What mutations are available?', prompt: 'What mutations are available in this GraphQL schema?' },
{ label: 'Show me the types defined', prompt: 'Show me the types defined in this GraphQL schema' },
],
},
{
pattern: /^\/schemas.*[?&]specType=openapi/,
questions: [
{ label: 'Tell me more about this OpenAPI schema', prompt: 'Tell me more about this OpenAPI schema' },
{ label: 'Show me the endpoints available', prompt: 'Show me the endpoints available in this OpenAPI schema' },
{
label: 'Show me the request and response formats',
prompt: 'Show me the request and response formats in this OpenAPI schema',
},
],
},
{
pattern: /^\/schemas.*[?&]specType=asyncapi/,
questions: [
{ label: 'Tell me more about this AsyncAPI schema', prompt: 'Tell me more about this AsyncAPI schema' },
{ label: 'Show me the channels available', prompt: 'Show me the channels available in this AsyncAPI schema' },
{ label: 'Show me the messages available', prompt: 'Show me the messages available in this AsyncAPI schema' },
{
label: 'Show me the request and response formats',
prompt: 'Show me the request and response formats in this AsyncAPI schema',
},
],
},
{
pattern: /^\/schemas/,
questions: [
{ label: 'Tell me more about this schema?', prompt: 'Tell me more about this schema' },
{ label: 'Who producers or consumes this schema?', prompt: 'Who producers or consumes this schema?' },
{ label: 'What fields are required?', prompt: 'What fields are required for this schema?' },
{
label: 'Generate code using this schema',
prompt: 'Create a code example of using this schema, ask me for the programming language I want the example in.',
},
],
},
// Any other docs page
{
pattern: /^\/docs\/.+/,
questions: [
{ label: 'Tell me about this', prompt: 'Tell me more about this page' },
{ label: 'Who is responsible for this?', prompt: 'Who owns this resource?' },
{ label: 'What else is related to this?', prompt: 'What other resources are related to this?' },
],
},
// Default questions (fallback)
{
pattern: /.*/,
questions: [
{ label: 'What domains do we have?', prompt: 'What domains are in my catalog?' },
{ label: 'Show me all services', prompt: 'What services do I have?' },
{ label: 'What changed recently?', prompt: 'What are the most recent changes in the catalog?' },
{ label: 'How does data flow between services?', prompt: 'Show me how data flows between services' },
],
},
];
// Get suggested questions based on current URL path
const getSuggestedQuestions = (pathname: string): SuggestedQuestion[] => {
for (const config of suggestedQuestionsConfig) {
if (config.pattern.test(pathname)) {
return config.questions;
}
}
// Fallback to last config (default)
return suggestedQuestionsConfig[suggestedQuestionsConfig.length - 1].questions;
};
interface ChatPanelProps {
configured?: boolean;
isOpen: boolean;
onClose: () => void;
}
const PANEL_WIDTH = 400;
// Staggered fade-in animation styles (delays account for 420ms panel slide)
const fadeInStyles = {
header: {
animation: 'fadeIn 0.5s ease-out 0.3s both',
},
welcome: {
animation: 'fadeInUp 0.45s ease-out 0.12s both',
},
// Label and questions will be staggered individually in the component
questionsLabel: {
animation: 'fadeIn 0.5s ease-out 0.7s both',
},
getQuestionStyle: (index: number) => ({
animation: `fadeIn 0.5s ease-out ${0.22 + index * 0.07}s both`,
}),
inputFocus: {
animation: 'focusIn 0.6s ease-out 1.4s both',
},
// Follow-up suggestions animate with staggered fade-in-up
getFollowUpStyle: (index: number) => ({
animation: `fadeInUp 0.4s ease-out ${index * 0.1}s both`,
}),
};
// Preprocess markdown to fix common formatting issues
const preprocessMarkdown = (text: string): string => {
// Add newlines before headings if they're directly after text (no newline)
// This fixes cases like "some text.## Heading" → "some text.\n\n## Heading"
return text.replace(/([^\n])(#{1,6}\s)/g, '$1\n\n$2');
};
// Helper to extract text content from message parts
const getMessageContent = (message: { parts?: Array<{ type: string; text?: string }> }): string => {
if (!message.parts) return '';
const rawContent = message.parts
.filter((part): part is { type: 'text'; text: string } => part.type === 'text' && typeof part.text === 'string')
.map((part) => part.text)
.join('');
return preprocessMarkdown(rawContent);
};
// Helper to extract follow-up suggestions from message parts
const getFollowUpSuggestions = (message: { parts?: Array }): string[] => {
if (!message.parts) return [];
for (const part of message.parts) {
// AI SDK format: type is "tool-{toolName}" and result is in "output"
if (part.type === 'tool-suggestFollowUpQuestions' && part.state === 'output-available') {
const suggestions = part.output?.suggestions;
if (suggestions && Array.isArray(suggestions)) {
return suggestions;
}
}
}
return [];
};
// Helper to extract currently running tools from message parts
const getRunningTools = (message: { parts?: Array }): string[] => {
if (!message.parts) return [];
const runningTools: string[] = [];
for (const part of message.parts) {
// Tool parts have type like "tool-{toolName}" and state indicates progress
if (part.type?.startsWith('tool-') && part.state !== 'output-available') {
// Extract tool name from type (e.g., "tool-getServiceHealth" -> "getServiceHealth")
const toolName = part.type.replace('tool-', '');
// Skip the follow-up suggestions tool as it's internal
if (toolName !== 'suggestFollowUpQuestions') {
runningTools.push(toolName);
}
}
}
return runningTools;
};
// Helper to extract completed tools from message parts (for showing after completion)
const getCompletedTools = (message: { parts?: Array }): string[] => {
if (!message.parts) return [];
const completedTools: string[] = [];
for (const part of message.parts) {
// Tool parts have type like "tool-{toolName}" and state 'output-available' when done
if (part.type?.startsWith('tool-') && part.state === 'output-available') {
const toolName = part.type.replace('tool-', '');
// Skip internal tools
if (toolName !== 'suggestFollowUpQuestions') {
completedTools.push(toolName);
}
}
}
return completedTools;
};
// Skeleton loading component - memoized since it never changes
const SkeletonLoader = memo(({ label = 'Thinking it through…' }: { label?: string }) => (
{/* Follow-up suggestions - only show for last assistant message when not loading */}
{isLastMessage && followUpSuggestions.length > 0 && !isLoading && (