diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/mermaid-diagram/mermaid-diagram.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/mermaid-diagram/mermaid-diagram.tsx deleted file mode 100644 index a8420bf51..000000000 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/mermaid-diagram/mermaid-diagram.tsx +++ /dev/null @@ -1,158 +0,0 @@ -'use client' - -import { useCallback, useEffect, useRef, useState } from 'react' -import { AlertCircle } from 'lucide-react' -import mermaid from 'mermaid' -import { createLogger } from '@/lib/logs/console/logger' - -const logger = createLogger('MermaidDiagram') - -interface MermaidDiagramProps { - diagramText: string -} - -/** - * Renders mermaid diagrams with pan/zoom support - */ -export function MermaidDiagram({ diagramText }: MermaidDiagramProps) { - const [dataUrl, setDataUrl] = useState(null) - const [error, setError] = useState(null) - const [zoom, setZoom] = useState(0.6) - const [pan, setPan] = useState({ x: 0, y: 0 }) - const [isDragging, setIsDragging] = useState(false) - const dragStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 }) - const containerRef = useRef(null) - - const renderDiagram = useCallback(async () => { - if (!diagramText?.trim()) { - setError('No diagram text provided') - return - } - - try { - setError(null) - mermaid.initialize({ - startOnLoad: false, - theme: 'base', - securityLevel: 'loose', - fontFamily: 'system-ui, -apple-system, sans-serif', - fontSize: 14, - flowchart: { - useMaxWidth: false, - htmlLabels: true, - padding: 20, - nodeSpacing: 50, - rankSpacing: 60, - }, - themeVariables: { - primaryColor: '#dbeafe', - primaryTextColor: '#1e3a5f', - primaryBorderColor: '#3b82f6', - lineColor: '#64748b', - secondaryColor: '#fef3c7', - secondaryTextColor: '#92400e', - secondaryBorderColor: '#f59e0b', - tertiaryColor: '#d1fae5', - tertiaryTextColor: '#065f46', - tertiaryBorderColor: '#10b981', - background: '#ffffff', - mainBkg: '#dbeafe', - nodeBorder: '#3b82f6', - nodeTextColor: '#1e3a5f', - clusterBkg: '#f1f5f9', - clusterBorder: '#94a3b8', - titleColor: '#0f172a', - textColor: '#334155', - edgeLabelBackground: '#ffffff', - }, - }) - - const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 9)}` - // Replace \n with
for proper line breaks in labels - const processedText = diagramText.trim().replace(/\\n/g, '
') - const { svg } = await mermaid.render(id, processedText) - const encoded = btoa(unescape(encodeURIComponent(svg))) - setDataUrl(`data:image/svg+xml;base64,${encoded}`) - } catch (err) { - const msg = err instanceof Error ? err.message : 'Failed to render diagram' - logger.error('Mermaid render error', { error: msg }) - setError(msg) - } - }, [diagramText]) - - useEffect(() => { - renderDiagram() - }, [renderDiagram]) - - const handleWheel = useCallback((e: React.WheelEvent) => { - e.preventDefault() - const delta = e.deltaY > 0 ? 0.9 : 1.1 - setZoom((z) => Math.min(Math.max(z * delta, 0.1), 3)) - }, []) - - const handleMouseDown = useCallback( - (e: React.MouseEvent) => { - e.preventDefault() - setIsDragging(true) - dragStart.current = { x: e.clientX, y: e.clientY, panX: pan.x, panY: pan.y } - }, - [pan] - ) - - const handleMouseMove = useCallback( - (e: React.MouseEvent) => { - if (!isDragging) return - setPan({ - x: dragStart.current.panX + (e.clientX - dragStart.current.x), - y: dragStart.current.panY + (e.clientY - dragStart.current.y), - }) - }, - [isDragging] - ) - - const handleMouseUp = useCallback(() => setIsDragging(false), []) - - if (error) { - return ( -
- - {error} -
- ) - } - - if (!dataUrl) { - return ( -
- Rendering... -
- ) - } - - return ( -
- Mermaid diagram -
- ) -} diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx index 893f05e19..dad34e321 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx @@ -2,16 +2,12 @@ import { useEffect, useRef, useState } from 'react' import { Loader2 } from 'lucide-react' -import useDrivePicker from 'react-google-drive-picker' import { Button, Code } from '@/components/emcn' -import { GoogleDriveIcon } from '@/components/icons' import { ClientToolCallState } from '@/lib/copilot/tools/client/base-tool' import { getClientTool } from '@/lib/copilot/tools/client/manager' import { getRegisteredTools } from '@/lib/copilot/tools/client/registry' -import { getEnv } from '@/lib/core/config/env' import { CLASS_TOOL_METADATA, useCopilotStore } from '@/stores/panel/copilot/store' import type { CopilotToolCall } from '@/stores/panel/copilot/types' -import { MermaidDiagram } from '../mermaid-diagram/mermaid-diagram' interface ToolCallProps { toolCall?: CopilotToolCall @@ -351,7 +347,6 @@ function RunSkipButtons({ const [isProcessing, setIsProcessing] = useState(false) const [buttonsHidden, setButtonsHidden] = useState(false) const { setToolCallState } = useCopilotStore() - const [openPicker] = useDrivePicker() const instance = getClientTool(toolCall.id) const interruptDisplays = instance?.getInterruptDisplays?.() @@ -368,107 +363,8 @@ function RunSkipButtons({ } } - // const handleOpenDriveAccess = async () => { - // try { - // const providerId = 'google-drive' - // const credsRes = await fetch(`/api/auth/oauth/credentials?provider=${providerId}`) - // if (!credsRes.ok) return - // const credsData = await credsRes.json() - // const creds = Array.isArray(credsData.credentials) ? credsData.credentials : [] - // if (creds.length === 0) return - // const defaultCred = creds.find((c: any) => c.isDefault) || creds[0] - - // const tokenRes = await fetch('/api/auth/oauth/token', { - // method: 'POST', - // headers: { 'Content-Type': 'application/json' }, - // body: JSON.stringify({ credentialId: defaultCred.id }), - // }) - // if (!tokenRes.ok) return - // const { accessToken } = await tokenRes.json() - // if (!accessToken) return - - // const clientId = getEnv('NEXT_PUBLIC_GOOGLE_CLIENT_ID') || '' - // const apiKey = getEnv('NEXT_PUBLIC_GOOGLE_API_KEY') || '' - // const projectNumber = getEnv('NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER') || '' - - // openPicker({ - // clientId, - // developerKey: apiKey, - // viewId: 'DOCS', - // token: accessToken, - // showUploadView: true, - // showUploadFolders: true, - // supportDrives: true, - // multiselect: false, - // appId: projectNumber, - // setSelectFolderEnabled: false, - // callbackFunction: async (data) => { - // if (data.action === 'picked') { - // await onRun() - // } - // }, - // }) - // } catch {} - // } - if (buttonsHidden) return null - if (toolCall.name === 'gdrive_request_access' && toolCall.state === 'pending') { - return ( -
- - -
- ) - } - return (