Чат с агентом МойЧата — из чего собран

Для агента-разработчика: AGENT.md — самодостаточная инструкция: библиотеки, тема, контракт сервера, полные исходники всех модулей и чек-лист приёмки. Проверено: код из файла, разложенный по пустому проекту, собирается без ошибок TypeScript и показывает этот же чат.

Демо на соседней вкладке — копия внешнего вида на чистом HTML/JS. Ниже — модули, библиотеки и ключевые куски настоящей реализации.

1. Библиотеки

npm i react react-dom react-router-dom react-markdown remark-gfm lucide-react sonner \
  @base-ui/react class-variance-authority clsx tailwind-merge @fontsource-variable/geist
npm i -D vite @vitejs/plugin-react tailwindcss @tailwindcss/vite typescript
npx shadcn@latest add button dropdown-menu dialog tooltip select checkbox input popover command

2. Модули фронта

3. Сервер

4. Как ходят данные

Composer ──onSend(text, fileIds)──▶ POST /api/agent-chats/:id/messages
                                        │  сервер кладёт реплику в агента
   ◀── SSE /api/events ─────────────────┘
       agent:start    → «Работает · шаг…»
       agent:tool     → строка в блоке «Шаги»
       agent:delta    → текст ответа печатается
       agent:done     → сообщение сохранено, кнопки под ним
«Стоп»               ──▶ POST /api/agent-chats/:id/stop   (мягкий interrupt)

5. Ключевой код

Всплывашка над выделением (AgentChatView.tsx)

const QUOTE_ACTIONS = [
  { label: 'Цитировать', note: undefined,  icon: Quote,      tone: 'text-primary' },
  { label: 'Делай',      note: 'делай',    icon: Play,       tone: 'text-emerald-400' },
  { label: 'Не понял',   note: 'не понял', icon: HelpCircle, tone: 'text-amber-400' },
] as const

document.addEventListener('selectionchange', () => {
  const s = window.getSelection()
  const text = s && !s.isCollapsed ? s.toString().trim() : ''
  // источник — data-quote-src сообщения, где началось и кончилось выделение
  setSel({ text, source, x: r.left + r.width / 2, y: r.top })
})
// клик → injectQuote(draftKey, sel.text, sel.source, action.note)

Формат цитаты для агента (drafts.ts)

export function quoteBlock(q: QuoteItem) {
  return [...(q.source ? [`[${q.source}]`] : []), ...q.text.split('\n')]
    .map((l) => `> ${l}`).join('\n')
}
// агент получает:
// > [Opus · 12:44]
// > Правка на сервере, фронт собирается отдельно…
// делай

Кнопки поля ввода (AgentChatView.tsx → Composer actions)

<Composer onSend={sendFromComposer} mentions={mentionTargets}
  actions={<>
    <DropdownMenu>…<Zap/> короткие ответы: quick('Отвечай коротко, до 50 слов')…</DropdownMenu>
    <Button aria-pressed={smart} onClick={() => setSmart(v => !v)}><Brain/></Button>      {/* умный режим */}
    <Button onClick={() => quick('Зафиксируй работу в git')}><GithubCat/></Button>
    <Button onClick={() => quick('Как дела?')}><MessageCircleQuestion/></Button>
    {live && <Button onClick={stop}><Square/> Стоп</Button>}
  </>} />

Поделиться в другую ветку (AgentChatView.tsx + ShareMenu.tsx)

// «поделиться» под сообщением → режим отметки, галочки слева
const [picked, setPicked] = useState<Set<string> | null>(null)
const startShare = (id: string) => setPicked(new Set([id]))

// панель над полем ввода: «отмечено N» + кнопка «В ветку…»
<ShareMenu items={shareItems} fromChatId={chatId} onDone={() => setPicked(null)} />

// ShareMenu: Popover со списком веток всех проектов и поиском (cmdk)
const go = (projectId: string, chatId: string) => {
  for (const q of items) injectQuote(`draft:agent:${chatId}`, q.text, q.source)
  onDone()
  navigate(`/p/${projectId}/c/${chatId}`)   // ветка открывается, цитаты уже в поле ввода
}

Раскрывашка в ответе (Markdown.tsx)

code: ({ className, children }) => {
  if (/language-details\b/.test(className || ''))
    return <DetailsBlock text={String(children)} />   // первая строка — заголовок
  …
}

6. Что в демо упрощено

• Нет сервера: ответы агента заготовлены и выбираются по тексту реплики.
• Markdown — свой мини-рендер вместо react-markdown.
• Диктовка печатает заготовленную фразу, файл никуда не отправляется.
• Иконки — тот же Lucide, но UMD-сборка (lucide.min.js), а не lucide-react.