對話階段 - Clean Architecture in TypeScript

 1Let's update `src/view/Chat.tsx` to provide make chatId depend on the session.
 2
 3Use Hono JSX instead of React JSX, and create a session context to manage the session ID.
 4
 5## Session Context
 6
 7Create a new `src/view/session.tsx` to provide a session context.
 8
 9- Define a `SessionContext` using `createContext`.
10- Use LocalStorage to store the session ID, make it expire after 60 minutes.
11- The session ID should be a random UUID via `crypto.randomUUID()`.
12- Add `useSession` hook to access the session context.
13
14## App Component
15
16- Update `src/view/App.tsx` to use the `SessionContext`.
17
18## Chat Component
19
20- Update `src/view/Chat.tsx` to use the `useSession` hook.
21- Replace the hardcoded `chatId` with the session ID from the context.
22
23## Backend
24
25Remove the mock data for hardcoded `chatId` in the backend.

1Add a top bar in chat view to display the session ID and a button to regenerate it.

1The scroll to bottom will scroll all page, we expect only chat messages to scroll.

 1Currently, we save the data in memory. Let's refactor to use Cloudflare KV for persistence.
 2
 3## wrangler.json
 4
 5Add new `kv_namespaces` to `wrangler.json`:
 6
 7```json
 8{
 9  "kv_namespaces": [
10	{
11	  "binding": "STORAGE",
12	  "id": "your-kv-namespace-id"
13	}
14  ]
15}
16```
17
18Run `npm cf-typegen` to update the types.
19
20## Repository
21
22Update the repository to use Cloudflare KV for data storage.
23
24We can use `import { env } from "cloudflare:workers";` to access bindings directly.
25
26For different repository, use `chat:` as prefix for keys, e.g., `chat:sessionId`.
27
28When set value, the TTL is set to 60 minutes.