對話紀錄 API - Clean Architecture in TypeScript

 1# Coding Guidelines
 2
 3These are coding guidelines that should be followed when writing code for the application.
 4
 5## Hono RPC
 6
 7We use Hono RPC style for our API endpoints. Make sure to follow the conventions outlined in the [Hono RPC documentation](https://hono.dev/docs/guides/rpc).
 8
 9### Server
10
11The RPC service is RESTful which defines in the `src/controller` directory. Each service should have its own controller file, and define like this:
12
13```typescript
14import { Hono } from "hono";
15import { z } from "zod";
16import { zValidator } from "@hono/zod-validator";
17
18const app = new Hono<{ Bindings: Env }>();
19
20const echoSchema = z.object({
21  message: z.string(),
22});
23
24const routes = app
25  .get("/", (c) => {
26	  return c.json({ message: "Hello, World!" });
27  })
28  .post("/", zValidator("json", echoSchema),	(c) => {
29	  const body = c.req.json();
30
31	  return c.json({ echo: body });
32 });
33
34 export default routes;
35```
36
37The above example shows how to define a simple RPC service with a GET and POST endpoint. The `zValidator` is used to validate the request body against the defined schema.
38
39The `routes` MUST be exported as the default export of the module. It is important to Hono RPC to know the type of the controller and its endpoints.
40
41The service will register itself as a route in the Hono application, and can be accessed via the defined endpoints.
42
43```typescript
44import { Hono } from "hono";
45
46import EchoController from "@/controller/echo";
47
48const app = new Hono<{ Bindings: Env }>();
49app.route("/api/v1/echo", EchoController);
50```
51
52### Client
53
54The RPC client is defined in the `src/api` directory. Each service should have its own client file, and define like this:
55
56```typescript
57import { hc } from "hono/client";
58
59
60import EchoController from "@/controller/echo";
61
62const client = hc<typeof EchoController>('/api/v1/echo');
63
64export type EchoSchema = {
65  echo: string;
66};
67
68export async function echo(message: string) {
69  const response = await client.index.$post({ json: { message } });
70  return (await response.json()) as EchoSchema;
71}
72```
73
74The type of the client is inferred from the controller, and the client can be used to make requests to the defined endpoints.

 1Refactor `Chat` to get message from backend. 
 2
 3## Route
 4
 5Update `src/index.tsx` to mounte `/api/chat` to `ChatController`
 6
 7## ChatController
 8
 9Implement a `GET /:id` endpoint with mock data, no need care about the `id` parameter for now.
10
11## Chat API
12
13Define a Chat API client in `src/api/chat.ts` to fetch chat messages from the backend.
14
15## Chat Component
16
17Update `src/components/Chat.tsx` to use the Chat API client to fetch messages from the backend.

 1// src/api/chat.ts
 2
 3import { hc } from "hono/client";
 4import ChatController from "@/controller/chat";
 5
 6const client = hc<typeof ChatController>('/api/chat');
 7
 8export interface Message {
 9  id: string;
10  text: string;
11  isUser: boolean;
12  timestamp: string;
13}
14
15export interface ChatResponse {
16  messages: Message[];
17}
18
19export async function getChatMessages(chatId: string): Promise<Message[]> {
20  const response = await client[":id"].$get({
21    param: { id: chatId }
22  });
23
24  const data = await response.json() as ChatResponse;
25  return data.messages;
26}

 1// src/controller/chat.ts
 2
 3import { Hono } from "hono";
 4import { z } from "zod";
 5
 6const app = new Hono<{ Bindings: Env }>();
 7
 8// Mock data for chat messages
 9const mockMessages = [
10  {
11    id: "1",
12    text: "Hello! How can I help you today?",
13    isUser: false,
14    timestamp: new Date().toLocaleTimeString()
15  },
16  {
17    id: "2",
18    text: "I have a question about the application.",
19    isUser: true,
20    timestamp: new Date().toLocaleTimeString()
21  },
22  {
23    id: "3",
24    text: "Sure, I'd be happy to help with any questions you have about the application.",
25    isUser: false,
26    timestamp: new Date().toLocaleTimeString()
27  }
28];
29
30// GET /:id endpoint to fetch chat messages
31const routes = app.get("/:id", (c) => {
32  // For now, we're ignoring the id parameter and returning mock data
33  return c.json({ messages: mockMessages });
34});
35
36export default routes;

 1  useEffect(() => {
 2    const fetchMessages = async () => {
 3      try {
 4        // For now, we're using a hardcoded chat ID
 5        const chatId = "default";
 6        const fetchedMessages = await getChatMessages(chatId);
 7        setMessages(fetchedMessages);
 8      } catch (error) {
 9        console.error("Failed to fetch messages:", error);
10      } finally {
11        setIsLoading(false);
12      }
13    };
14
15    fetchMessages();
16  }, []);