如何通过Gemini API实现会话跟踪以支持React网站多轮对话？

核心思路 #

Gemini API本身支持多轮对话，关键是通过会话上下文管理避免手动重复传递历史消息，以下是两种可行方案：

方案1：利用Gemini官方SDK的会话对象（推荐） #

Google提供的@google/generative-ai SDK内置会话管理能力，创建对话对象后，SDK会自动维护历史上下文，无需手动拼接历史消息。

步骤示例：

1. 安装依赖

npm install @google/generative-ai

2. React组件中实现会话逻辑

import { useState, useRef } from 'react';
import { GoogleGenerativeAI } from '@google/generative-ai';

const GeminiChat = () => {
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  // 用useRef保存会话对象，避免组件重渲染时重建会话
  const chatRef = useRef(null);
  const genAI = new GoogleGenerativeAI('你的API_KEY');

  // 初始化会话
  const initChat = () => {
    const model = genAI.getGenerativeModel({ model: 'gemini-pro' });
    chatRef.current = model.startChat({
      history: messages.map(msg => ({
        role: msg.role === 'user' ? 'user' : 'model',
        parts: [{ text: msg.content }]
      }))
    });
  };

  // 发送消息
  const sendMessage = async () => {
    if (!inputText.trim()) return;

    // 初始化会话（首次发送或重新开始时）
    if (!chatRef.current) {
      initChat();
    }

    // 添加用户消息到本地状态
    const userMessage = { role: 'user', content: inputText };
    setMessages(prev => [...prev, userMessage]);
    setInputText('');

    try {
      // 调用SDK发送消息，自动携带历史上下文
      const result = await chatRef.current.sendMessage(inputText);
      const response = await result.response;
      const text = response.text();
      // 添加AI回复到本地状态
      setMessages(prev => [...prev, { role: 'assistant', content: text }]);
    } catch (error) {
      console.error('对话出错:', error);
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="输入你的问题..."
        />
        <button onClick={sendMessage}>发送</button>
      </div>
    </div>
  );
};

export default GeminiChat;

方案2：本地维护对话历史并手动传递上下文 #

如果不想依赖SDK的会话对象，可以在React本地维护完整的对话历史数组，每次调用API时将历史消息作为history参数传入请求体。

关键代码片段：

import { useState } from 'react';

const GeminiChat = () => {
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  const API_KEY = '你的API_KEY';

  const sendMessage = async () => {
    if (!inputText.trim()) return;

    const userMessage = { role: 'user', content: inputText };
    setMessages(prev => [...prev, userMessage]);
    setInputText('');

    // 构造API请求的历史上下文
    const history = messages.map(msg => ({
      role: msg.role === 'user' ? 'user' : 'model',
      parts: [{ text: msg.content }]
    }));
    history.push({
      role: 'user',
      parts: [{ text: inputText }]
    });

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: history
        })
      });

      const data = await response.json();
      const aiText = data.candidates[0].content.parts[0].text;
      setMessages(prev => [...prev, { role: 'assistant', content: aiText }]);
    } catch (error) {
      console.error('请求出错:', error);
    }
  };

  // 渲染部分同方案1
};

长对话优化建议 #

• 历史截断：当对话历史过长时，可保留最近N轮对话，或对早期对话进行总结，减少token消耗
• 本地持久化：用localStorage或sessionStorage保存对话历史，页面刷新后可恢复会话
• 流式响应：使用Gemini的流式输出API，提升长回复的用户体验

内容的提问来源于stack exchange，提问作者RAUSHAN KUMAR THAKUR