(validatedCode);
+ const { isDark, colors } = useTheme();
+ const styles = createStyles(colors);
+
+ const updateContent = useCallback(
+ (newCode: string) => {
+ const validatedNewCode = validateGanttChartCode(newCode);
+ if (validatedNewCode === currentCode) {
+ return;
+ }
+ if (webViewRef.current) {
+ const escapedCode = validatedNewCode
+ .replace(/`/g, '\\`')
+ .replace(/\$/g, '\\$');
+ const jsCode = `
+ (function() {
+ try {
+ const container = document.getElementById('mermaid-container');
+ const displayContainer = document.getElementById('mermaid-display');
+ if (!container || !displayContainer) return;
+
+ const newCodeContent = \`${escapedCode}\`;
+
+ // Store the new code in a hidden container
+ container.textContent = newCodeContent;
+ container.style.display = 'none';
+
+ // Try to parse and validate
+ window.mermaid.parse(newCodeContent, { suppressErrors: true })
+ .then((result) => {
+ if (result) {
+ // Valid syntax, try to render
+ return window.mermaid.render('mermaid-graph', newCodeContent);
+ } else {
+ // Don't update display, schedule error notification after 1 second
+ if (window.notifyRN) {
+ window.notifyRN('update_rendered', { success: false }, 1000);
+ }
+ // Terminate the promise chain
+ return Promise.reject(new Error('Parse failed'));
+ }
+ })
+ .then((result) => {
+ // Rendering successful, update display
+ if (result && result.svg) {
+ displayContainer.innerHTML = result.svg;
+ window.lastValidCode = newCodeContent;
+ if (window.notifyRN) {
+ // Cancel any pending error notifications and immediately notify success
+ window.notifyRN('update_rendered', { success: true }, 0);
+ }
+ }
+ })
+ .catch((error) => {
+ // Schedule error notification after 1 second
+ if (window.notifyRN) {
+ window.notifyRN('update_rendered', { success: false, error: error.message }, 1000);
+ }
+ });
+ } catch (error) {
+ // Don't update display, schedule error notification after 1 second
+ if (window.notifyRN) {
+ window.notifyRN('update_rendered', { success: false, error: error.message }, 1000);
+ }
+ }
+ })();
+ true;
+ `;
+
+ webViewRef.current.injectJavaScript(jsCode);
+ }
+
+ setCurrentCode(validatedNewCode);
+ },
+ [currentCode]
+ );
+
+ useEffect(() => {
+ if (code !== currentCode) {
+ updateContent(code);
+ }
+ }, [code, currentCode, updateContent]);
+
+ useImperativeHandle(
+ ref,
+ () => ({
+ updateContent,
+ }),
+ [updateContent]
+ );
+
+ const htmlContent = useMemo(() => {
+ return `
+
+
+
+
+
+
+
+
+
+ ${initialCodeRef.current}
+
+
+
+
+
+`;
+ }, [isDark]);
+
+ const handleMessage = useCallback((event: WebViewMessageEvent) => {
+ try {
+ const message = JSON.parse(event.nativeEvent.data);
+
+ // Handle console logs from WebView
+ if (message.type === 'console_log') {
+ console.log('[WebView]', message.message);
+ return;
+ }
+
+ if (message.type === 'rendered' || message.type === 'update_rendered') {
+ setHasError(!message.success);
+ }
+ } catch (error) {
+ console.log('[WebView] Raw message:', event.nativeEvent.data);
+ }
+ }, []);
+
+ return (
+ <>
+ setShowFullScreen(true)}
+ activeOpacity={0.8}
+ style={styles.container}>
+
+
+ {hasError && (
+
+ {'Invalid Mermaid syntax'}
+
+ )}
+
+
+ setShowFullScreen(false)}
+ code={currentCode}
+ />
+
+ );
+ }
+);
+
+const createStyles = (colors: ColorScheme) =>
+ StyleSheet.create({
+ container: {
+ position: 'relative' as const,
+ },
+ webView: {
+ height: 380,
+ backgroundColor: 'transparent' as const,
+ },
+ loadingContainer: {
+ position: 'absolute' as const,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ justifyContent: 'center' as const,
+ alignItems: 'center' as const,
+ backgroundColor: colors.input,
+ },
+ loadingText: {
+ marginTop: 10,
+ fontSize: 14,
+ color: colors.text,
+ },
+ });
+
+export default MermaidRenderer;
diff --git a/react-native/src/settings/SettingsScreen.tsx b/react-native/src/settings/SettingsScreen.tsx
index 5afc0729..c563991e 100644
--- a/react-native/src/settings/SettingsScreen.tsx
+++ b/react-native/src/settings/SettingsScreen.tsx
@@ -135,6 +135,7 @@ function SettingsScreen(): React.JSX.Element {
const { sendEvent } = useAppContext();
const sendEventRef = useRef(sendEvent);
const openAICompatConfigsRef = useRef(openAICompatConfigs);
+ const bedrockConfigModeRef = useRef(bedrockConfigMode);
// Handle OpenAI Compatible configs change
const handleOpenAICompatConfigsChange = useCallback(
@@ -166,7 +167,7 @@ function SettingsScreen(): React.JSX.Element {
};
if (shouldFetchBedrock) {
bedrockResponse =
- bedrockConfigMode === 'bedrock'
+ bedrockConfigModeRef.current === 'bedrock'
? await requestAllModelsByBedrockAPI()
: await requestAllModels();
addBedrockPrefixToDeepseekModels(bedrockResponse.textModel);
@@ -250,7 +251,7 @@ function SettingsScreen(): React.JSX.Element {
});
}
},
- [bedrockConfigMode, textModels, imageModels]
+ [textModels, imageModels]
);
const fetchAndSetModelNamesRef = useRef(fetchAndSetModelNames);
@@ -331,6 +332,7 @@ function SettingsScreen(): React.JSX.Element {
}, [openAICompatConfigs]);
useEffect(() => {
+ bedrockConfigModeRef.current = bedrockConfigMode;
if (bedrockConfigMode === getBedrockConfigMode()) {
return;
}
diff --git a/react-native/src/storage/Constants.ts b/react-native/src/storage/Constants.ts
index 85cbaf77..282ede55 100644
--- a/react-native/src/storage/Constants.ts
+++ b/react-native/src/storage/Constants.ts
@@ -67,7 +67,9 @@ export const DeepSeekModels = [
export const BedrockThinkingModels = [
'Claude 3.7 Sonnet',
'Claude Sonnet 4',
+ 'Claude Sonnet 4.5',
'Claude Opus 4',
+ 'Claude Opus 4.1',
];
export const BedrockVoiceModels = ['Nova Sonic'];
+ 
+ 
+ 
+