Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gcsconsultores/centros-estrategicos-gcs/llms.txt

Use this file to discover all available pages before exploring further.

The SallyChat component renders as a Radix Sheet that slides in from the right side of the screen. It maintains the full conversation history for the session, streams AI responses token-by-token from POST /api/chat, and surfaces contextual quick-action buttons when the conversation is just getting started. On desktop it appears as a max-w-md side panel; on mobile it expands to full width.

Chat API Request

Every message the user sends triggers a POST to /api/chat. The request body carries the full conversation history in Vercel AI SDK UIMessage format plus an optional context object that lets the API personalise Sally’s system prompt for the current room and visitor.
// Request body
{
  messages: UIMessage[],       // conversation history in Vercel AI SDK format
  context?: {
    currentRoom?: string,      // e.g. 'compliance'
    userName?: string          // e.g. 'Juan Pérez'
  }
}
The route returns a UIMessageStreamResponse, so the client receives text incrementally and can update the UI after each token rather than waiting for the full reply.

Quick Actions

When a conversation has two messages or fewer (messages.length <= 2), the chat panel displays three one-tap quick-action buttons above the input field. Tapping one immediately calls onSendMessage with a pre-written prompt, bypassing the text input.
Button LabelMessage Sent to Sally
Agendar reunionMe gustaria agendar una reunion con un consultor
Hacer diagnosticoQuiero realizar el diagnostico empresarial gratuito
Ver serviciosCuentame mas sobre los servicios de GCS
The quick actions are defined in SallyChat.tsx as:
const QUICK_ACTIONS = [
  { label: 'Agendar reunion',   icon: Calendar,     action: 'schedule'    },
  { label: 'Hacer diagnostico', icon: FileCheck,     action: 'diagnostic'  },
  { label: 'Ver servicios',     icon: Sparkles,      action: 'services'    },
];

SallyChat Props

The SallyChat component is controlled entirely through props. The parent component (typically VirtualOffice) owns the message list and the open/close state.
interface SallyChatProps {
  isOpen: boolean;                          // controls the Sheet open state
  onClose: () => void;                      // called when user closes the panel
  messages: SallyMessage[];                 // chat history managed by VirtualOffice
  onSendMessage: (message: string) => void; // appends message and calls API
  currentRoom: RoomId;                      // used to show current room in header
}
The currentRoom prop is also displayed in the chat header so the user always knows which virtual room they are chatting from. Sally’s responses reference that room via the system prompt context injection described in How Sally Works.

Typing Indicator

Sally shows an animated typing indicator while she is composing a reply. When the most recent message in the list has role === 'user', the component sets isTyping to true for 1.5 seconds:
useEffect(() => {
  const lastMessage = messages[messages.length - 1];
  if (lastMessage?.role === 'user') {
    setIsTyping(true);
    const timer = setTimeout(() => setIsTyping(false), 1500);
    return () => clearTimeout(timer);
  }
}, [messages]);
While isTyping is true, three dots rendered as w-2 h-2 circles bounce in sequence using staggered animationDelay values (0ms, 150ms, 300ms). The SallyAvatar component also pulses during this state by applying the animate-pulse-glow class.

Configuration

The following parameters are passed to streamText() inside app/api/chat/route.ts. Adjust them to change Sally’s verbosity or creativity.
const result = streamText({
  model: 'google/gemini-2.5-flash',
  system: systemPrompt,         // SALLY_SYSTEM_PROMPT + context
  messages: await convertToModelMessages(messages),
  maxOutputTokens: 500,
  temperature: 0.7,
  abortSignal: req.signal,
});
ParameterValueEffect
modelgoogle/gemini-2.5-flashLatest fast Gemini model
maxOutputTokens500Keeps replies concise
temperature0.7Balanced creativity and consistency
abortSignalreq.signalCancels the stream if the client disconnects
To change Sally’s personality, expertise, or the services she promotes, modify SALLY_SYSTEM_PROMPT in lib/constants.ts. The prompt controls her tone, knowledge areas, available rooms, and call-to-action behaviour — no changes to the API route are needed.
The GOOGLE_GEMINI_API_KEY environment variable is required for the chat endpoint to work. If it is missing or invalid, POST /api/chat will throw an error and Sally will display the fallback message: “Lo siento, estoy experimentando dificultades técnicas en este momento.” Make sure the key is set in your .env.local file for local development and in your Vercel project environment variables for production.

Build docs developers (and LLMs) love