Feature: AI Ticker Chat
Relevant source files
The following files were used as context for generating this wiki page:The AI Ticker Chat is an interactive, conversational AI feature integrated into the stock quote page. It allows users to ask questions about a specific stock ticker and receive responses from an AI model that is prompted to behave as if it were the stock itself. This provides an engaging and informative way for users to gain insights and advice.
The component is built using React and leverages the OpenAI API to provide real-time, streaming responses. It is presented within a collapsible accordion UI element, allowing users to show or hide the chat interface as needed.
Component Overview
The TickerChat feature is encapsulated in a single React functional component. It manages its own state for the conversation, user input, and loading status. It is designed to be a self-contained module that only requires a ticker symbol to function.
Sources: client/src/components/TickerChat/index.tsx:21-23, client/src/app/quote/[ticker]/page.tsx:128
Component Integration
The TickerChat component is rendered within the StockPage, which is the main page for displaying detailed information about a single stock.
This diagram shows the parent-child relationship between the StockPage and the TickerChat component.
Properties
The component accepts a single prop:
| Prop | Type | Description |
|---|---|---|
ticker | string | The stock ticker symbol (e.g., "AAPL"). |
Sources: client/src/components/TickerChat/index.tsx:21
State Management
The component uses React's useState hook to manage its internal state.
| State Variable | Type | Description |
|---|---|---|
messages | Message[] | An array of message objects representing the conversation history. |
input | string | The current value of the user's input field. |
loading | boolean | A flag indicating if a response from the AI is currently being fetched. |
streamingContent | string | Holds the content of the AI's response as it is being streamed. |
Sources: client/src/components/TickerChat/index.tsx:24-32
Core Logic: OpenAI Interaction
The central functionality of the Ticker Chat is its interaction with the OpenAI API. This is handled by the sendMessage asynchronous function. The feature uses the openai npm package, version ^4.72.0.
Sources: client/src/components/TickerChat/index.tsx:43-80, client/package.json:16
System Prompt
On initialization, the chat's message history is seeded with a system message. This prompt instructs the AI model on its persona and behavior.
{
role: "system",
content: `You are the stock ticker ${ticker}. You will respond as if you are the ticker itself, providing insights, information, and relevant advice for those that wants to learn about ${ticker} and potentially purchase some shares. Keep responses to the point while still being useful. Respond in paragraph format.`,
}
This initial prompt is crucial for shaping the AI's responses to align with the feature's purpose.
Sources: client/src/components/TickerChat/index.tsx:25-29
Data Flow and API Call
When a user sends a message, the sendMessage function is triggered. The following sequence diagram illustrates the entire process, from user action to receiving a streamed response.
This diagram shows the asynchronous and streaming nature of the interaction with the OpenAI service.
Sources: client/src/components/TickerChat/index.tsx:43-80
User Interface (UI)
The TickerChat UI is built as a collapsible section using the Accordion component from shadcn/ui. This allows the chat to be neatly tucked away on the stock details page.
Sources: client/src/components/TickerChat/index.tsx:84-86, client/src/components/ui/accordion.tsx
Key UI Elements
- Accordion Trigger: Displays the "Chat with ${ticker}" title and the number of messages. Clicking it expands or collapses the chat window.
- Message History: A scrollable
divthat renders the conversation. User messages are styled differently from assistant (AI) messages. - Loading Indicator: While waiting for a response and before the stream begins, a pulsing logo image is displayed.
- Input Form: A text input field for the user to type their message and a send button. The input field has a focus effect that changes its outline color to
#D4FF00.
The styling for user messages (bg-[#D4FF00] text-black) and assistant messages (bg-zinc-800 text-zinc-100) creates a clear visual distinction in the conversation.
Sources: client/src/components/TickerChat/index.tsx:87-175
Data Structures
The conversation is managed using a specific data structure for messages.
Message Interface
All messages in the messages state array conform to this interface.
| Property | Type | Description |
|---|---|---|
role | "system" | "user" | "assistant" | The originator of the message. |
content | string | The text content of the message. |
Sources: client/src/components/TickerChat/index.tsx:16-19
Conclusion
The AI Ticker Chat feature is a modern, interactive component that enhances user engagement on the stock quote page. By personifying the stock ticker through a specialized AI prompt and using a streaming API for immediate feedback, it provides a unique and valuable tool for users seeking information. Its integration within a collapsible UI element ensures it is accessible without cluttering the page. The component is well-encapsulated, making it a reusable and maintainable part of the application's frontend architecture.