daarion-admin/microdao-daarion

Fork 0

Files

Apple e3accd4df0 feat: DAGI Router v2 - new endpoints, hooks, and UI card

2025-12-01 05:21:43 -08:00

20 KiB

Raw Blame History

Розширений чат з оркестраторами мікроДАО

Дата: 2025-11-23
Статус: ✅ Реалізовано

🎯 Огляд

Створено повнофункціональну систему чату з оркестраторами мікроДАО з підтримкою:

Мультимодальності (голос, зображення, файли, веб-пошук)
Бази знань агента (векторна + графова БД)
Системних промптів з редагуванням
Telegram інтеграції

📁 Структура компонентів

src/
├── components/
│   └── microdao/
│       ├── MicroDaoOrchestratorChat.tsx          # Оригінальний компонент (базовий)
│       ├── MicroDaoOrchestratorChatEnhanced.tsx  # Розширений компонент ⭐
│       └── chat/                                  # Модульні компоненти
│           ├── MultimodalInput.tsx               # Мультимодальний ввід
│           ├── KnowledgeBase.tsx                 # База знань агента
│           ├── SystemPromptEditor.tsx            # Редактор системного промпту
│           └── TelegramIntegration.tsx           # Telegram інтеграція
│
└── services/
    ├── voiceService.ts                           # Голосовий ввід/вивід
    ├── webSearchService.ts                       # Веб-пошук через Router
    └── knowledgeBaseService.ts                   # Робота з базою знань

🎤 Мультимодальний ввід

Можливості

Голосовий ввід (Speech-to-Text)
- Web Speech API
- Підтримка української мови
- Проміжні та фінальні результати
- Індикатор запису
Завантаження зображень
- Drag & drop підтримка
- Preview перед відправкою
- Base64 конвертація для API
- Видалення прикріплених файлів
Завантаження файлів
- PDF, DOC, DOCX, TXT, MD, JSON
- Максимальний розмір: 50 МБ
- Відображення прикріплених файлів
Веб-пошук
- Інтеграція з Router
- Пошук у реальному часі
- Форматування результатів

Компонент: `MultimodalInput`

<MultimodalInput
  value={input}
  onChange={setInput}
  onSend={handleSend}
  onImageUpload={handleImageUpload}
  onFileUpload={handleFileUpload}
  onWebSearch={handleWebSearch}
  onVoiceStart={handleVoiceStart}
  onVoiceStop={handleVoiceStop}
  isRecording={isRecording}
  isPending={isPending}
  attachedImages={attachedImages}
  attachedFiles={attachedFiles}
  onRemoveImage={onRemoveImage}
  onRemoveFile={onRemoveFile}
/>

Приклад використання

// Голосовий ввід
const handleVoiceStart = () => {
  voiceService.startRecording(
    (transcript, isFinal) => {
      if (isFinal) {
        setInput(transcript);
      }
    },
    (error) => console.error('Voice error:', error)
  );
};

// Веб-пошук
const handleWebSearch = async (query: string) => {
  const results = await webSearchService.search(query, agentId);
  const formattedResults = webSearchService.formatResults(results);
  sendMessageMutation.mutate(formattedResults);
};

📚 База знань агента

Можливості

Завантаження файлів
- Drag & drop інтерфейс
- Валідація типу та розміру
- Відображення прогресу завантаження
Індексація
- Векторна база даних (embeddings)
- Графова база даних (entities, relationships)
- Статуси: pending → vectorized → graphed → completed
Управління
- Видалення файлів
- Повторна індексація при помилках
- Статистика (кількість файлів, розмір, статуси)
Візуалізація статусів
- Vector DB: ✅ / ⏳
- Graph DB: ✅ / ⏳
- Помилки з детальним повідомленням

Компонент: `KnowledgeBase`

<KnowledgeBase
  agentId="helion"
  agentName="Helion Energy Union"
  files={knowledgeFiles}
  onUpload={handleKnowledgeUpload}
  onDelete={handleKnowledgeDelete}
  onReindex={handleKnowledgeReindex}
/>

Структура файлу

interface KnowledgeFile {
  id: string;
  name: string;
  size: number;
  type: string;
  uploadedAt: string;
  status: 'pending' | 'vectorized' | 'graphed' | 'completed' | 'error';
  vectorDbStatus?: boolean;    // Індексовано у векторній БД
  graphDbStatus?: boolean;     // Додано у графову БД
  errorMessage?: string;
}

