Glow Client Package

PreviousNext

React components and hooks for Glow AI chat

Overview

@zooly/glow-client is a React client package that provides the chat UI and tool rendering for the Glow system. It is framework-agnostic for core logic but integrates with Next.js and uses Tailwind for styling.

Package Details

  • Package Name: @zooly/glow-client
  • Location: packages/glow-client
  • Type: React component library (client-side)

Key Exports

Components

ExportPurpose
GlowChatClientMain chat container; renders message queue, input form, avatar
AvatarChatTopAvatar and chat name header
GlowChatInputFormInput area with send and attachments
ChatHeaderHeader with logo, reset, menu
GlowChatMessageQueueMessage list with user/assistant parts
SlideOutComponentSlide-out panel for tools
FilePickerFile upload picker
AudioPlayerAudio playback
RecordButtonAudio recording button
PreCacheImportDialogDialog for pre-cache import
PublicDataDisplayRenders public message data

Hooks & Context

ExportPurpose
useGlowChatChat hook wrapping useChat; handles API, glowChatId, persistence
useGlowAIAccess to GlowAIProvider context (sendMsgOnBehalfOfUser, resetToMessage, etc.)
useGlowChatMsgPartCurrent message/part for tool components
useGlowCommunicationCross-component communication
usezoolyStoreZustand store (currentGlowChatId, etc.)

Utilities

ExportPurpose
handleClientUploadClient-side file upload handling
createClientMsgStateStoreStore for client message state
applyChatBrandingSettingsApply branding to chat UI
fetchzooly, fetchChatBrandingSettings, fetchChatSettingsFetch chat config

Widgets

ExportPurpose
GetUserImagesImage picker widget
GetUserCameraCaptureCamera capture widget
GetUserVideosVideo picker widget
GetUserVideoCaptureVideo capture widget
GetUserAudioAudio picker widget
GetUserFileFile picker widget
RateToolRating widget
login-options, LoginFormProvider, enter-email-form, enter-otp-formLogin widgets

Tool Registry

TOOL_REGISTRY maps tool names to React components. Tools include:

  • Media: askUserToUploadImage, askUserToCaptureImage, displayImage, downloadImage, playVideo, playAudio, askUserToUploadVideo, askUserToRecordAudio, etc.
  • Choices: askUserToChooseOptionWithBtns, askUserToMultiChooseFromListOfBtns
  • Memory: getFromMemory, saveToMemory
  • Other: askUserToRate, login, slideOut, downloadFile

Dependencies

  • @ai-sdk/react - useChat
  • ai - AI SDK types
  • @zooly/client - Shared client utilities
  • @zooly/util - Shared utilities
  • react (peer)
  • next (peer)
  • next-intl (peer)
  • zustand (peer)
  • react-h5-audio-player - Audio playback
  • sonner - Toasts

Usage

import { GlowChatClient } from "@zooly/glow-client";
import type { GlowChat } from "@zooly/types";

<GlowChatClient glowChat={glowChat} chatBrandingSettings={branding} />

See App Integration for full integration steps.