${t('diagram.invalid_syntax')}
`);
- }
- }
- }, [code, t]);
-
- useEffect(() => {
- render();
- }, [code, render]);
-
- return code ? (
-
-
-
- ) : null;
-};
-
-interface DiagramRendererProps {
- code: string;
- handleMarkdownChange: (markdown: string) => void;
-}
-
-const DiagramRenderer: React.FC
- {/* The header above the diagram */}
- 
;
};
+// PreRenderer to skip
-
-
- {/* The drawing part of the diagram */}
-
-
-
-
- setViewMode('diagram')}>
-
- setViewMode('code')}>
-
-
-
-
- {/* When zooming */}
- {zoom && (
- <>
-
- setZoom(true)} />
-
-
-
- setZoom(false)}
- />
-
- );
-};
-
-export default DiagramRenderer;
diff --git a/packages/web/src/components/Markdown.tsx b/packages/web/src/components/Markdown.tsx
index e99042205..b4bd63268 100644
--- a/packages/web/src/components/Markdown.tsx
+++ b/packages/web/src/components/Markdown.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, memo } from 'react';
+import React, { useEffect, useMemo, useState, memo } from 'react';
import { BaseProps } from '../@types/common';
import { default as ReactMarkdown } from 'react-markdown';
import remarkGfm from 'remark-gfm';
@@ -35,6 +35,8 @@ import xmlDoc from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc';
import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
import { useLocation } from 'react-router-dom';
+import { MermaidWithToggle } from './Mermaid/MermaidWithToggle';
+
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('c', c);
SyntaxHighlighter.registerLanguage('cpp', cpp);
@@ -58,6 +60,9 @@ SyntaxHighlighter.registerLanguage('tsx', tsx);
SyntaxHighlighter.registerLanguage('xml-doc', xmlDoc);
SyntaxHighlighter.registerLanguage('yaml', yaml);
+// Re-export MermaidWithToggle for backward compatibility
+export { MermaidWithToggle };
+
type Props = BaseProps & {
children: string;
prefix?: string;
@@ -125,12 +130,39 @@ const ImageRenderer = (props: any) => {
return e.stopPropagation()}>
-
-
- )}
-
-
-
-
-
- tag for mermaid code blocks
+// This prevents the dark prose background from appearing around mermaid diagrams
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const PreRenderer = (props: any) => {
+ const { children } = props;
+
+ // Check if children is a code element with 'language-mermaid' class
+ if (React.isValidElement(children)) {
+ const childProps = children.props as { className?: string };
+ const className = childProps?.className || '';
+ if (className.includes('language-mermaid')) {
+ // Skip tag for mermaid - return children directly
+ return <>{children};
+ }
+ }
+
+ // For other code blocks, render normal tag
+ return {children};
+};
+
const CodeRenderer = memo(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(props: any) => {
const language = /language-(\w+)/.exec(props.className || '')?.[1];
const codeText = String(props.children).replace(/\n$/, '');
const isCodeBlock = codeText.includes('\n');
+
+ // Render Mermaid diagrams with toggle
+ // Use not-prose to prevent prose styles from affecting the diagram container
+ if (language === 'mermaid') {
+ return = ({
transcriptText,
- isCollapsed,
- onToggleCollapse,
}) => {
const { t } = useTranslation();
- const navigate = useNavigate();
const countdownIntervalRef = useRef(null);
const shouldGenerateRef = useRef(false);
+ // Modal state
+ const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
// Internal state management
- const [minutesStyle, setMinutesStyle] = useState('faq');
+ const [minutesStyle, setMinutesStyle] =
+ useState('summary');
const [customPrompt, setCustomPrompt] = useState('');
const [autoGenerate, setAutoGenerate] = useState(false);
const [generationFrequency, setGenerationFrequency] = useState(5);
@@ -50,6 +43,26 @@ const MeetingMinutesGeneration: React.FC = ({
const [generatedMinutes, setGeneratedMinutes] = useState('');
const [countdownSeconds, setCountdownSeconds] = useState(0);
+ // Diagram options for 'diagram' style
+ const [diagramOptions, setDiagramOptions] = useState([
+ 'mindmap',
+ ]);
+
+ // Toggle diagram option
+ const toggleDiagramOption = useCallback((option: DiagramOption) => {
+ setDiagramOptions((prev) => {
+ if (prev.includes(option)) {
+ // Don't allow removing the last option
+ if (prev.length === 1) {
+ return prev;
+ }
+ return prev.filter((o) => o !== option);
+ } else {
+ return [...prev, option];
+ }
+ });
+ }, []);
+
// Model selection
const { modelIds: availableModels, modelDisplayName } = MODELS;
const [modelId, setModelId] = useState(availableModels[0] || '');
@@ -65,7 +78,8 @@ const MeetingMinutesGeneration: React.FC = ({
autoGenerateSessionTimestamp,
setGeneratedMinutes,
() => {}, // Empty function for setLastProcessedTranscript
- () => {} // Empty function for setLastGeneratedTime
+ () => {}, // Empty function for setLastGeneratedTime
+ minutesStyle === 'diagram' ? diagramOptions : undefined
);
// Text existence check
@@ -73,6 +87,21 @@ const MeetingMinutesGeneration: React.FC = ({
return transcriptText.trim() !== '';
}, [transcriptText]);
+ // Get style label for display
+ const styleLabel = useMemo(() => {
+ const styleOptions: Record = {
+ summary: t('meetingMinutes.style_summary'),
+ detail: t('meetingMinutes.style_detail'),
+ faq: t('meetingMinutes.style_faq'),
+ transcription: t('meetingMinutes.style_transcription'),
+ diagram: t('meetingMinutes.style_diagram'),
+ newspaper: t('meetingMinutes.style_newspaper'),
+ whiteboard: t('meetingMinutes.style_whiteboard'),
+ custom: t('meetingMinutes.style_custom'),
+ };
+ return styleOptions[minutesStyle];
+ }, [minutesStyle, t]);
+
// Watch for generation signal and trigger generation
useEffect(() => {
if (
@@ -82,13 +111,18 @@ const MeetingMinutesGeneration: React.FC = ({
) {
if (!minutesLoading) {
shouldGenerateRef.current = false;
- generateMinutes(transcriptText, modelId, (status) => {
- if (status === 'success') {
- toast.success(t('meetingMinutes.generation_success'));
- } else if (status === 'error') {
- toast.error(t('meetingMinutes.generation_error'));
- }
- });
+ generateMinutes(
+ transcriptText,
+ modelId,
+ (status) => {
+ if (status === 'success') {
+ toast.success(t('meetingMinutes.generation_success'));
+ } else if (status === 'error') {
+ toast.error(t('meetingMinutes.generation_error'));
+ }
+ },
+ generatedMinutes
+ );
} else {
shouldGenerateRef.current = false;
}
@@ -101,6 +135,7 @@ const MeetingMinutesGeneration: React.FC = ({
generateMinutes,
modelId,
t,
+ generatedMinutes,
]);
// Auto-generation countdown setup
@@ -147,13 +182,18 @@ const MeetingMinutesGeneration: React.FC = ({
}
if (hasTranscriptText && !minutesLoading) {
- generateMinutes(transcriptText, modelId, (status) => {
- if (status === 'success') {
- toast.success(t('meetingMinutes.generation_success'));
- } else if (status === 'error') {
- toast.error(t('meetingMinutes.generation_error'));
- }
- });
+ generateMinutes(
+ transcriptText,
+ modelId,
+ (status) => {
+ if (status === 'success') {
+ toast.success(t('meetingMinutes.generation_success'));
+ } else if (status === 'error') {
+ toast.error(t('meetingMinutes.generation_error'));
+ }
+ },
+ generatedMinutes
+ );
}
}, [
hasTranscriptText,
@@ -164,6 +204,7 @@ const MeetingMinutesGeneration: React.FC = ({
t,
minutesStyle,
customPrompt,
+ generatedMinutes,
]);
// Clear minutes handler
@@ -171,181 +212,100 @@ const MeetingMinutesGeneration: React.FC = ({
clearMinutes();
}, [clearMinutes]);
+ // Get system prompt for preview
+ const getSystemPrompt = useCallback(
+ (
+ style: MeetingMinutesParams['style'],
+ customPromptOverride?: string,
+ diagramOptionsOverride?: DiagramOption[]
+ ) => {
+ const params: MeetingMinutesParams = {
+ style,
+ customPrompt: customPromptOverride || customPrompt,
+ diagramOptions: diagramOptionsOverride || diagramOptions,
+ };
+ return claudePrompter.meetingMinutesPrompt(params);
+ },
+ [customPrompt, diagramOptions]
+ );
+
return (
-
- {isCollapsed ? (
- // Collapsed UI
-
-
-
-
+
+ {/* Compact header with settings button and action buttons */}
+
+
+ setIsSettingsOpen(true)}>
+
+ {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content */}
+ setIsSettingsOpen(true)}
+ className="cursor-pointer text-sm text-gray-600">
+ {`${styleLabel} / ${modelDisplayName(modelId)}`}
+
+ {autoGenerate && countdownSeconds > 0 && (
+ // eslint-disable-next-line @shopify/jsx-no-hardcoded-content
+
+ {`(${t('meetingMinutes.next_generation')}${t('common.colon')} ${Math.floor(countdownSeconds / 60)}:${(countdownSeconds % 60).toString().padStart(2, '0')})`}
+
+ )}
- ) : (
- // Expanded UI
-
- {/* Header with collapse button */}
-
-
-
-
- {/* Meeting Minutes Configuration */}
-
-
-
-
-
-
-
-
-
-
-
- {minutesStyle === 'custom' && (
-
-
-
-
- )}
-
- {/* Auto-generation controls */}
-
- {
- navigate(
- `/edit?${queryString.stringify({
- content: generatedMinutes,
- })}`
- );
- }}>
-
-
-
-
- {generatedMinutes}
-
+
+ {generatedMinutes}
+ ) : (
+
+ {t('meetingMinutes.minutes_placeholder')}
+
+ )}
+
+
+
+ {/* Settings Modal */}
+ setIsSettingsOpen(false)}
+ minutesStyle={minutesStyle}
+ setMinutesStyle={setMinutesStyle}
+ modelId={modelId}
+ setModelId={setModelId}
+ availableModels={availableModels}
+ modelDisplayName={modelDisplayName}
+ customPrompt={customPrompt}
+ setCustomPrompt={setCustomPrompt}
+ diagramOptions={diagramOptions}
+ toggleDiagramOption={toggleDiagramOption}
+ autoGenerate={autoGenerate}
+ setAutoGenerate={setAutoGenerate}
+ generationFrequency={generationFrequency}
+ setGenerationFrequency={setGenerationFrequency}
+ getSystemPrompt={getSystemPrompt}
+ />
);
};
diff --git a/packages/web/src/components/MeetingMinutes/MeetingMinutesRealtimeTranslation.tsx b/packages/web/src/components/MeetingMinutes/MeetingMinutesRealtimeTranslation.tsx
index c414d62a2..410d78df3 100644
--- a/packages/web/src/components/MeetingMinutes/MeetingMinutesRealtimeTranslation.tsx
+++ b/packages/web/src/components/MeetingMinutes/MeetingMinutesRealtimeTranslation.tsx
@@ -8,18 +8,11 @@ import React, {
import { useTranslation } from 'react-i18next';
import { LanguageCode } from '@aws-sdk/client-transcribe-streaming';
import { Transcript } from 'generative-ai-use-cases';
-import Button from '../Button';
-import ButtonCopy from '../ButtonCopy';
-import ButtonSendToUseCase from '../ButtonSendToUseCase';
import Select from '../Select';
-import Switch from '../Switch';
-import RangeSlider from '../RangeSlider';
-import ExpandableField from '../ExpandableField';
import Textarea from '../Textarea';
-import ScreenAudioToggle from '../ScreenAudioToggle';
-import MicAudioToggle from '../MicAudioToggle';
import MeetingMinutesTranscriptSegment from './MeetingMinutesTranscriptSegment';
-import { PiStopCircleBold, PiMicrophoneBold } from 'react-icons/pi';
+import MeetingMinutesSettingsPanel from './MeetingMinutesSettingsPanel';
+import MeetingMinutesControlButtons from './MeetingMinutesControlButtons';
import useMicrophone from '../../hooks/useMicrophone';
import useScreenAudio from '../../hooks/useScreenAudio';
import useRealtimeTranslation from '../../hooks/useRealtimeTranslation';
@@ -652,20 +645,6 @@ const MeetingMinutesRealtimeTranslation: React.FC<
// Recording states
const isRecording = micRecording || screenRecording;
- // Calculate responsive transcript container height
- const getTranscriptHeight = useCallback(() => {
- const baseClasses =
- 'w-full overflow-y-auto rounded border border-black/30 p-1.5 min-h-64';
-
- if (isRecording) {
- // Recording: Settings hidden, more space available
- return `${baseClasses} max-h-72 sm:max-h-80 lg:max-h-[60vh]`;
- } else {
- // Not recording: Settings visible, less space available
- return `${baseClasses} max-h-56 sm:max-h-64 lg:max-h-[30vh]`;
- }
- }, [isRecording]);
-
// Clear function
const handleClear = useCallback(() => {
setRealtimeSegments([]);
@@ -764,220 +743,154 @@ const MeetingMinutesRealtimeTranslation: React.FC<
clearScreenTranscripts,
]);
+ // Stop transcription
+ const handleStopRecording = useCallback(() => {
+ stopMicTranscription();
+ stopScreenTranscription();
+ }, [stopMicTranscription, stopScreenTranscription]);
+
return (
-
- {/* Realtime Translation Content */}
-
-
-
- {isRecording ? (
-
- ) : (
-
- )}
-
- {!isRecording && (
-
-
+ {/* Settings Panel */}
+
+ {/* Translation-specific settings */}
+
+ {/* Languages */}
+
+
+
+ {translationType === 'bidirectional'
+ ? t('meetingMinutes.language_1')
+ : t('meetingMinutes.transcription_language')}
+
+
+
-
- {/* Language Selection and Translation Settings */}
- {!isRecording && (
-
-
- {/* Left column: Translation type and model */}
-
-
-
-
-
-
-
-
+ {/* Translation Type */}
+
+
+ {t('meetingMinutes.translation_type')}
+
+
+
+
+
- {/* Right column: Languages */}
- {realtimeTranslationEnabled && (
-
-
-
-
-
-
-
-
-
-
- )}
+ {/* Translation Model */}
+
+
+ {t('meetingMinutes.translation_model')}
+
+
+
- )}
+
{/* Translation Context - Only show when real-time translation is ON and recording */}
{realtimeTranslationEnabled && isRecording && (
-
-
-
- {t('translate.contextHelp')}
-
+
+
+ {t('translate.contextHelp')}
- {/* User-defined Context */}
-
-
- {/* System-generated Context */}
-