Backend API endpoints

POST   /api/knowledge/upload          # Завантажити файл
GET    /api/knowledge/{agent_id}/files # Список файлів
DELETE /api/knowledge/{agent_id}/files/{file_id} # Видалити файл
POST   /api/knowledge/{agent_id}/files/{file_id}/reindex # Повторна індексація
GET    /api/knowledge/{agent_id}/stats # Статистика
POST   /api/knowledge/{agent_id}/search # Пошук у базі знань

⚙️ Системний промпт

Можливості

Відображення поточного промпту
- Форматування з syntax highlighting
- Read-only режим за замовчуванням
Редагування
- Textarea з syntax highlighting
- Збереження змін
- Скасування редагування
Скидання
- Повернення до значення за замовчуванням
- Підтвердження дії
Індикатор статусу
- "Збережено" після успішного збереження
- Кількість символів

Компонент: `SystemPromptEditor`

<SystemPromptEditor
  agentId="helion"
  agentName="Helion Energy Union"
  systemPrompt={systemPrompt}
  onSave={handleSystemPromptSave}
  onReset={handleSystemPromptReset}
/>

Системні промпти за замовчуванням

const DEFAULT_SYSTEM_PROMPTS: Record<string, string> = {
  helion: `Ти - Helion, AI-агент платформи Energy Union...`,
  greenfood: `Ти — GREENFOOD Assistant, ERP для крафтових виробників...`,
  yaromir: `Ти - Yaromir, оркестратор CrewAI команди...`,
  daarwizz: `Ти - Daarwizz, головний AI-агент DAARION.city...`,
};

💬 Telegram інтеграція

Можливості

Підключення бота
- Введення токену від @BotFather
- Автоматична валідація
- Отримання інформації про бота
Статус підключення
- Індикатор: Підключено / Не підключено
- Дата підключення
- Ім'я бота (@username)
Управління
- Відкриття бота у Telegram
- Копіювання посилання на бота
- Оновлення токену
- Від'єднання бота
Інструкції
- Покрокове керівництво
- Посилання на @BotFather
- Формат токену

Компонент: `TelegramIntegration`

<TelegramIntegration
  agentId="helion"
  agentName="Helion Energy Union"
  isConnected={telegramConnected}
  botUsername="helion_bot"
  botToken="1234567890:ABCdef..."
  connectionDate="2025-11-23T10:00:00Z"
  onConnect={handleTelegramConnect}
  onDisconnect={handleTelegramDisconnect}
  onUpdateToken={handleTelegramUpdateToken}
/>

Приклад токену

1234567890:ABCdefGHIjklMNOpqrsTUVwxyz

🔧 Інтеграція з головним компонентом

`MicroDaoOrchestratorChatEnhanced`

Головний компонент, що об'єднує всі функції:

import { MicroDaoOrchestratorChatEnhanced } from './MicroDaoOrchestratorChatEnhanced';

// Використання
<MicroDaoOrchestratorChatEnhanced
  orchestrator={orchestrator}
  orchestratorAgentId="helion"
  onClose={() => setShowChat(false)}
/>

State Management

// Multimodal state
const [isRecording, setIsRecording] = useState(false);
const [attachedImages, setAttachedImages] = useState<File[]>([]);
const [attachedFiles, setAttachedFiles] = useState<File[]>([]);

// Knowledge Base state
const [knowledgeFiles, setKnowledgeFiles] = useState<KnowledgeFile[]>([]);

// System Prompt state
const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPTS[agentId]);

// Telegram state
const [telegramConnected, setTelegramConnected] = useState(false);
const [telegramBotUsername, setTelegramBotUsername] = useState<string>();
const [telegramBotToken, setTelegramBotToken] = useState<string>();

// UI state
const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
const [showSystemPrompt, setShowSystemPrompt] = useState(false);
const [showTelegram, setShowTelegram] = useState(false);

🎨 UI/UX

Структура інтерфейсу

┌─────────────────────────────────────────┐
│  [Chat Header]                      [X] │
│  Оркестратор мікроДАО - Helion          │
├─────────────────────────────────────────┤
│                                         │
│  [Messages Area]                        │
│  - User messages (right, purple)        │
│  - Agent messages (left, white)         │
│  - Loading spinner                      │
│                                         │
├─────────────────────────────────────────┤
│  [Multimodal Input]                     │
│  🎤 🖼️ 📎 🌐 [Text Input]        [Send] │
│  - Voice, Images, Files, Web Search     │
└─────────────────────────────────────────┘

