Chat Skill Doc

Вьюер SKILL.md — переключатель глаз/код, «Описание» + версия, рендер markdown-тела. Открывается по клику на токен навыка.

SKILL.md

Описание

Используй для бизнес- и продуктовой аналитики, поиска инсайтов, проверки гипотез, построения отчётов.

v2.0.0

Analyst

Ты аналитик Oracul. Превращаешь запрос пользователя в проверяемые выводы из реальных данных. Никаких выдуманных метрик, колонок, имён, дат, сумм.

Как выбираешь tools

Список доступных tools — единственный источник возможностей. Описание и input schema каждого tool — твой контракт. Не угадывай имена «по смыслу» — выбирай по description.

Default-предположения

Если параметр не указан в запросе — подразумевай разумный дефолт и иди собирать данные, не задавай уточняющий вопрос.

"use client";

import { useState } from "react";
import {
  ChatSkillDoc,
  type SkillDocMode,
} from "@/components/ui/chat-skill-doc";

const BODY = `## Analyst

Ты аналитик Oracul. Превращаешь запрос пользователя в проверяемые выводы из реальных данных. Никаких выдуманных метрик, колонок, имён, дат, сумм.

### Как выбираешь tools

Список доступных tools — единственный источник возможностей. Описание и input schema каждого tool — твой контракт. Не угадывай имена «по смыслу» — выбирай по description.

### Default-предположения

Если параметр не указан в запросе — подразумевай разумный дефолт и иди собирать данные, не задавай уточняющий вопрос.`;

export default function Particle() {
  const [mode, setMode] = useState<SkillDocMode>("rendered");
  return (
    <div className="h-130 w-full max-w-3xl overflow-hidden rounded-xl border bg-card shadow-sm">
      <ChatSkillDoc
        body={BODY}
        description="Используй для бизнес- и продуктовой аналитики, поиска инсайтов, проверки гипотез, построения отчётов."
        mode={mode}
        onCopy={() => {}}
        onModeChange={setMode}
        source={`---\nname: analyst\nversion: 2.0.0\n---\n${BODY}`}
        title="SKILL.md"
        version="v2.0.0"
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-skill-doc

Использование

import { ChatSkillDoc, type SkillDocMode } from "@/components/ui/chat-skill-doc";
 
const [mode, setMode] = useState<SkillDocMode>("rendered");
 
<ChatSkillDoc
  title="SKILL.md"
  description="Бизнес- и продуктовая аналитика…"
  version="v2.0.0"
  body={markdownBody}
  source={rawSkillMd}
  mode={mode}
  onModeChange={setMode}
  onCopy={() => navigator.clipboard.writeText(rawSkillMd)}
  onClose={() => {}}
/>

Это контент модалки навыка (открывается по клику на /skill-токен в композере). Презентационный: тело рендерится через ChatResponse, действия (копировать/закрыть/сохранить) — снаружи.

API

Prop	Тип	Описание
`title`	`ReactNode`	Заголовок (по умолчанию `SKILL.md`).
`description`	`ReactNode`	Текст блока «Описание».
`version`	`ReactNode`	Бейдж версии.
`body`	`string`	Markdown-тело (рендер).
`source`	`string`	Сырой SKILL.md для режима «Исходник».
`mode`	`"rendered" \| "source"`	Режим отображения.
`onModeChange`	`(mode) => void`	Переключение глаз/код.
`onCopy` / `onClose`	`() => void`	Действия в шапке.
`actions`	`ReactNode`	Доп. действия в шапке (напр. «Сохранить навык»).

На этой странице

Установка Использование API