{/* Toggle header */}
setIsOpen(p => !p)}
+ onClick={() => {
+ if (!isOpen) { setIsOpen(true); return; }
+ if (expanded) { setExpanded(false); return; }
+ setExpanded(true);
+ }}
style={{
display: 'flex', alignItems: 'center', gap: 6,
padding: '6px 8px', cursor: 'pointer',
background: isOpen ? 'rgba(168,85,247,0.12)' : 'rgba(168,85,247,0.04)',
- borderRadius: 4,
- borderLeft: '2px solid rgba(168,85,247,0.5)',
+ borderRadius: expanded ? '8px 8px 0 0' : 4,
+ borderLeft: expanded ? 'none' : '2px solid rgba(168,85,247,0.5)',
+ flexShrink: 0,
}}
>
🤖
AI 해양분석
- Qwen 2.5
-
- {isOpen ? '▼' : '▶'}
+
+ Qwen3 14B
+
+
+ {isOpen && (
+
+ )}
+ {!isOpen && (
+ ▶
+ )}
@@ -158,10 +255,11 @@ export function AiChatPanel({ ships, koreanShipCount, chineseShipCount, totalShi
{isOpen && (
{/* Messages */}
)}
- {messages.map((msg, i) => (
-
- {msg.content}
-
- ))}
- {isLoading && (
+ {messages.map((msg, i) => {
+ const isAssistant = msg.role === 'assistant';
+ const { thinking, answer } = isAssistant ? splitThinking(msg.content) : { thinking: '', answer: msg.content };
+ const displayText = isAssistant ? (answer || (thinking && !msg.isStreaming ? '' : msg.content)) : msg.content;
+
+ return (
+
+ {/* thinking 접기 블록 */}
+ {isAssistant && thinking && (
+
+ 도구 호출
+ {thinking}
+
+ )}
+ {/* 메시지 본문 */}
+
+ {displayText}
+ {msg.isStreaming && msg.content && (
+
+ ▋
+
+ {String(Math.floor(elapsed / 60)).padStart(2, '0')}:{String(elapsed % 60).padStart(2, '0')}
+
+
+ )}
+
+
+ );
+ })}
+ {isLoading && !messages[messages.length - 1]?.content && (
- 분석 중...
+ 분석 중
+
+ {String(Math.floor(elapsed / 60)).padStart(2, '0')}:{String(elapsed % 60).padStart(2, '0')}
+
)}
@@ -231,11 +374,24 @@ export function AiChatPanel({ ships, koreanShipCount, chineseShipCount, totalShi
borderTop: '1px solid rgba(255,255,255,0.06)',
background: 'rgba(0,0,0,0.15)',
}}>
+ {messages.length > 0 && (
+
+ )}
setInput(e.target.value)}
- onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }}
+ onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); void sendMessage(); } }}
placeholder="해양 상황 질문..."
disabled={isLoading}
style={{
@@ -246,7 +402,7 @@ export function AiChatPanel({ ships, koreanShipCount, chineseShipCount, totalShi
}}
/>