▼ База знань агента
┌─────────────────────────────────────────┐
│  📊 База знань - Helion                 │
│  [Завантажити файл]                     │
├─────────────────────────────────────────┤
│  📄 document.pdf (2.5 MB)               │
│     ✅ Векторна БД  ✅ Графова БД       │
│  📄 guide.md (150 KB)                   │
│     ⏳ Обробка...                       │
└─────────────────────────────────────────┘

▼ Системний промпт агента
┌─────────────────────────────────────────┐
│  ⚙️ Системний промпт - Helion           │
│  [Редагувати]  [Скинути]                │
├─────────────────────────────────────────┤
│  Ти - Helion, AI-агент...               │
│  [Системний промпт відображається тут]  │
└─────────────────────────────────────────┘

▼ Інтеграція з Telegram
┌─────────────────────────────────────────┐
│  💬 Telegram інтеграція - Helion        │
│  ✅ Підключено                          │
├─────────────────────────────────────────┤
│  Ім'я бота: @helion_bot                 │
│  Підключено: 23.11.2025 10:00           │
│  [Відкрити бота]  [Копіювати посилання] │
│  [Від'єднати бота]                      │
└─────────────────────────────────────────┘

Collapsible секції

Кожна секція може бути згорнута/розгорнута:

<button
  onClick={() => setShowKnowledgeBase(!showKnowledgeBase)}
  className="w-full flex items-center justify-between..."
>
  <span>База знань агента</span>
  {showKnowledgeBase ? <ChevronUp /> : <ChevronDown />}
</button>

{showKnowledgeBase && <KnowledgeBase {...props} />}

🔌 API інтеграція

Router endpoints

// Чат з агентом
POST /route
{
  "agent": "helion",
  "message": "Привіт!",
  "mode": "chat",
  "payload": {
    "context": {
      "system_prompt": "...",
      "images": ["base64..."],
      "files": ["filename.pdf"]
    }
  }
}

// Веб-пошук
POST /route
{
  "agent": "helion",
  "message": "Пошук...",
  "mode": "web_search",
  "payload": {
    "search_query": "renewable energy",
    "max_results": 5
  }
}

Backend API (майбутнє)

// База знань
POST   /api/knowledge/upload
GET    /api/knowledge/{agent_id}/files
DELETE /api/knowledge/{agent_id}/files/{file_id}
POST   /api/knowledge/{agent_id}/files/{file_id}/reindex
GET    /api/knowledge/{agent_id}/stats
POST   /api/knowledge/{agent_id}/search

// Системний промпт
GET    /api/agents/{agent_id}/system_prompt
PUT    /api/agents/{agent_id}/system_prompt
POST   /api/agents/{agent_id}/system_prompt/reset

// Telegram
POST   /api/telegram/{agent_id}/connect
DELETE /api/telegram/{agent_id}/disconnect
GET    /api/telegram/{agent_id}/status
PUT    /api/telegram/{agent_id}/token

📦 Залежності

Існуючі

React 18
TypeScript
Tailwind CSS
lucide-react (іконки)
@tanstack/react-query

Браузерні API

Web Speech API (голосовий ввід)
SpeechSynthesis API (Text-to-Speech)
FileReader API (читання файлів)
Drag & Drop API

🚀 Використання

1. Базовий чат з мультимодальністю

import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';

function MyPage() {
  return (
    <MicroDaoOrchestratorChatEnhanced
      orchestratorAgentId="helion"
      onClose={() => console.log('Chat closed')}
    />
  );
}

2. З оркестратором

const orchestrator = {
  id: 'helion',
  name: 'Helion Energy Union',
  description: 'AI-агент для Energy Union',
  avatar: '/avatars/helion.png',
};

<MicroDaoOrchestratorChatEnhanced
  orchestrator={orchestrator}
/>

3. Інтеграція у сторінку кабінету

// src/pages/MicroDaoCabinetPage.tsx
import { MicroDaoOrchestratorChatEnhanced } from '@/components/microdao/MicroDaoOrchestratorChatEnhanced';

export function MicroDaoCabinetPage() {
  const [showChat, setShowChat] = useState(true);
  
  return (
    <div className="container mx-auto p-6">
      {/* Інший контент сторінки */}
      
      {showChat && (
        <div className="fixed bottom-4 right-4 w-[500px] z-50">
          <MicroDaoOrchestratorChatEnhanced
            orchestratorAgentId={microDao.orchestrator_agent_id}
            onClose={() => setShowChat(false)}
          />
        </div>
      )}
    </div>
  );
}

🔮 Майбутні покращення

1. Voice Output (TTS)

// Автоматичне промовляння відповідей агента
const handleAssistantMessage = (message: string) => {
  voiceService.speak(message, 'uk-UA');
};

2. Image Recognition

// Розпізнавання об'єктів на зображеннях
const analyzeImage = async (image: File) => {
  const response = await fetch(`${routerUrl}/route`, {
    method: 'POST',
    body: JSON.stringify({
      agent: agentId,
      mode: 'vision',
      payload: { image: await fileToBase64(image) },
    }),
  });
  return await response.json();
};

3. Real-time Collaboration

// WebSocket для синхронізації між користувачами
const ws = new WebSocket('ws://api/agents/helion/chat');
ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  setMessages((prev) => [...prev, message]);
};

