StockBot

專案概述

StockBot 是一個由 Groq 驅動的 AI 聊天機器人，能夠提供即時互動的股票圖表、財務數據、新聞、篩選器等功能。這個專案結合了先進的 AI 技術和金融數據可視化，為用戶提供了一個直觀且功能豐富的股票資訊平台。

專案：

1. React 組件開發：設計並實現了多個關鍵 UI 組件，包括聊天界面、股票圖表顯示、消息渲染等。

2. TradingView 整合：將 TradingView 的各種小部件（如股票圖表、市場熱圖、財務數據等）整合到應用中，確保它們能夠根據用戶查詢動態顯示。

3. AI 響應處理：實現了處理 AI 生成內容的邏輯，包括流式文本顯示和工具調用結果的渲染。

4. 響應式設計：確保應用在不同設備上都能提供良好的用戶體驗。

使用的技術和工具

前端框架和庫

• Next.js：使用 App Router 架構，實現了服務器端渲染和客戶端交互

• React：構建用戶界面的核心庫

• TypeScript：提供了類型安全，增強了代碼的可維護性

• Tailwind CSS：用於快速構建響應式設計

• Vercel AI SDK：整合 AI 功能和流式文本顯示

AI 和數據可視化

• Groq API：連接 Llama3 70b 模型，處理自然語言查詢

• TradingView Widgets：提供專業級的股票圖表和金融數據可視化

• Streaming UI：實現了 AI 響應的流式顯示

開發工具

• pnpm：包管理工具

• ESLint：代碼質量控制

• Prettier：代碼格式化

技術亮點

1. 工具調用系統：實現了一個複雜的工具調用系統，允許 AI 根據用戶查詢選擇並調用適當的 TradingView 組件。

2. 流式 UI 渲染：使用 Vercel AI SDK 的 streamUI 功能，實現了 AI 響應的流式顯示，提高了用戶體驗。

3. 動態組件渲染：根據 AI 的工具調用結果，動態渲染不同的 TradingView 組件，如股票圖表、財務數據、市場熱圖等。

4. 多資產市場覆蓋：支持股票、外匯、債券和加密貨幣等多種資產類型的數據顯示。

挑戰與解決方案

1. AI 響應速度：通過使用 Groq 的高效能推理技術，解決了 AI 響應速度慢的問題，實現了近乎即時的回應。

2. 組件整合：成功將多個 TradingView 小部件整合到應用中，並確保它們能夠根據 AI 的指示正確顯示。

3. 用戶體驗優化：實現了加載指示器、流式文本顯示等功能，提升了用戶在等待 AI 響應時的體驗。

這個專案展示了我在前端開發、AI 整合和金融數據可視化方面的技能，以及我處理複雜技術挑戰的能力。

用戶體驗優化

在這個專案中，我實現了多項用戶體驗優化措施：

1. 智能滾動控制系統：

   • 實現了 useScrollAnchor 自定義Hook，智能監控聊天界面的滾動位置

   • 當新消息到達時自動滾動到底部，但當用戶主動滾動查看歷史消息時保持當前位置

   • 添加了滾動到底部按鈕（ButtonScrollToBottom），當用戶不在底部時顯示，方便快速返回最新消息

2. 流式文本顯示：

   • 使用 useStreamableText Hook實現了AI回應的流式顯示，讓用戶能夠即時看到生成的內容

   • 在等待完整回應時顯示打字動畫效果，提供更自然的對話體驗

3. 智能輸入框：

   • 實現了自動調整高度的文本輸入區域，隨著內容增加自動擴展

   • 通過 useEnterSubmit Hook實現了按Enter鍵提交功能，同時保留Shift+Enter換行功能

   • 在移動設備上提交後自動失焦，優化移動端體驗

4. 引導式用戶界面：

   • 在空白聊天界面顯示推薦查詢示例，幫助用戶了解系統功能

   • 示例查詢可點擊，直接發送到聊天中，降低用戶使用門檻

   • 根據屏幕尺寸動態調整顯示的示例數量，優化不同設備的顯示效果

5. 加載狀態優化：

   • 使用 SpinnerMessage 組件在AI處理查詢時顯示加載動畫

   • 保持品牌一致性的加載指示器，提升專業感

6. 響應式設計：

   • 使用Tailwind CSS實現全面響應式布局，從移動設備到桌面設備都有良好表現

   • 針對不同屏幕尺寸優化組件顯示和交互方式

7. 錯誤處理與反饋：

   • 實現了缺少API密鑰時的友好提示橫幅

   • 使用toast通知系統提供操作反饋和錯誤提示

8. 新聊天管理：

   • 提供了快速創建新聊天的按鈕和功能

   • 實現了聊天歷史的本地存儲，方便用戶查看和繼續之前的對話

這些用戶體驗優化措施共同創造了一個流暢、直觀且易於使用的股票信息查詢平台，使用戶能夠通過自然語言對話輕鬆獲取複雜的金融數據和可視化圖表。

用戶體驗優化

在這個專案中，我實現了多項用戶體驗優化措施：

1. 智能滾動控制系統：

   • 實現了 useScrollAnchor 自定義Hook，智能監控聊天界面的滾動位置

   • 當新消息到達時自動滾動到底部，但當用戶主動滾動查看歷史消息時保持當前位置

   • 添加了滾動到底部按鈕（ButtonScrollToBottom），當用戶不在底部時顯示，方便快速返回最新消息

2. 流式文本顯示：

   • 使用 useStreamableText Hook實現了AI回應的流式顯示，讓用戶能夠即時看到生成的內容

   • 在等待完整回應時顯示打字動畫效果，提供更自然的對話體驗

3. 智能輸入框：

   • 實現了自動調整高度的文本輸入區域，隨著內容增加自動擴展

   • 通過 useEnterSubmit Hook實現了按Enter鍵提交功能，同時保留Shift+Enter換行功能

   • 在移動設備上提交後自動失焦，優化移動端體驗

4. 引導式用戶界面：

   • 在空白聊天界面顯示推薦查詢示例，幫助用戶了解系統功能

   • 示例查詢可點擊，直接發送到聊天中，降低用戶使用門檻

   • 根據屏幕尺寸動態調整顯示的示例數量，優化不同設備的顯示效果

5. 加載狀態優化：

   • 使用 SpinnerMessage 組件在AI處理查詢時顯示加載動畫

   • 保持品牌一致性的加載指示器，提升專業感

6. 響應式設計：

   • 使用Tailwind CSS實現全面響應式布局，從移動設備到桌面設備都有良好表現

   • 針對不同屏幕尺寸優化組件顯示和交互方式

7. 錯誤處理與反饋：

   • 實現了缺少API密鑰時的友好提示橫幅

   • 使用toast通知系統提供操作反饋和錯誤提示

8. 新聊天管理：

   • 提供了快速創建新聊天的按鈕和功能

   • 實現了聊天歷史的本地存儲，方便用戶查看和繼續之前的對話

這些用戶體驗優化措施共同創造了一個流暢、直觀且易於使用的股票信息查詢平台，使用戶能夠通過自然語言對話輕鬆獲取複雜的金融數據和可視化圖表。