| 1 | import { MessageCircle, Sparkles } from 'lucide-react' |
| 2 | import { cn } from '@renderer/lib/utils' |
| 3 | import { useSessionDetailUiStore } from '@renderer/store' |
| 4 | import { useT } from '@renderer/i18n' |
| 5 | import { ChatPanel } from './ChatPanel' |
| 6 | import { ImageGenerationPanel } from './ImageGenerationPanel' |
| 7 | import { sessionDetailRightPanelContentClass } from '../workspace/right-panel/styles' |
| 8 | |
| 9 | export function MessagePanel({ sessionId }: { sessionId: string }): React.JSX.Element { |
| 10 | const t = useT() |
| 11 | const aiPanelMode = useSessionDetailUiStore((state) => state.aiPanelMode) |
| 12 | const setAiPanelMode = useSessionDetailUiStore((state) => state.setAiPanelMode) |
| 13 | |
| 14 | return ( |
| 15 | <div className={sessionDetailRightPanelContentClass}> |
| 16 | <div className="mx-2 mt-2 grid grid-cols-2 gap-1 rounded-[0.8rem] border border-[#ded2bd]/58 bg-[#fffaf1]/68 p-0.75 shadow-[0_2px_8px_rgba(77,61,43,0.05)]"> |
| 17 | <button |
| 18 | type="button" |
| 19 | onClick={() => setAiPanelMode('chat')} |
| 20 | className={cn( |
| 21 | 'inline-flex h-7 items-center justify-center gap-1.5 rounded-[0.8rem] text-[11px] font-medium transition-colors', |
| 22 | aiPanelMode === 'chat' |
| 23 | ? 'bg-[#dbe7ca] text-[#2f3b28] shadow-sm' |
| 24 | : 'text-[#6d604d] hover:bg-[#f4ebdc]' |
| 25 | )} |
| 26 | > |
| 27 | <MessageCircle className="h-3.5 w-3.5" /> |
| 28 | {t('sessionDetail.chatMode')} |
| 29 | </button> |
| 30 | <button |
| 31 | type="button" |
| 32 | onClick={() => setAiPanelMode('image')} |
| 33 | className={cn( |
| 34 | 'inline-flex h-7 items-center justify-center gap-1.5 rounded-[0.8rem] text-[11px] font-medium transition-colors', |
| 35 | aiPanelMode === 'image' |
| 36 | ? 'bg-[#dbe7ca] text-[#2f3b28] shadow-sm' |
| 37 | : 'text-[#6d604d] hover:bg-[#f4ebdc]' |
| 38 | )} |
| 39 | > |
| 40 | <Sparkles className="h-3.5 w-3.5" /> |
| 41 | {t('sessionDetail.imageMode')} |
| 42 | </button> |
| 43 | </div> |
| 44 | |
| 45 | {aiPanelMode === 'image' ? ( |
| 46 | <ImageGenerationPanel sessionId={sessionId} /> |
| 47 | ) : ( |
| 48 | <ChatPanel sessionId={sessionId} /> |
| 49 | )} |
| 50 | </div> |
| 51 | ) |
| 52 | } |
| 53 |