feat: gemini client

Author: tobenot

apps/web/src/games/demo-with-backend/components/AiChatBackendDemo.tsx

@@ -7,6 +7,7 @@ export const AiChatBackendDemo: React.FC = () => {
 	const [input, setInput] = React.useState('');
 	const [loading, setLoading] = React.useState(false);
 	const [error, setError] = React.useState('');
+	const [stream, setStream] = React.useState(true);
 	const abortRef = React.useRef<AbortController | null>(null);
 
 	const onSend = async () => {
@@ -21,11 +22,12 @@ export const AiChatBackendDemo: React.FC = () => {
 		const assistantDraft: ChatMessage = { role: 'assistant', content: '' };
 		setMessages(prev => [...prev, assistantDraft]);
 		try {
-			await callBackendAi({
+			const result = await callBackendAi({
 				model,
 				messages: nextMessages,
 				signal: controller.signal,
-                onChunk: (m: { role: 'assistant'; content: string; reasoning_content: string; timestamp: string }) => {
+				stream,
+				onChunk: (m: { role: 'assistant'; content: string; reasoning_content: string; timestamp: string }) => {
 					assistantDraft.content = m.content;
 					setMessages(prev => {
 						const copy = [...prev];
@@ -34,6 +36,13 @@ export const AiChatBackendDemo: React.FC = () => {
 					});
 				}
 			});
+			if (!stream) {
+				setMessages(prev => {
+					const copy = [...prev];
+					copy[copy.length - 1] = { role: 'assistant', content: result.content };
+					return copy;
+				});
+			}
 		} catch (e) {
 			setError(e instanceof Error ? e.message : '调用失败');
 		} finally {
@@ -51,6 +60,10 @@ export const AiChatBackendDemo: React.FC = () => {
 			<h2 className="text-base sm:text-lg font-semibold text-gray-900">AI 后端代理演示</h2>
 			<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
 				<input className="px-3 py-2 border rounded col-span-1 sm:col-span-1" placeholder="Model" value={model} onChange={(e) => setModel(e.target.value)} />
+				<label className="flex items-center gap-2 text-sm col-span-1">
+					<input type="checkbox" checked={stream} onChange={(e) => setStream(e.target.checked)} />
+					<span>流式</span>
+				</label>
 			</div>
 			<div className="h-64 border rounded p-3 overflow-auto bg-gray-50">
 				{messages.map((m, i) => (

package.json

@@ -19,6 +19,7 @@
     "dependencies": {
         "@tobenot/basic-web-game-backend-contract": "^1.1.4",
         "@trpc/client": "^11.4.3",
+        "@trpc/server": "^11.4.3",
         "@types/react-router-dom": "^5.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

packages/services/src/AiService.ts

@@ -61,9 +61,10 @@ type BackendCallParams = {
 	messages: ChatMessage[];
 	signal?: AbortSignal;
 	onChunk?: (m: { role: 'assistant'; content: string; reasoning_content: string; timestamp: string }) => void;
+    stream?: boolean;
 };
 
-export async function callBackendAi({ model, messages, signal, onChunk }: BackendCallParams) {
+export async function callBackendAi({ model, messages, signal, onChunk, stream = true }: BackendCallParams) {
 	const baseUrl = getBackendBaseUrl();
 	const token = typeof window !== 'undefined' ? localStorage.getItem('sessionToken') : null;
 	const response = await fetch(`${baseUrl}/api/v1/chat/completions`, {
@@ -73,12 +74,19 @@ export async function callBackendAi({ model, messages, signal, onChunk }: Backen
 			...(token ? { Authorization: `Bearer ${token}` } : {})
 		},
 		signal,
-		body: JSON.stringify({ model, messages, stream: true })
+        body: JSON.stringify({ model, messages, stream })
 	});
 	if (!response.ok) {
 		const errorText = await response.text();
 		throw new Error(`AI后端请求失败: ${response.status} - ${errorText}`);
 	}
+    if (!stream) {
+        const data = await response.json();
+        const content = data?.choices?.[0]?.message?.content ?? '';
+        const newMessage = { role: 'assistant' as const, content, reasoning_content: '', timestamp: new Date().toISOString() };
+        if (onChunk) onChunk(newMessage);
+        return newMessage;
+    }
 	const newMessage = { role: 'assistant' as const, content: '', reasoning_content: '', timestamp: new Date().toISOString() };
 	const reader = response.body?.getReader();
 	if (!reader) return newMessage;

yarn.lock

@@ -945,6 +945,11 @@
   resolved "https://registry.yarnpkg.com/@trpc/client/-/client-11.4.3.tgz#0768180ede079f679408f316bbfbcb2bb88f8ba0"
   integrity sha512-i2suttUCfColktXT8bqex5kHW5jpT15nwUh0hGSDiW1keN621kSUQKcLJ095blqQAUgB+lsmgSqSMmB4L9shQQ==
 
+"@trpc/server@^11.4.3":
+  version "11.4.4"
+  resolved "https://registry.npmmirror.com/@trpc/server/-/server-11.4.4.tgz#847455e43ec236e163f0a34d95237d140618dfb7"
+  integrity sha512-VkJb2xnb4rCynuwlCvgPBh5aM+Dco6fBBIo6lWAdJJRYVwtyE5bxNZBgUvRRz/cFSEAy0vmzLxF7aABDJfK5Rg==
+
 "@types/archiver@^6.0.3":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/archiver/-/archiver-6.0.3.tgz#074eb6f4febc0128c25a205a8263da3d4688df53"