Merge branch 'main' of github.com:fancn21th/xyzchat into main

Author: fancn21th

README.md

@@ -1,5 +1,32 @@
 # xyzchat 项目
 
+## Prerequisites
+
+You better have solid understanding of the following technologies:
+
+- [React](https://reactjs.org/)
+
+You should also have a basic understanding of the following technologies:
+
+- [Next.js](https://nextjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Turbo](https://turbo.hotwired.dev/)
+- [Storybook](https://storybook.js.org/)
+- [Radix UI](https://radix-ui.com/)
+- [Shadcn UI](https://ui.shadcn.com/)
+- [AI SDK](https://sdk.vercel.ai/)
+
+Nevertheless, you can still follow along if you are willing to learn.
+
+- Firstly you would find the biz logic in mobile app only has 100 lines of code.
+
+  This is because the details are hidden in the core components as well as blah project.
+
+- Secondly you would find component development is separated from the mobile app.
+
+  Even it seems over-engineering, but I find engineer tend to have a good interface design unconsciously.
+
 ## How to setup
 
 > This is a monorepo project driven by turbo
@@ -16,13 +43,19 @@ pnpm build
 
 ## How to dev
 
-- build components
+- components
 
 ```bash
 pnpm dev:component
 ```
 
-- build mobile app
+- mobile app
+
+```bash
+pnpm build    # build the core & blah projects
+pnpm mock     # start mock server
+pnpm dev      # start mobile app
+```
 
 ## 项目目标
 

apps/mobile/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ai-sdk/azure": "0.0.32",
+    "@ai-sdk/blah": "workspace:*",
     "ai": "3.3.17",
     "clsx": "2.1.1",
     "next": "14.2.6",

apps/mobile/src/app/api/chat/route.ts

@@ -1,10 +1,13 @@
 import { streamText, convertToCoreMessages } from "ai";
-import { createAzure } from "@ai-sdk/azure";
+// import { createAzure } from "@ai-sdk/azure";
+import { createMistral } from "@ai-sdk/blah";
 
-const openai = createAzure({
-  resourceName: process.env.AZURE_OPENAI_RESOURCE_NAME, // Azure resource name
-  apiKey: process.env.AZURE_OPENAI_API_KEY,
-});
+// const openai = createAzure({
+//   resourceName: process.env.AZURE_OPENAI_RESOURCE_NAME, // Azure resource name
+//   apiKey: process.env.AZURE_OPENAI_API_KEY,
+// });
+
+const openai = createMistral({});
 
 export async function POST(request: Request) {
   const { messages } = await request.json();

apps/mock-api/src/handlers.ts

@@ -19,16 +19,69 @@ export const handlers = [
   http.get("/user", () => {
     return HttpResponse.json({ firstName: "alex" });
   }),
-  http.post("/mock/api/completion", async () => {
-    const data = new StreamData();
-    const stream = OpenAIStream(await fetch(DEFAULT_TEST_URL), {
-      onFinal() {
-        data.close();
+  // the mock api below is for AI SDK UI component sending a request to the OpenAI API
+  // http.post("/mock/chat/completions", async () => {
+  //   const data = new StreamData();
+  //   const stream = OpenAIStream(await fetch(DEFAULT_TEST_URL), {
+  //     onFinal() {
+  //       data.close();
+  //     },
+  //   });
+  //   const response = new StreamingTextResponse(stream, {}, data);
+  //   return response;
+  // }),
+  // the mock api below is for Custom Provider sending a request to the OpenAI API
+  http.post("/mock/chat/completions", async () => {
+    const encoder = new TextEncoder();
+    const content = [
+      "Hello",
+      ", ",
+      "world!",
+      " You",
+      " are",
+      " calling",
+      " a",
+      " custom",
+      " ai",
+      " api",
+    ];
+    const chunks = [
+      `data:  {"id":"6e2cd91750904b7092f49bdca9083de1","object":"chat.completion.chunk",` +
+        `"created":1711097175,"model":"mistral-small-latest","choices":[{"index":0,` +
+        `"delta":{"role":"assistant","content":""},"finish_reason":null,"logprobs":null}]}\n\n`,
+      ...content.map((text) => {
+        return (
+          `data:  {"id":"6e2cd91750904b7092f49bdca9083de1","object":"chat.completion.chunk",` +
+          `"created":1711097175,"model":"mistral-small-latest","choices":[{"index":0,` +
+          `"delta":{"role":"assistant","content":"${text}"},"finish_reason":null,"logprobs":null}]}\n\n`
+        );
+      }),
+      `data:  {"id":"6e2cd91750904b7092f49bdca9083de1","object":"chat.completion.chunk",` +
+        `"created":1711097175,"model":"mistral-small-latest","choices":[{"index":0,` +
+        `"delta":{"content":""},"finish_reason":"stop","logprobs":null}],` +
+        `"usage":{"prompt_tokens":4,"total_tokens":36,"completion_tokens":32}}\n\n`,
+      `data: [DONE]\n\n`,
+    ];
+    const stream = new ReadableStream({
+      async start(controller) {
+        try {
+          for (const chunk of chunks) {
+            controller.enqueue(encoder.encode(chunk));
+          }
+        } finally {
+          controller.close();
+        }
       },
     });
-    const response = new StreamingTextResponse(stream, {}, data);
 
-    return response;
+    return new HttpResponse(stream, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+      },
+    });
   }),
   ...servers,
 ];

packages/blah/package.json

@@ -30,7 +30,8 @@
   },
   "dependencies": {
     "@ai-sdk/provider": "0.0.21",
-    "@ai-sdk/provider-utils": "1.0.16"
+    "@ai-sdk/provider-utils": "1.0.16",
+    "eventsource-parser": "1.1.2"
   },
   "devDependencies": {
     "@types/node": "^18",

packages/blah/src/createEventSourceResponseHandler.ts

@@ -0,0 +1,48 @@
+import { ZodSchema } from "zod";
+import {
+  ResponseHandler,
+  ParseResult,
+  extractResponseHeaders,
+  safeParseJSON,
+} from "@ai-sdk/provider-utils";
+import { EmptyResponseBodyError } from "@ai-sdk/provider";
+import {
+  EventSourceParserStream,
+  ParsedEvent,
+} from "eventsource-parser/stream";
+
+export const createEventSourceResponseHandler =
+  <T>(
+    chunkSchema: ZodSchema<T>
+  ): ResponseHandler<ReadableStream<ParseResult<T>>> =>
+  async ({ response }: { response: Response }) => {
+    const responseHeaders = extractResponseHeaders(response);
+
+    if (response.body == null) {
+      throw new EmptyResponseBodyError({});
+    }
+
+    return {
+      responseHeaders,
+      value: response.body
+        .pipeThrough(new TextDecoderStream())
+        .pipeThrough(new EventSourceParserStream())
+        .pipeThrough(
+          new TransformStream<ParsedEvent, ParseResult<T>>({
+            transform({ data }, controller) {
+              // ignore the 'DONE' event that e.g. OpenAI sends:
+              if (data === "[DONE]") {
+                return;
+              }
+
+              controller.enqueue(
+                safeParseJSON({
+                  text: data,
+                  schema: chunkSchema,
+                })
+              );
+            },
+          })
+        ),
+    };
+  };

packages/blah/src/mistral-chat-language-model.ts

@@ -8,10 +8,11 @@ import {
   FetchFunction,
   ParseResult,
   combineHeaders,
-  createEventSourceResponseHandler,
+  // createEventSourceResponseHandler,
   createJsonResponseHandler,
   postJsonToApi,
 } from "@ai-sdk/provider-utils";
+import { createEventSourceResponseHandler } from "./createEventSourceResponseHandler";
 import { z } from "zod";
 import { convertToMistralChatMessages } from "./convert-to-mistral-chat-messages";
 import { mapMistralFinishReason } from "./map-mistral-finish-reason";
@@ -210,8 +211,10 @@ export class MistralChatLanguageModel implements LanguageModelV1 {
     const { args, warnings } = this.getArgs(options);
 
     const { responseHeaders, value: response } = await postJsonToApi({
-      url: `${this.config.baseURL}/chat/completions`,
-      headers: combineHeaders(this.config.headers(), options.headers),
+      // url: `${this.config.baseURL}/chat/completions`,
+      // headers: combineHeaders(this.config.headers(), options.headers),
+      url: `http://localhost:4321/mock/chat/completions`,
+      headers: combineHeaders({}, options.headers),
       body: {
         ...args,
         stream: true,