744c149300
Some checks failed
Build and Deploy Docs / build-and-deploy (push) Has been cancelled
- Created logs/ structure (sessions, operations, incidents) - Added session-start/log/end scripts - Installed Git hooks for auto-logging commits/pushes - Added shell integration for zsh - Created CHANGELOG.md - Documented today's session (2026-01-10)
514 lines
14 KiB
Markdown
514 lines
14 KiB
Markdown
# Приклад інтеграції розширеного чату
|
||
|
||
**Дата:** 2025-11-23
|
||
|
||
---
|
||
|
||
## 🎯 Швидкий старт
|
||
|
||
### 1. Імпорт компонента
|
||
|
||
```tsx
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
```
|
||
|
||
### 2. Базове використання
|
||
|
||
```tsx
|
||
function MyPage() {
|
||
return (
|
||
<div className="container mx-auto p-6">
|
||
<h1>Моя сторінка мікроДАО</h1>
|
||
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📋 Приклади інтеграції
|
||
|
||
### Приклад 1: Фіксований чат (завжди видимий)
|
||
|
||
```tsx
|
||
// src/pages/MicroDaoCabinetPage.tsx
|
||
|
||
import React from 'react';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
export function MicroDaoCabinetPage() {
|
||
const microDao = {
|
||
id: 'helion',
|
||
name: 'Helion Energy Union',
|
||
orchestrator_agent_id: 'helion',
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto p-6">
|
||
{/* Header */}
|
||
<div className="mb-6">
|
||
<h1 className="text-3xl font-bold">{microDao.name}</h1>
|
||
</div>
|
||
|
||
{/* Content Grid */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
{/* Main Content (2 columns) */}
|
||
<div className="lg:col-span-2 space-y-6">
|
||
{/* Ваш основний контент */}
|
||
<div className="bg-white rounded-lg shadow p-6">
|
||
<h2 className="text-xl font-semibold mb-4">Огляд</h2>
|
||
{/* ... */}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sidebar - Chat (1 column) */}
|
||
<div className="lg:col-span-1">
|
||
<div className="sticky top-6">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId={microDao.orchestrator_agent_id}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### Приклад 2: Модальне вікно
|
||
|
||
```tsx
|
||
// src/pages/MicroDaoCabinetPage.tsx
|
||
|
||
import React, { useState } from 'react';
|
||
import { MessageCircle } from 'lucide-react';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
export function MicroDaoCabinetPage() {
|
||
const [showChat, setShowChat] = useState(false);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto p-6">
|
||
{/* Кнопка відкриття чату */}
|
||
<button
|
||
onClick={() => setShowChat(true)}
|
||
className="fixed bottom-6 right-6 w-14 h-14 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition-colors flex items-center justify-center z-40"
|
||
>
|
||
<MessageCircle className="h-6 w-6" />
|
||
</button>
|
||
|
||
{/* Модальне вікно з чатом */}
|
||
{showChat && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||
<div className="w-full max-w-4xl max-h-[90vh] overflow-auto">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
onClose={() => setShowChat(false)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Основний контент сторінки */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-3xl font-bold">Кабінет мікроДАО</h1>
|
||
{/* ... */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### Приклад 3: Floating чат (знизу справа)
|
||
|
||
```tsx
|
||
// src/pages/MicroDaoCabinetPage.tsx
|
||
|
||
import React, { useState } from 'react';
|
||
import { MessageCircle, Minimize2 } from 'lucide-react';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
export function MicroDaoCabinetPage() {
|
||
const [showChat, setShowChat] = useState(false);
|
||
const [isMinimized, setIsMinimized] = useState(false);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto p-6">
|
||
{/* Основний контент */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-3xl font-bold">Кабінет мікроДАО</h1>
|
||
{/* ... */}
|
||
</div>
|
||
|
||
{/* Floating Chat Widget */}
|
||
{!showChat ? (
|
||
// Кнопка відкриття
|
||
<button
|
||
onClick={() => setShowChat(true)}
|
||
className="fixed bottom-6 right-6 w-14 h-14 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition-all z-50 hover:scale-110"
|
||
>
|
||
<MessageCircle className="h-6 w-6 mx-auto" />
|
||
</button>
|
||
) : (
|
||
// Чат вікно
|
||
<div className={`fixed bottom-6 right-6 z-50 transition-all ${
|
||
isMinimized ? 'w-80' : 'w-[600px]'
|
||
}`}>
|
||
<div className="bg-white rounded-lg shadow-2xl overflow-hidden">
|
||
{/* Заголовок з кнопками */}
|
||
<div className="bg-purple-600 p-3 flex items-center justify-between">
|
||
<div className="flex items-center gap-2 text-white">
|
||
<MessageCircle className="h-5 w-5" />
|
||
<span className="font-semibold">Чат з агентом</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => setIsMinimized(!isMinimized)}
|
||
className="text-white hover:bg-white hover:bg-opacity-20 p-1.5 rounded transition-colors"
|
||
>
|
||
<Minimize2 className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => setShowChat(false)}
|
||
className="text-white hover:bg-white hover:bg-opacity-20 p-1.5 rounded transition-colors"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Чат контент */}
|
||
{!isMinimized && (
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
onClose={() => setShowChat(false)}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### Приклад 4: Tabs з кількома агентами
|
||
|
||
```tsx
|
||
// src/pages/MultiAgentChat.tsx
|
||
|
||
import React, { useState } from 'react';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
const AGENTS = [
|
||
{ id: 'helion', name: 'Helion', icon: '⚡' },
|
||
{ id: 'greenfood', name: 'GREENFOOD', icon: '🌱' },
|
||
{ id: 'yaromir', name: 'Yaromir', icon: '🧙' },
|
||
{ id: 'daarwizz', name: 'DAARWIZZ', icon: '✨' },
|
||
];
|
||
|
||
export function MultiAgentChat() {
|
||
const [activeAgent, setActiveAgent] = useState('helion');
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto p-6">
|
||
{/* Tabs */}
|
||
<div className="flex gap-2 mb-6 overflow-x-auto">
|
||
{AGENTS.map((agent) => (
|
||
<button
|
||
key={agent.id}
|
||
onClick={() => setActiveAgent(agent.id)}
|
||
className={`px-4 py-2 rounded-lg font-medium transition-colors whitespace-nowrap ${
|
||
activeAgent === agent.id
|
||
? 'bg-purple-600 text-white'
|
||
: 'bg-white text-gray-700 hover:bg-gray-100'
|
||
}`}
|
||
>
|
||
<span className="mr-2">{agent.icon}</span>
|
||
{agent.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Chat Content */}
|
||
<div>
|
||
{AGENTS.map((agent) => (
|
||
<div
|
||
key={agent.id}
|
||
className={activeAgent === agent.id ? 'block' : 'hidden'}
|
||
>
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId={agent.id}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### Приклад 5: З пропсами оркестратора
|
||
|
||
```tsx
|
||
// src/pages/MicroDaoCabinetPage.tsx
|
||
|
||
import React from 'react';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
export function MicroDaoCabinetPage() {
|
||
const orchestrator = {
|
||
id: 'helion',
|
||
name: 'Helion Energy Union',
|
||
description: 'AI-агент для управління енергетичною екосистемою',
|
||
avatar: '/avatars/helion.png',
|
||
};
|
||
|
||
return (
|
||
<div className="container mx-auto p-6">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestrator={orchestrator}
|
||
orchestratorAgentId={orchestrator.id}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Використання Wrapper компонента
|
||
|
||
### Перемикання між базовим та розширеним чатом
|
||
|
||
```tsx
|
||
// src/pages/MicroDaoCabinetPage.tsx
|
||
|
||
import React, { useState } from 'react';
|
||
import { Settings } from 'lucide-react';
|
||
import { MicroDaoOrchestratorChatWrapper } from '@/components/microdao/MicroDaoOrchestratorChatWrapper';
|
||
|
||
export function MicroDaoCabinetPage() {
|
||
const [useEnhanced, setUseEnhanced] = useState(false);
|
||
|
||
return (
|
||
<div className="container mx-auto p-6">
|
||
{/* Toggle для вибору версії */}
|
||
<div className="mb-4 flex items-center gap-2">
|
||
<Settings className="h-5 w-5 text-gray-600" />
|
||
<label className="flex items-center gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={useEnhanced}
|
||
onChange={(e) => setUseEnhanced(e.target.checked)}
|
||
className="w-4 h-4"
|
||
/>
|
||
<span className="text-sm text-gray-700">
|
||
Розширений режим (мультимодальність, база знань, Telegram)
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Чат */}
|
||
<MicroDaoOrchestratorChatWrapper
|
||
orchestratorAgentId="helion"
|
||
enhanced={useEnhanced}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Кастомізація стилів
|
||
|
||
### Зміна розмірів чату
|
||
|
||
```tsx
|
||
<div className="w-full max-w-3xl mx-auto">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
/>
|
||
</div>
|
||
```
|
||
|
||
### Зміна висоти вікна повідомлень
|
||
|
||
```css
|
||
/* У вашому CSS файлі */
|
||
.messages-container {
|
||
height: 600px; /* Замість стандартних 400px */
|
||
}
|
||
```
|
||
|
||
Або безпосередньо у компоненті:
|
||
|
||
```tsx
|
||
// src/components/microdao/MicroDaoOrchestratorChatEnhanced.tsx
|
||
// Знайти рядок:
|
||
<div className="h-[400px] overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||
|
||
// Змінити на:
|
||
<div className="h-[600px] overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||
```
|
||
|
||
---
|
||
|
||
## 🔌 Backend інтеграція
|
||
|
||
### Підключення до реального API
|
||
|
||
```tsx
|
||
// src/config/api.ts
|
||
export const API_CONFIG = {
|
||
routerUrl: import.meta.env.VITE_NODE1_URL || 'http://144.76.224.179:9102',
|
||
apiUrl: import.meta.env.VITE_API_URL || 'http://144.76.224.179:8899',
|
||
};
|
||
|
||
// Використання
|
||
import { API_CONFIG } from '@/config/api';
|
||
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';
|
||
|
||
// Компонент автоматично використовує API_CONFIG
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 Responsive версія
|
||
|
||
### Адаптивний layout для мобільних
|
||
|
||
```tsx
|
||
export function MobileResponsiveChatPage() {
|
||
const [showChat, setShowChat] = useState(false);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Desktop - Sidebar */}
|
||
<div className="hidden lg:block fixed right-0 top-0 bottom-0 w-[500px] p-4 overflow-auto">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
/>
|
||
</div>
|
||
|
||
{/* Mobile - Full Screen Modal */}
|
||
<div className="lg:hidden">
|
||
<button
|
||
onClick={() => setShowChat(true)}
|
||
className="fixed bottom-4 right-4 w-14 h-14 bg-purple-600 text-white rounded-full shadow-lg z-50"
|
||
>
|
||
💬
|
||
</button>
|
||
|
||
{showChat && (
|
||
<div className="fixed inset-0 bg-white z-50 flex flex-col">
|
||
<div className="flex-1 overflow-auto">
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion"
|
||
onClose={() => setShowChat(false)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="lg:mr-[500px] p-4">
|
||
{/* Ваш контент */}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Чекліст інтеграції
|
||
|
||
Перед запуском перевірте:
|
||
|
||
- [ ] Імпортовано компонент `MicroDaoOrchestratorChatEnhanced`
|
||
- [ ] Передано `orchestratorAgentId` або `orchestrator` prop
|
||
- [ ] Налаштовано `VITE_NODE1_URL` у `.env`
|
||
- [ ] Перевірено responsive версію
|
||
- [ ] Протестовано базовий чат
|
||
- [ ] Протестовано мультимодальні функції
|
||
- [ ] Перевірено базу знань
|
||
- [ ] Налаштовано системний промпт
|
||
- [ ] (Опційно) Підключено Telegram бота
|
||
|
||
---
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Проблема: Чат не відображається
|
||
|
||
**Рішення:**
|
||
```tsx
|
||
// Перевірте, чи передано orchestratorAgentId
|
||
<MicroDaoOrchestratorChatEnhanced
|
||
orchestratorAgentId="helion" // ✅ Обов'язково!
|
||
/>
|
||
```
|
||
|
||
### Проблема: Голосовий ввід не працює
|
||
|
||
**Рішення:**
|
||
- Переконайтеся, що браузер підтримує Web Speech API (Chrome, Edge)
|
||
- Дайте дозвіл на використання мікрофону
|
||
- Використовуйте HTTPS (локально можна HTTP)
|
||
|
||
### Проблема: Файли не завантажуються
|
||
|
||
**Рішення:**
|
||
- Перевірте розмір файлу (макс. 50 МБ)
|
||
- Перевірте тип файлу (PDF, DOC, DOCX, TXT, MD, JSON)
|
||
- Перевірте підключення до Backend API
|
||
|
||
---
|
||
|
||
## 📞 Підтримка
|
||
|
||
Якщо виникли питання або проблеми:
|
||
1. Перевірте документацію у `ORCHESTRATOR-CHAT-ENHANCED.md`
|
||
2. Перегляньте приклади вище
|
||
3. Перевірте логи браузера (F12 → Console)
|
||
4. Перевірте логи Router (`docker logs dagi-router`)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|