feat(website): apply react.use for ShoppingChat and stop using async component (#436)

Author: ryoppippi

packages/chat/src/examples/shopping/ShoppingChatApplication.tsx

@@ -6,11 +6,12 @@ import {
   HttpLlm,
   OpenApi,
 } from "@samchon/openapi";
+import { Suspense, use } from "react";
 import typia from "typia";
 
 import { AgenticaChatApplication } from "../../AgenticaChatApplication";
 
-export function ShoppingChatApplicationSkeleton() {
+function ShoppingChatApplicationSkeleton() {
   return (
     <div>
       <h2>Loading Swagger document</h2>
@@ -21,38 +22,58 @@ export function ShoppingChatApplicationSkeleton() {
   );
 }
 
-export async function ShoppingChatApplication(props: ShoppingChatApplication.IProps) {
-  const application = HttpLlm.application({
-    model: props.schemaModel,
-    document: OpenApi.convert(
-      await fetch(
-        "https://raw.githubusercontent.com/samchon/shopping-backend/refs/heads/master/packages/api/customer.swagger.json",
-      )
-        .then(async r => r.json() as unknown)
-        .then(v => typia.assert<Parameters<typeof OpenApi.convert>[0]>(v)),
-    ),
-  });
+function AsyncAgenticaChatApplication({ agentPromise, title }: { agentPromise: Promise<Agentica<ILlmSchema.Model>>; title: string }) {
+  const agent = use(agentPromise);
+  return (
+    <AgenticaChatApplication
+      agent={agent}
+      title={title}
+    />
+  );
+}
 
-  const agent: Agentica<ILlmSchema.Model> = new Agentica({
-    model: props.schemaModel,
-    vendor: {
-      api: props.api,
-      model: props.vendorModel,
-    },
-    controllers: [
-      {
-        protocol: "http",
-        name: "main",
-        application,
-        connection: props.connection,
+export function ShoppingChatApplication(props: ShoppingChatApplication.IProps) {
+  const getAgent = async () => {
+    const application = HttpLlm.application({
+      model: props.schemaModel,
+      document: OpenApi.convert(
+        await fetch(
+          "https://raw.githubusercontent.com/samchon/shopping-backend/refs/heads/master/packages/api/customer.swagger.json",
+        )
+          .then(async r => r.json() as unknown)
+          .then(v => typia.assert<Parameters<typeof OpenApi.convert>[0]>(v)),
+      ),
+    });
+    const agent: Agentica<ILlmSchema.Model> = new Agentica({
+      model: props.schemaModel,
+      vendor: {
+        api: props.api,
+        model: props.vendorModel,
       },
-    ],
-    config: {
-      locale: props.locale,
-    },
-  });
+      controllers: [
+        {
+          protocol: "http",
+          name: "main",
+          application,
+          connection: props.connection,
+        },
+      ],
+      config: {
+        locale: props.locale,
+      },
+    });
+    return agent;
+  };
+
+  const agentPromise = getAgent();
+
   return (
-    <AgenticaChatApplication agent={agent} title="Agentica Shopping Chatbot" />
+    <Suspense fallback={<ShoppingChatApplicationSkeleton />}>
+      <AsyncAgenticaChatApplication
+        agentPromise={agentPromise}
+        title="Agentica Shopping Chatbot"
+      />
+    </Suspense>
   );
 }
 export namespace ShoppingChatApplication {

packages/chat/src/examples/shopping/index.tsx

@@ -10,12 +10,12 @@ import {
 } from "@mui/material";
 import ShoppingApi from "@samchon/shopping-api";
 import OpenAI from "openai";
-import { Suspense, useState } from "react";
+import { useState } from "react";
 import { createRoot } from "react-dom/client";
 
 import { VendorConfigurationMovie } from "../common/VendorConfigurationMovie";
 
-import { ShoppingChatApplication, ShoppingChatApplicationSkeleton } from "./ShoppingChatApplication";
+import { ShoppingChatApplication } from "./ShoppingChatApplication";
 
 function Application() {
   const [config, setConfig] = useState<VendorConfigurationMovie.IConfig>(
@@ -78,9 +78,7 @@ function Application() {
     >
       {next !== null
         ? (
-            <Suspense fallback={<ShoppingChatApplicationSkeleton />}>
-              <ShoppingChatApplication {...next} />
-            </Suspense>
+            <ShoppingChatApplication {...next} />
           )
         : (
             <FormControl