Компоненты/Чат-сфера

Чат-сфера

Pro
28 сентября 2026

Кнопка чат-бота в виде сферы с глазами, которая по нажатию превращается в полноценный AI-чат.

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

Оформить ProВойти

Файлы

index.tsx
НазадЛуч по рамкеДалееГенерация изображения

Сфера с круглыми глазами сидит в углу экрана: глаза следят за пальцем (в вебе — за курсором) и иногда моргают, а через заданную задержку рядом всплывает подсказка. При нажатии на сферу или на подсказку она плавно перетекает в панель AI-чата, где та же сфера становится аватаром в шапке.

Панель закрывается кнопкой в шапке, а в вебе ещё и клавишей Escape. Морфинг считается на UI-потоке Reanimated; при «Уменьшении движения» сфера раскрывается в панель мгновенно, без пружины. Работает на iOS, Android и в вебе.

Вручную

Поставьте зависимости:

npm install react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
pnpm add react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
yarn add react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
bun add react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets

Скопируйте эти файлы в src/shared/components/organisms/chat-orb/:

index.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface ChatOrbProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function ChatOrb({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: ChatOrbProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Чат-сфера» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Он импортирует ещё несколько модулей — astra-rn add кладёт их рядом сам, вручную скопируйте и их:

src/shared/components/organisms/ai-chat
src/shared/components/molecules/reasoning-trace
src/shared/components/molecules/thinking-loader
src/shared/components/organisms/ai-prompt-composer
src/shared/components/organisms/streaming-message

Сфера открывает компонент «AI-чат» — добавьте и его в src/shared/components/organisms/ai-chat/.

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет astra-rn add: @/shared/components, @/shared/utils и @/shared/hooks. Нужен алиас "@/*": ["./src/*"] в tsconfig.json — или поправьте импорты под свои пути.

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

usage.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface ChatOrbProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function ChatOrb({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: ChatOrbProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Чат-сфера» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Позиция inline встраивает сферу в родительский блок вместо угла экрана, а пропсы самого чата передаются через chat.

Пропсы

Пропс
Описание
position?

Тип TChatOrbPosition

teaser?

Тип string

teaserDelay?

Тип number

defaultOpen?

Тип boolean

color?

Тип string

eyeColor?

Тип string

size?

Тип number

chat?

Тип IAIChat

style?

Тип StyleProp<ViewStyle>