51 |
60 | {(localError || error) &&
62 | )
63 | }
64 |
65 | export default JSONEditor
66 |
--------------------------------------------------------------------------------
/src/renderer/src/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | type LoaderProps = {
2 | text?: string
3 | }
4 |
5 | export const Loader = (props: LoaderProps) => {
6 | return (
7 | {localError || error}
} 61 |
8 |
9 | {props?.text || 'loading...'}
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/renderer/src/components/LocalImage/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 |
3 | interface LocalImageProps {
4 | src: string
5 | alt: string
6 | className?: string
7 | }
8 |
9 | const LocalImage: React.FC
41 | {error}
42 |
43 | )
44 | }
45 |
46 | return (
47 | -
8 |
- Electron v{versions.electron} 9 |
- Chromium v{versions.chrome} 10 |
- Node v{versions.node} 11 |
7 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/renderer/src/components/icons/ToolIcons.tsx:
--------------------------------------------------------------------------------
1 | import { TbPencil, TbTrash } from 'react-icons/tb'
2 |
3 | export const EditIcon = () =>
19 | {tags.map((tag) => (
20 |
31 | ))}
32 | {selectedTags.length > 0 && (
33 |
42 | )}
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/AgentDirectoryPage/index.ts:
--------------------------------------------------------------------------------
1 | export { AgentDirectoryPage } from './AgentDirectoryPage'
2 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/McpServerSection/ConnectionTestResults.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { McpServerConfig } from '@/types/agent-chat'
4 | import { ConnectionResultsMap } from './types/mcpServer.types'
5 | import { generateConnectionSummary } from './utils/connectionTestUtils'
6 | import { preventModalClose } from './utils/eventUtils'
7 |
8 | interface ConnectionTestResultsProps {
9 | connectionResults: ConnectionResultsMap
10 | mcpServers: McpServerConfig[]
11 | onClearResults: () => void
12 | }
13 |
14 | /**
15 | * 接続テスト結果の概要を表示するコンポーネント
16 | */
17 | export const ConnectionTestResults: React.FC
36 |
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/McpServerSection/types/mcpServer.types.ts:
--------------------------------------------------------------------------------
1 | import { McpServerConfig } from '@/types/agent-chat'
2 |
3 | /**
4 | * 接続テスト結果の型定義
5 | */
6 | export interface ConnectionTestResult {
7 | success: boolean
8 | message: string
9 | testedAt: number
10 | details?: {
11 | toolCount?: number
12 | toolNames?: string[]
13 | error?: string
14 | errorDetails?: string
15 | startupTime?: number
16 | }
17 | }
18 |
19 | /**
20 | * 接続テスト結果のマップ型
21 | */
22 | export type ConnectionResultsMap = Record
37 | {t('Connection Status')}:{' '}
38 |
39 | {summary.success} {t('success')}
40 |
41 | {summary.failed > 0 && (
42 | <>
43 | {' / '}
44 |
45 | {summary.failed} {t('failed')}
46 |
47 |
48 | )}
49 | {' / '}
50 |
51 | {summary.total} {t('total')}
52 |
53 |
54 |
65 |
16 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/ToolsSection/components/AvailableToolsTab/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { ToolCategorySection } from './ToolCategorySection'
4 | import { AvailableToolsTabProps } from '../../types'
5 | import { preventEventPropagation } from '../../utils/eventUtils'
6 |
7 | /**
8 | * 利用可能なツールタブコンポーネント
9 | */
10 | export const AvailableToolsTab: React.FC
17 |
20 |
33 |
34 |
21 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/ToolsSection/hooks/useToolsFormatter.ts:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next'
2 | import { useMemo } from 'react'
3 | import { McpServerConfig } from '@/types/agent-chat'
4 | import { isMcpTool, getOriginalMcpToolName } from '@/types/tools'
5 |
6 | /**
7 | * ツール情報の表示に関連するフォーマット関数を提供するカスタムフック
8 | */
9 | export function useToolsFormatter(mcpServers: McpServerConfig[] = []) {
10 | const { t } = useTranslation()
11 |
12 | /**
13 | * 選択されたツールの詳細情報を取得
14 | */
15 | const getToolDescription = useMemo(
16 | () =>
17 | (toolName: string | null): string => {
18 | if (!toolName || !isMcpTool(toolName)) return ''
19 |
20 | // MCP ツールの場合のみ説明を返す
21 | return t('MCP tool from Model Context Protocol server')
22 | },
23 | [t]
24 | )
25 |
26 | /**
27 | * MCP ツールのサーバー情報を取得
28 | */
29 | const getMcpServerInfo = useMemo(
30 | () =>
31 | (toolName: string | null): string => {
32 | if (!toolName || !isMcpTool(toolName) || !mcpServers || mcpServers.length === 0) return ''
33 |
34 | const serverName = getOriginalMcpToolName(toolName)?.split('.')[0]
35 | const server = mcpServers.find((s) => s.name === serverName)
36 |
37 | return server
38 | ? `${t('From')}: ${server.name} (${server.description || 'MCP Server'})`
39 | : `${t('From')}: ${serverName || 'Unknown server'}`
40 | },
41 | [mcpServers, t]
42 | )
43 |
44 | return {
45 | getToolDescription,
46 | getMcpServerInfo
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/ToolsSection/index.tsx:
--------------------------------------------------------------------------------
1 | export { ToolsSection } from './ToolsSection'
2 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/AgentForm/ToolsSection/utils/eventUtils.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /**
4 | * クリックイベントの伝播を停止する
5 | */
6 | export const stopPropagation = (e: React.SyntheticEvent): void => {
7 | e.stopPropagation()
8 | }
9 |
10 | /**
11 | * クリックイベントとデフォルト動作を停止する
12 | */
13 | export const preventEventPropagation = (e: React.SyntheticEvent): void => {
14 | e.preventDefault()
15 | e.stopPropagation()
16 | }
17 |
18 | /**
19 | * マウスダウンとイベント伝播を停止する（ドラッグ防止用）
20 | */
21 | export const preventMouseDownPropagation = (e: React.MouseEvent): void => {
22 | e.preventDefault()
23 | e.stopPropagation()
24 | }
25 |
26 | /**
27 | * クリックイベント用のラッパー関数を作成
28 | * @param handler 実行するハンドラー関数
29 | * @param preventDefault デフォルト動作を防止するかどうか（デフォルト: false）
30 | */
31 | export const createClickHandler = {t('tools.description')}
22 | 23 | {/* ツールカテゴリセクションをループで表示 */} 24 | {categorizedTools.map((category) => ( 25 |
21 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/CodeInterpreter/ExecutionMetadata.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { FiClock, FiHash, FiFile } from 'react-icons/fi'
4 |
5 | interface ExecutionMetadataProps {
6 | executionTime: number
7 | exitCode: number
8 | fileCount: number
9 | }
10 |
11 | export const ExecutionMetadata: React.FC
22 |
49 |
50 |
29 | {/* Execution Time */}
30 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/CodeInterpreter/index.ts:
--------------------------------------------------------------------------------
1 | export { CodeInterpreterResult } from './CodeInterpreterResult'
2 | export { ExecutedCodeBlock } from './ExecutedCodeBlock'
3 | export { OutputDisplay } from './OutputDisplay'
4 | export { FileDisplay } from './FileDisplay'
5 | export { ErrorDisplay } from './ErrorDisplay'
6 | export { ExecutionMetadata } from './ExecutionMetadata'
7 | export { ImagePreview } from './ImagePreview'
8 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/ExecuteCommand/ExecuteCommandResult.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface ExecuteCommandResponse {
4 | success: boolean
5 | name: string
6 | message: string
7 | stdout?: string
8 | stderr?: string
9 | exitCode?: number
10 | processInfo?: {
11 | pid: number
12 | command: string
13 | detached: boolean
14 | }
15 | }
16 |
17 | export const ExecuteCommandResult: React.FC<{ response: ExecuteCommandResponse }> = ({
18 | response
19 | }) => {
20 | const removeAnsiCodes = (text: string) => {
21 | // ANSI エスケープシーケンスを削除
22 | return text.replace(/\u001b\[\??\d*[a-zA-Z]/g, '')
23 | }
24 |
25 | return (
26 |
34 |
37 |
38 | {/* Exit Code */}
39 |
43 |
52 |
53 | {/* File Count */}
54 | {fileCount > 0 && (
55 |
59 |
62 | )}
63 |
27 | {/* Command Info */}
28 | {response.processInfo?.command && (
29 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/GuardContent/GuardContent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Accordion } from 'flowbite-react'
3 | import { FaShieldAlt } from 'react-icons/fa'
4 | import CodeRenderer from '../../Code/CodeRenderer'
5 |
6 | // GuardContent の型定義
7 | export interface GuardContentProps {
8 | content?: {
9 | text?: {
10 | text?: string
11 | }
12 | // 将来的な拡張のために他のフィールドも追加可能
13 | [key: string]: any
14 | }
15 | }
16 |
17 | export const GuardContent: React.FC
30 | $
31 | {response.processInfo.command}
32 |
33 | )}
34 |
35 | {/* Process ID */}
36 | {response.processInfo?.pid && (
37 |
38 | Process ID: {response.processInfo.pid}
39 | {response.processInfo.detached && ' (detached)'}
40 |
41 | )}
42 |
43 | {/* Output */}
44 | {(response.stdout || response.stderr) && (
45 |
46 | {response.stdout &&
51 | )}
52 |
53 | {/* Exit Code */}
54 | {response.exitCode !== undefined && (
55 | {removeAnsiCodes(response.stdout)}
}
47 | {response.stderr && response.stderr !== '\u001b[?1034h' && (
48 | {removeAnsiCodes(response.stderr)}
49 | )}
50 |
58 | Exit Code: {response.exitCode}
59 |
60 | )}
61 |
26 |
35 | )
36 | }
37 |
38 | // Accordionを使った折りたたみ式の表示タイプ
39 | export const GuardContentCollapsible: React.FC
27 |
30 |
31 |
32 |
34 |
51 |
54 |
57 |
59 |
17 | 
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/TavilySearch/SearchResult.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | result: {
5 | title: string
6 | url: string
7 | content: string
8 | score: number
9 | }
10 | }
11 |
12 | export const SearchResult: React.FC
21 | {/* Title & Score */}
22 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/CodeBlocks/TextCodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const TextCodeBlock: React.FC<{ text: string }> = ({ text }) => {
4 | return (
5 |
23 |
30 |
31 | {/* URL */}
32 | 24 | {title} 25 |
26 | 27 | {(score * 100).toFixed(1)}% 28 | 29 | handleUrlClick(url)}
35 | >
36 | {url}
37 |
38 |
39 | {/* Content */}
40 | {content}
41 |
6 | {text}
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/ExampleScenarios/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { motion } from 'framer-motion'
3 | import { Scenario } from '@/types/agent-chat'
4 | import { useTranslation } from 'react-i18next'
5 | import { replacePlaceholders } from '../../utils/placeholder'
6 | import { useSettings } from '@renderer/contexts/SettingsContext'
7 |
8 | type ExampleScenariosProps = {
9 | scenarios?: Scenario[]
10 | onSelectScenario: (content: string) => void
11 | }
12 |
13 | export const ExampleScenarios: React.FC
25 | {scenarios.map((scenario, index) => (
26 |
33 | onSelectScenario(
34 | replacePlaceholders(
35 | scenario.content === '' ? t(`${scenario.title} description`) : scenario.content,
36 | {
37 | projectPath: projectPath
38 | }
39 | )
40 | )
41 | }
42 | >
43 | {t(scenario.title)}
44 |
45 | ))}
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/InputForm/DirectorySelector.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FcFolder } from 'react-icons/fc'
3 |
4 | type DirectorySelectorProps = {
5 | projectPath: string
6 | onSelectDirectory: () => void
7 | onOpenIgnoreModal: () => void
8 | }
9 |
10 | export const DirectorySelector: React.FC
17 |
26 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/InputForm/PlanActToggle.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { useSettings } from '@renderer/contexts/SettingsContext'
4 |
5 | type PlanActToggleProps = {
6 | className?: string
7 | }
8 |
9 | const planModeStyle = 'bg-yellow-300 text-gray-700'
10 | const actModeStyle =
11 | 'bg-gradient-to-r from-cyan-500 via-blue-500 to-cyan-400 bg-[length:200%_100%] animate-gradient-x text-white'
12 | const unselectedStyle = 'bg-gray-50 dark:bg-gray-800 text-gray-300 hover:text-gray-400'
13 |
14 | export const PlanActToggle: React.FC
28 |
38 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/InputForm/ToolSettings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FcSupport } from 'react-icons/fc'
3 |
4 | type ToolSettingsProps = {
5 | onOpenToolSettings: () => void
6 | }
7 |
8 | export const ToolSettings: React.FC
11 |
15 | )
16 | } else {
17 | return (
18 |
12 |
14 |
19 |
21 | )
22 | }
23 | }
24 |
25 | return (
26 |
27 | {renderAvatar(role)}
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/MessageList/index.tsx:
--------------------------------------------------------------------------------
1 | import { IdentifiableMessage } from '@/types/chat/message'
2 | import React, { memo, useCallback } from 'react'
3 | import { ChatMessage } from './Message'
4 | import AILogo from '@renderer/assets/images/icons/ai.svg'
5 |
6 | type MessageListProps = {
7 | messages: IdentifiableMessage[]
8 | loading: boolean
9 | reasoning: boolean
10 | deleteMessage?: (index: number) => void
11 | }
12 |
13 | const LoadingMessage = memo(function LoadingMessage() {
14 | return (
15 |
16 |
34 | )
35 | })
36 |
37 | // MessageListコンポーネントを定義
38 | const MessageListBase: React.FC
17 |
21 |
18 |
20 |
22 |
23 |
33 |
24 |
32 |
25 |
31 |
26 |
27 |
28 |
29 |
30 |
55 | {messages.map((message, index) => (
56 |
65 | )
66 | }
67 |
68 | // React.memoを使用してメモ化したコンポーネントをエクスポート
69 | export const MessageList = memo(MessageListBase)
70 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/MetadataViewer/index.ts:
--------------------------------------------------------------------------------
1 | export * from './MetadataViewer'
2 | export * from './StructuredJsonView'
3 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/ModelSelector/claude-color.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/ModelSelector/deepseek-color.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/components/Recommendations/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { motion } from 'framer-motion'
3 | import LoadingDotsLottie from '../../../WebsiteGeneratorPage/LoadingDots.lottie'
4 |
5 | type MessageRecommendation = {
6 | title: string
7 | content: string
8 | }
9 |
10 | type RecommendationsProps = {
11 | recommendations: MessageRecommendation[]
12 | loading: boolean
13 | onSelect: (content: string) => void
14 | }
15 |
16 | export const Recommendations: React.FC
24 |
26 | )
27 | }
28 |
29 | return (
30 |
31 | {recommendations.map((recommendation, index) => (
32 | onSelect(recommendation.content)}
39 | >
40 | {recommendation.title}
41 |
42 | ))}
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/hooks/useAgentTools.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { useSettings } from '@renderer/contexts/SettingsContext'
3 | import { ToolState } from '@/types/agent-chat'
4 | import { ToolName } from '@/types/tools'
5 | import { READ_ONLY_TOOLS } from '@/types/plan-mode-tools'
6 |
7 | /**
8 | * Custom hook to filter tools based on Plan/Act mode
9 | * @param tools Array of tool states to filter
10 | * @returns Filtered array of tool states based on current mode
11 | */
12 | export const useAgentTools = (tools: ToolState[]): ToolState[] => {
13 | const { planMode } = useSettings()
14 |
15 | return useMemo(() => {
16 | if (!planMode) {
17 | // In Act mode, return all enabled tools
18 | return tools
19 | }
20 |
21 | // In Plan mode, only return read-only tools
22 | return tools.filter((tool) => {
23 | const toolName = tool.toolSpec?.name as ToolName
24 | const isReadOnly = READ_ONLY_TOOLS.includes(toolName)
25 |
26 | return tool.enabled && isReadOnly
27 | })
28 | }, [tools, planMode])
29 | }
30 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/modals/useSystemPromptModal.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import MD from '@renderer/components/Markdown/MD'
3 | import { Modal } from 'flowbite-react'
4 |
5 | interface SystemPromptModalProps {
6 | isOpen: boolean
7 | onClose: () => void
8 | systemPrompt: string
9 | }
10 |
11 | export const useSystemPromptModal = () => {
12 | const [show, setShow] = useState(false)
13 | const handleOpen = () => {
14 | setShow(true)
15 | }
16 | const handleClose = () => {
17 | setShow(false)
18 | }
19 |
20 | return {
21 | show: show,
22 | handleOpen: handleOpen,
23 | handleClose: handleClose,
24 | SystemPromptModal: SystemPromptModal
25 | }
26 | }
27 |
28 | const SystemPromptModal = React.memo(
29 | ({ isOpen, onClose, systemPrompt }: SystemPromptModalProps) => {
30 | if (!isOpen) return null
31 |
32 | return (
33 |
9 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/ChatPage/utils/placeholder.ts:
--------------------------------------------------------------------------------
1 | // 独自の型定義を使用
2 |
3 | import { CommandConfig, FlowConfig } from '@/types/agent-chat'
4 | import { BedrockAgent } from '@/types/agent'
5 | import { KnowledgeBase } from 'src/types/agent-chat'
6 |
7 | type PlaceHolders = {
8 | projectPath: string
9 | allowedCommands?: CommandConfig[]
10 | knowledgeBases?: KnowledgeBase[]
11 | bedrockAgents?: BedrockAgent[]
12 | flows?: FlowConfig[]
13 | }
14 |
15 | export const replacePlaceholders = (text: string, placeholders: PlaceHolders) => {
16 | const {
17 | projectPath,
18 | allowedCommands = [],
19 | knowledgeBases = [],
20 | bedrockAgents = [],
21 | flows = []
22 | } = placeholders
23 | const yyyyMMdd = new Date().toISOString().slice(0, 10)
24 | return text
25 | .replace(/{{projectPath}}/g, projectPath)
26 | .replace(/{{date}}/g, yyyyMMdd)
27 | .replace(/{{allowedCommands}}/g, JSON.stringify(allowedCommands))
28 | .replace(/{{knowledgeBases}}/g, JSON.stringify(knowledgeBases))
29 | .replace(/{{bedrockAgents}}/g, JSON.stringify(bedrockAgents))
30 | .replace(/{{flows}}/g, JSON.stringify(flows))
31 | }
32 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/DiagramGeneratorPage/components/LoaderWithReasoning.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, memo } from 'react'
2 | import { ReasoningTextDisplay } from './ReasoningTextDisplay'
3 |
4 | type LoaderWithReasoningProps = {
5 | children: ReactNode
6 | reasoningText: string
7 | }
8 |
9 | const LoaderWithReasoningComponent = ({ children, reasoningText }: LoaderWithReasoningProps) => {
10 | return (
11 |
10 |
19 |
20 | 11 | {t('Think Tool')} 12 |
13 |14 | {t( 15 | 'The think tool gives the AI a dedicated space to reason through complex problems during a conversation, without changing data or fetching new information.' 16 | )} 17 |
18 |
21 |
33 | {t('How to use')}
22 |23 | {t( 24 | 'The think tool provides a dedicated space for the AI to stop and think during complex tasks. It helps the AI analyze information, plan next steps, and make better decisions without changing any data or fetching new information. Especially useful for multi-step problems and policy compliance.' 25 | )} 26 |
27 |28 | {t( 29 | 'Especially useful for multi-step problems and policy compliance. The AI will automatically use this tool when needed for complex reasoning.' 30 | )} 31 |
32 |
12 | {/* ローダーコンポーネント (WebLoader, RagLoader, etc.) */}
13 | {children}
14 |
15 | {/* ReasoningTextDisplay - 中央に配置 */}
16 |
20 | )
21 | }
22 |
23 | // メモ化してpropsが変更されない限り再レンダリングしない
24 | export const LoaderWithReasoning = memo(LoaderWithReasoningComponent)
25 | LoaderWithReasoning.displayName = 'LoaderWithReasoning'
26 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/DiagramGeneratorPage/components/ReasoningTextDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, memo } from 'react'
2 | import { MdExpandMore } from 'react-icons/md'
3 |
4 | type ReasoningTextDisplayProps = {
5 | text: string
6 | }
7 |
8 | // メモ化してpropsが変更されない限り再レンダリングしない
9 | const ReasoningTextDisplayComponent = ({ text }: ReasoningTextDisplayProps) => {
10 | // 展開状態を管理するstate
11 | const [isExpanded, setIsExpanded] = useState(false)
12 | const textAreaRef = useRef
17 | {reasoningText &&
19 |
18 | {/* クリック可能なヘッダー部分 */}
19 |
50 | )
51 | }
52 |
53 | // displayNameを設定してESLintエラーを解消
54 | export const ReasoningTextDisplay = memo(ReasoningTextDisplayComponent)
55 | ReasoningTextDisplay.displayName = 'ReasoningTextDisplay'
56 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/DiagramGeneratorPage/components/RecommendDiagrams.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { motion } from 'framer-motion'
3 | import LoadingDotsLottie from '@renderer/pages/WebsiteGeneratorPage/LoadingDots.lottie'
4 | import { useTranslation } from 'react-i18next'
5 |
6 | interface Recommendation {
7 | title: string
8 | value: string
9 | }
10 |
11 | interface RecommendDiagramsProps {
12 | loading: boolean
13 | recommendations: Recommendation[]
14 | onSelect: (value: string) => void
15 | loadingText?: string
16 | }
17 |
18 | export const RecommendDiagrams: React.FC setIsExpanded(!isExpanded)}
22 | >
23 |
24 | Reasoning
25 |
26 |
31 |
32 | {/* 展開可能なコンテンツ部分 */}
33 |
40 |
49 |
41 |
48 |
45 | {text || 'Thinking...'}
46 |
47 |
29 |
34 | )
35 | }
36 |
37 | return (
38 |
39 | {recommendations?.map((recommendation, index) => (
40 | onSelect(recommendation.value)}
63 | >
64 | {recommendation.title}
65 |
66 | ))}
67 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/DiagramGeneratorPage/utils/xmlParser.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * DrawIO用のXMLを抽出するユーティリティ関数
3 | * アシスタントの回答から
13 |
19 | )
20 | }
21 | export default ErrorPage
22 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SettingPage/components/LightModelSettings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { FcIdea } from 'react-icons/fc'
4 | import { SettingSection } from './SettingSection'
5 | import { SettingSelect } from './SettingSelect'
6 | import { useSettings } from '@renderer/contexts/SettingsContext'
7 |
8 | export const LightModelSettings: React.FC = () => {
9 | const { t } = useTranslation()
10 | const { availableModels, lightProcessingModel, updateLightProcessingModel } = useSettings()
11 |
12 | // 軽量処理に適したモデル（Haiku や Sonnet など）を優先表示
13 | const lightModels = availableModels.filter(
14 | (model) =>
15 | model.modelId.includes('haiku') ||
16 | model.modelId.includes('sonnet') ||
17 | model.modelId.includes('nova')
18 | )
19 |
20 | const modelOptions = [
21 | { value: '', label: t('settings.lightModel.useMain') },
22 | ...lightModels.map((model) => ({
23 | value: model.modelId,
24 | label: model.modelName
25 | }))
26 | ]
27 |
28 | const handleLightModelChange = (modelId: string) => {
29 | if (!modelId) {
30 | // 空の値が選択された場合は null をセット（メインモデル使用を示す）
31 | updateLightProcessingModel(null)
32 | return
33 | }
34 |
35 | const selectedModel = availableModels.find((model) => model.modelId === modelId)
36 | if (selectedModel) {
37 | updateLightProcessingModel(selectedModel)
38 | }
39 | }
40 |
41 | return (
42 | Oops!
14 |Error: {JSON.stringify(error)}
15 |
16 |
17 |
18 |
44 | handleLightModelChange(e.target.value)}
53 | />
54 |
55 |
59 | 45 | {t('settings.lightModel.description')} 46 |
47 | 48 |56 | {t('settings.lightModel.info')} 57 |
58 |
22 |
23 | {description &&
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SettingPage/components/SettingSection.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { IconType } from 'react-icons'
3 |
4 | interface SettingSectionProps {
5 | title: string
6 | description?: string
7 | icon?: IconType
8 | children: React.ReactNode
9 | }
10 |
11 | export const SettingSection: React.FC{description}
} 24 |
25 |
40 | {isPassword && (
41 |
48 | )}
49 |
50 | {error && {error}
} 51 |
20 |
21 | {Icon && (
22 |
29 | {description && (
30 |
33 |
21 | {Icon && (
22 |
23 |
29 | {description && (
30 | {description}
31 | )} 32 |{children}
34 |
33 |
34 | {description &&
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SettingPage/components/sections/ConfigDirSection.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useTranslation } from 'react-i18next'
3 | import { FcFolder } from 'react-icons/fc'
4 | import { SettingSection } from '../SettingSection'
5 |
6 | interface ProjectSectionProps {
7 | userDataPath: string
8 | }
9 |
10 | export const ConfigDirSection: React.FC{description}
} 35 | 64 | {error &&{error}
} 65 |
12 | setNotification(e.target.checked)}
17 | className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
18 | />
19 |
22 |
23 |
19 |
20 |
21 |
22 |
34 |
35 |
41 |
42 |
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SpeakPage/components/TranslatedMessage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TranslationState } from '../hooks/useTranslation'
3 |
4 | export interface TranslatedMessageProps {
5 | translationState?: TranslationState
6 | onRetry?: () => void
7 | className?: string
8 | }
9 |
10 | const TranslatedMessage: React.FC
23 |
24 |
33 |
27 | 完了:
28 |
29 | {lastResult.toolName}
30 |
31 |
32 |
36 |
40 |
37 | {JSON.stringify(lastResult.result, null, 2)}
38 |
39 |
24 |
60 | )
61 | }
62 |
63 | export default TranslatedMessage
64 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SpeakPage/components/VoiceSelector/VoiceVisual.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { VoiceId } from '../../constants/voices'
3 | import { VoiceAILottie } from '@renderer/components/VoiceAI'
4 |
5 | interface VoiceVisualProps {
6 | voiceId: VoiceId
7 | // アニメーション再実行のためのキー
8 | animationKey?: string | number
9 | }
10 |
11 | export const VoiceVisual: React.FC
25 | 🌐
26 |
59 |
27 | {/* 翻訳中の表示 */}
28 | {isTranslating && (
29 |
58 |
30 |
31 | 翻訳中...
32 |
33 | )}
34 |
35 | {/* 翻訳完了時の表示 */}
36 | {translatedText && !isTranslating && (
37 |
38 | {translatedText}
39 |
40 | )}
41 |
42 | {/* エラー時の表示 */}
43 | {error && (
44 |
45 | 翻訳失敗
46 | {onRetry && (
47 |
54 | )}
55 |
56 | )}
57 |
14 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SpeakPage/components/VoiceSelector/index.ts:
--------------------------------------------------------------------------------
1 | export { VoiceSelector } from './VoiceSelector'
2 | export { VoiceVisual } from './VoiceVisual'
3 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SpeakPage/constants/voices.ts:
--------------------------------------------------------------------------------
1 | // 音声ID定数
2 | export type VoiceId = 'amy' | 'matthew' | 'tiffany'
3 |
4 | // 音声メタデータの型定義
5 | export interface VoiceMetadata {
6 | id: VoiceId
7 | name: string
8 | description: string
9 | characteristics: string
10 | }
11 |
12 | // 音声選択肢の定義
13 | export const AVAILABLE_VOICES: VoiceMetadata[] = [
14 | {
15 | id: 'tiffany',
16 | name: 'Tiffany',
17 | description: 'voice.tiffany.description',
18 | characteristics: 'voice.tiffany.characteristics'
19 | },
20 | {
21 | id: 'amy',
22 | name: 'Amy',
23 | description: 'voice.amy.description',
24 | characteristics: 'voice.amy.characteristics'
25 | },
26 | {
27 | id: 'matthew',
28 | name: 'Matthew',
29 | description: 'voice.matthew.description',
30 | characteristics: 'voice.matthew.characteristics'
31 | }
32 | ]
33 |
34 | // 音声IDから音声メタデータを取得する関数
35 | export const getVoiceMetadata = (voiceId: VoiceId): VoiceMetadata | undefined => {
36 | return AVAILABLE_VOICES.find((voice) => voice.id === voiceId)
37 | }
38 |
39 | // デフォルト音声ID
40 | export const DEFAULT_VOICE_ID: VoiceId = 'amy'
41 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/SpeakPage/lib/ObjectsExt.ts:
--------------------------------------------------------------------------------
1 | export class ObjectExt {
2 | static exists(obj: unknown): boolean {
3 | return obj !== undefined && obj !== null
4 | }
5 |
6 | static checkArgument(condition: boolean, message: string): void {
7 | if (!condition) {
8 | throw new TypeError(message)
9 | }
10 | }
11 |
12 | static checkExists(obj: unknown, message: string): void {
13 | if (!ObjectExt.exists(obj)) {
14 | throw new TypeError(message)
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/StepFunctionsGeneratorPage/ASLEditor.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | /* eslint-disable @typescript-eslint/no-unused-vars */
3 | import { Editor } from '@monaco-editor/react'
4 | import { useRef } from 'react'
5 |
6 | type ASLEditorProps = { value: any; setValue?: any }
7 | export const ASLEditor: React.FC
12 | {/* ローダーコンポーネント (WebLoader, RagLoader, etc.) */}
13 | {children}
14 |
15 | {/* ReasoningTextDisplay - 中央に配置 */}
16 |
20 | )
21 | }
22 |
23 | // メモ化してpropsが変更されない限り再レンダリングしない
24 | export const LoaderWithReasoning = memo(LoaderWithReasoningComponent)
25 | LoaderWithReasoning.displayName = 'LoaderWithReasoning'
26 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/WebsiteGeneratorPage/components/Preview.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { SandpackPreview } from '@codesandbox/sandpack-react'
3 | import { FiMaximize } from 'react-icons/fi'
4 |
5 | interface PreviewProps {
6 | isDark: boolean
7 | code: string
8 | }
9 |
10 | export const Preview: React.FC
17 | {reasoningText &&
19 |
7 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/WebsiteGeneratorPage/components/ReasoningTextDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, memo } from 'react'
2 | import { MdExpandMore } from 'react-icons/md'
3 |
4 | type ReasoningTextDisplayProps = {
5 | text: string
6 | }
7 |
8 | // メモ化してpropsが変更されない限り再レンダリングしない
9 | const ReasoningTextDisplayComponent = ({ text }: ReasoningTextDisplayProps) => {
10 | // 展開状態を管理するstate
11 | const [isExpanded, setIsExpanded] = useState(false)
12 | const textAreaRef = useRef
18 | {/* クリック可能なヘッダー部分 */}
19 |
50 | )
51 | }
52 |
53 | // displayNameを設定してESLintエラーを解消
54 | export const ReasoningTextDisplay = memo(ReasoningTextDisplayComponent)
55 | ReasoningTextDisplay.displayName = 'ReasoningTextDisplay'
56 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/WebsiteGeneratorPage/components/RecommendChanges.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { motion } from 'framer-motion'
3 | import LoadingDotsLottie from '../LoadingDots.lottie'
4 |
5 | interface Recommendation {
6 | title: string
7 | value: string
8 | }
9 |
10 | interface RecommendChangesProps {
11 | loading: boolean
12 | recommendations: Recommendation[]
13 | onSelect: (value: string) => void
14 | loadingText: string
15 | }
16 |
17 | export const RecommendChanges: React.FC setIsExpanded(!isExpanded)}
22 | >
23 |
24 | Reasoning
25 |
26 |
31 |
32 | {/* 展開可能なコンテンツ部分 */}
33 |
40 |
49 |
41 |
48 |
45 | {text || 'Thinking...'}
46 |
47 |
26 |
29 | )
30 | }
31 |
32 | return (
33 |
34 | {recommendations?.map((recommendation, index) => (
35 | onSelect(recommendation.value)}
42 | >
43 | {recommendation.title}
44 |
45 | ))}
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/renderer/src/pages/WebsiteGeneratorPage/components/StyleSelector.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dropdown } from 'flowbite-react'
3 | import { Style } from '../templates'
4 |
5 | interface StyleSelectorProps {
6 | currentStyle: Style
7 | styles: Style[]
8 | onSelect: (style: Style) => void
9 | }
10 |
11 | export const StyleSelector: React.FC