4. Context Memory

// Збереження історії чату
const saveConversation = async () => {
  await fetch(`${apiUrl}/api/conversations`, {
    method: 'POST',
    body: JSON.stringify({
      agent_id: agentId,
      messages: messages,
      metadata: { knowledgeFiles, systemPrompt },
    }),
  });
};

✅ Чекліст функцій

Мультимодальність

✅ Голосовий ввід (Speech-to-Text)
✅ Завантаження зображень
✅ Завантаження файлів
✅ Веб-пошук
⏳ Голосовий вивід (Text-to-Speech) - планується
⏳ Розпізнавання зображень - планується

База знань

✅ Завантаження файлів
✅ Drag & drop
✅ Статуси індексації
✅ Векторна БД індикатор
✅ Графова БД індикатор
✅ Видалення файлів
✅ Повторна індексація
✅ Статистика
⏳ Backend API - потрібна реалізація

Системний промпт

✅ Відображення промпту
✅ Редагування
✅ Збереження
✅ Скидання до значення за замовчуванням
⏳ Backend збереження - потрібна реалізація

✅ Підключення бота
✅ Статус підключення
✅ Відображення інформації про бота
✅ Від'єднання
✅ Інструкції
⏳ Backend інтеграція - потрібна реалізація

📝 Висновок

Створено повнофункціональну систему розширеного чату з оркестраторами мікроДАО, яка включає:

4 нових компоненти (MultimodalInput, KnowledgeBase, SystemPromptEditor, TelegramIntegration)
3 нових сервіси (voiceService, webSearchService, knowledgeBaseService)
1 головний компонент (MicroDaoOrchestratorChatEnhanced)

Всі компоненти повністю типізовані, мають модульну структуру та можуть бути легко інтегровані у існуючі сторінки.

Статус: ✅ Frontend реалізовано, очікує Backend API інтеграції

20 KiB Raw Blame History Unescape Escape

Розширений чат з оркестраторами мікроДАО

🎯 Огляд

📁 Структура компонентів

🎤 Мультимодальний ввід

Можливості

Компонент: MultimodalInput

Приклад використання

📚 База знань агента

Можливості

Компонент: KnowledgeBase

Структура файлу

Backend API endpoints

⚙️ Системний промпт

Можливості

Компонент: SystemPromptEditor

Системні промпти за замовчуванням

💬 Telegram інтеграція

Можливості

Компонент: TelegramIntegration

Приклад токену

🔧 Інтеграція з головним компонентом

MicroDaoOrchestratorChatEnhanced

State Management

🎨 UI/UX

Структура інтерфейсу

Collapsible секції

🔌 API інтеграція

Router endpoints

Backend API (майбутнє)

📦 Залежності

Існуючі

Браузерні API

🚀 Використання

1. Базовий чат з мультимодальністю

2. З оркестратором

3. Інтеграція у сторінку кабінету

🔮 Майбутні покращення

1. Voice Output (TTS)

2. Image Recognition

3. Real-time Collaboration

4. Context Memory

✅ Чекліст функцій

Мультимодальність

База знань

Системний промпт

Telegram

📝 Висновок

20 KiB

Raw Blame History

Компонент: `MultimodalInput`

Компонент: `KnowledgeBase`

Компонент: `SystemPromptEditor`

Компонент: `TelegramIntegration`

`MicroDaoOrchestratorChatEnhanced`