samchon · samchon · Jan 26, 2025 · Jan 26, 2025
diff --git a/website/pages/docs/swagger/chat.mdx b/website/pages/docs/swagger/chat.mdx
@@ -1,95 +1,5 @@
-import FaceIcon from "@mui/icons-material/Face";
-import SmartToyIcon from "@mui/icons-material/SmartToy";
-import { Card, CardContent, Chip } from "@mui/material";
 import { Callout, Tabs } from 'nextra/components'
 
-{/* ## Preface
-<br/>
-<div 
-  style={{
-    width: "100%",
-    padding: 15,
-    backgroundColor: "lightblue",
-  }}
->
-  <div 
-    style={{
-      display: "flex",
-      justifyContent: "flex-end",
-    }}
-  >
-    <Card 
-      elevation={3}
-      style={{
-        marginTop: 10,
-        marginBottom: 10,
-        marginLeft: "10%",
-        textAlign: "right",
-        backgroundColor: "lightyellow",
-      }}
-    >
-      <CardContent>
-        <Chip 
-          icon={<FaceIcon />} 
-          label={<b><u>User</u></b>} 
-          variant="outlined" 
-          color="primary" 
-        />
-        What you can do? Introduce yourself, please.
-      </CardContent>
-    </Card>
-  </div>
-  <div 
-    style={{
-      display: "flex",
-      justifyContent: "flex-start",
-    }}>
-    <Card 
-      elevation={3}
-      style={{
-        marginTop: 10,
-        marginBottom: 10,
-        marginRight: "10%",
-      }}
-    >
-      <CardContent>
-        <Chip 
-          icon={<SmartToyIcon />} 
-          label={<b><u>Assistant</u></b>} 
-          variant="outlined" 
-          color="success" 
-        />
-I can assist you with various functions related to shopping, including:
-
-1. **Order Management**
-   - Create new orders from a shopping cart or directly without a cart.
-   - List your existing orders.
-   - Get detailed information about a specific order.
-2. **Coupons and Discounts**
-   - List available coupons.
-   - Get details about specific coupons.
-   - Create new coupon tickets.
-3. **Sales and Reviews**
-   - List and get details about sales.
-   - Write questions and reviews for sales.
-
-If you have a specific action in mind or need help in a certain area, just let me know!
-      </CardContent>
-    </Card>
-  </div>
-</div>
-
-Chat with your backend server.
-
-You can build a Super A.I. chatbot application from swagger documents performing the LLM function calling.
-
-The super A.I. chatbot selects proper functions defined in the swagger document by analyzing conversation contexts with user. And then the super A.I. chatbot requests the user to write arguments for the selected functions by conversation text, and actually calls the API function with the arguments.
-
-If the swagger file you provide contains a reasonable level of functions, DTO schemas, and descriptions, everything is ready. Just deliver the swagger file to the Nestia A.I. Chatbot, you can start conversation with your backend server calling the API functions by chatting text. */}
-
-
-
-
 ## Super A.I. Chatbot
 <br/>
 <iframe src="https://www.youtube.com/embed/m47p4iJ90Ms?si=cvgfckN25GJhjLTB" 
@@ -102,7 +12,7 @@ If the swagger file you provide contains a reasonable level of functions, DTO sc
 
 - Shopping A.I. Chatbot Application: [https://nestia.io/chat/shopping](/chat/shopping)
 - Shopping Backend Repository: https://github.com/samchon/shopping-backend
-- Shopping Swagger Document (`@nestia/editor`): https://shopping-be.wrtn.ai/editor/
+- Shopping Swagger Document (`@nestia/editor`): [https://nestia.io/editor/?url=...](https://nestia.io/editor/?simulate=true&e2e=true&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsamchon%2Fshopping-backend%2Frefs%2Fheads%2Fmaster%2Fpackages%2Fapi%2Fswagger.json)
 
 The above demonstration video shows Shopping A.I. chatbot built with Nestia.
 

diff --git a/website/public/images/home/openai.svg b/website/public/images/home/openai.svg
diff --git a/website/public/images/home/websocket.svg b/website/public/images/home/websocket.svg
diff --git a/website/src/movies/home/HomeHeroMovie.tsx b/website/src/movies/home/HomeHeroMovie.tsx
@@ -2,9 +2,9 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
 import { Button, Grid, Typography } from "@mui/material";
 import { ReactNode } from "react";
+import React from "react";
 
 import ProductHeroLayout from "../../components/home/ProductHeroLayout";
-import React from "react";
 
 const BLUE = "rgb(0, 200, 255)";
 const CYAN = "rgb(80, 200, 0)";

diff --git a/website/src/movies/home/HomeStrengthMovie.tsx b/website/src/movies/home/HomeStrengthMovie.tsx
@@ -5,8 +5,9 @@ import HomeCodeBlock from "../../components/home/HomeCodeBlock";
 import HomeStrengthSectionMovie from "./HomeStrengthSectionMovie";
 
 const BLUE = "rgb(0, 200, 255)";
-const CYAN = "rgb(80, 200, 0)";
+const GREEN = "rgb(80, 200, 0)";
 const PURPLE = "rgb(191, 64, 191)";
+const YELLOW = "#DEC20B";
 
 const sections: HomeStrengthSectionMovie.Props[] = [
   {
@@ -16,7 +17,7 @@ const sections: HomeStrengthSectionMovie.Props[] = [
         <span style={{ color: PURPLE }}>@</span>
         <span style={{ color: BLUE }}>TypedBody()</span>
         <span style={{ color: "gray" }}>{" input: "}</span>
-        <span style={{ color: CYAN }}>IArticleCreate</span>
+        <span style={{ color: GREEN }}>IArticleCreate</span>
       </React.Fragment>
     ),
     description: (
@@ -55,14 +56,14 @@ const sections: HomeStrengthSectionMovie.Props[] = [
       </React.Fragment>
     ),
     image: "/images/home/sdk.png",
-    href: "/docs/sdk/sdk",
+    href: "/docs/sdk",
   },
   {
     title: "Mockup Simulator",
     subTitle: (
       <React.Fragment>
         <span style={{ color: "gray" }}>{"{ "}</span>
-        <span style={{ color: CYAN }}>{"simulate: "}</span>
+        <span style={{ color: GREEN }}>{"simulate: "}</span>
         <span style={{ color: BLUE }}>{"true"}</span>
         <span style={{ color: "gray" }}>{" }"}</span>
       </React.Fragment>
@@ -71,7 +72,7 @@ const sections: HomeStrengthSectionMovie.Props[] = [
       <React.Fragment>
         <p>Mockup Simulator embedded in SDK.</p>
         <br />
-        <p>Simulates validation and response of the backend.</p>
+        <p>Simulates backend API.</p>
         <br />
         <p>
           Based on{" "}
@@ -80,38 +81,89 @@ const sections: HomeStrengthSectionMovie.Props[] = [
             <span style={{ color: "gray" }}>.</span>
             <span style={{ color: PURPLE }}>assert</span>
             <span style={{ color: "gray" }}>{"<"}</span>
-            <span style={{ color: CYAN }}>T</span>
-            <span style={{ color: "gray" }}>{">()"}</span>
-          </i>{" "}
-          and{" "}
+            <span style={{ color: GREEN }}>T</span>
+            <span style={{ color: "gray" }}>{">"}</span>
+          </i>
+          ,{" "}
           <i>
             <span style={{ color: BLUE }}>typia</span>
             <span style={{ color: "gray" }}>.</span>
             <span style={{ color: PURPLE }}>random</span>
             <span style={{ color: "gray" }}>{"<"}</span>
-            <span style={{ color: CYAN }}>T</span>
-            <span style={{ color: "gray" }}>{">()"}</span>
+            <span style={{ color: GREEN }}>T</span>
+            <span style={{ color: "gray" }}>{">"}</span>
           </i>
         </p>
       </React.Fragment>
     ),
     image: "/images/home/random.png",
-    href: "/docs/sdk/simulator",
+    href: "/docs/sdk/simulate",
+  },
+  {
+    title: "WebSocket RPC",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: PURPLE }}>@</span>
+        <span style={{ color: BLUE }}>{"WebSocketRoute"}</span>
+        {"."}
+        <span style={{ color: YELLOW }}>{"Acceptor()"}</span>
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>WebSocket RPC with NestJS.</p>
+        <br />
+        <p>
+          Much easier than <HomeCodeBlock>@WebSocketGateway()</HomeCodeBlock>.
+        </p>
+        <br />
+        <p>Supports SDK library generation</p>
+      </React.Fragment>
+    ),
+    image: "/images/home/websocket.svg",
+    href: "/docs/core/WebSocketRoute",
   },
   {
-    title: "TS OpenAPI Generator",
-    subTitle: <HomeCodeBlock>npx @nestia/migrate</HomeCodeBlock>,
+    title: "TypeScript Swagger Editor",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: BLUE }}>TypeScript IDE</span>
+        {" + "}
+        <span style={{ color: GREEN }}>Swagger/UI</span>
+      </React.Fragment>
+    ),
     description: (
       <React.Fragment>
-        <p>Web based TypeScript Editor</p>
+        <p>Web based TypeScript Editor IDE</p>
         <br />
         <p>Swagger to NestJS/SDK</p>
         <br />
         <p>Supports Mockup Simulator</p>
       </React.Fragment>
     ),
     image: "/images/home/swagger.png",
-    href: "/docs/editor",
+    href: "/docs/swagger/editor",
+  },
+  {
+    title: "Super A.I. Chatbot",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: BLUE }}>A.I. Chatbot</span>
+        {" by "}
+        <span style={{ color: GREEN }}>Swagger Document</span>
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>Swagger operations to LLM function schemas</p>
+        <br />
+        <p>Converse your backend server to A.I. chatbot</p>
+        <br />
+        <p>The best tool for A.I. chatbot development</p>
+      </React.Fragment>
+    ),
+    image: "/images/home/openai.svg",
+    href: "/docs/swagger/chat",
   },
 ];
 

diff --git a/website/src/movies/home/HomeStrengthSectionMovie.tsx b/website/src/movies/home/HomeStrengthSectionMovie.tsx
@@ -6,46 +6,66 @@ import {
   Grid,
   Typography,
 } from "@mui/material";
+import { useState } from "react";
 
-const HomeStrengthSectionMovie = (props: HomeStrengthSectionMovie.Props) => (
-  <Grid item xs={12} md={6}>
-    <Box>
-      <CardActionArea href={props.href}>
-        <br />
-        <div
-          style={{
-            alignItems: "center",
-            justifyContent: "center",
-            display: "flex",
-          }}
+const HomeStrengthSectionMovie = (props: HomeStrengthSectionMovie.Props) => {
+  const [over, setOver] = useState(false);
+  return (
+    <Grid item xs={12} md={6} lg={4}>
+      <Box>
+        <CardActionArea
+          href={props.href}
+          onMouseOver={() => setOver(true)}
+          onMouseOut={() => setOver(false)}
         >
-          <Box
-            component="img"
-            src={props.image}
-            sx={{
-              width: props.width,
-              height: props.height ?? 100,
+          <br />
+          <div
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              display: "flex",
             }}
-          />
-        </div>
-        <br />
-        <CardContent style={{ textAlign: "center" }}>
-          <Typography variant="h5">{props.title}</Typography>
-          <Typography color="default" sx={{ paddingTop: 0.5 }}>
-            {props.subTitle}
-          </Typography>
+          >
+            <Box
+              component="img"
+              src={props.image}
+              sx={{
+                width: props.width,
+                height: props.height ?? 100,
+              }}
+            />
+          </div>
           <br />
-          {props.description}
-        </CardContent>
-      </CardActionArea>
-      <Divider />
-    </Box>
-  </Grid>
-);
+          <CardContent style={{ textAlign: "center" }}>
+            <Typography
+              variant="h5"
+              sx={{
+                textDecoration: over ? "underline" : undefined,
+              }}
+            >
+              {props.title}
+            </Typography>
+            <Typography
+              color="default"
+              sx={{
+                paddingTop: 0.5,
+              }}
+            >
+              {props.subTitle}
+            </Typography>
+            <br />
+            {props.description}
+          </CardContent>
+        </CardActionArea>
+        <Divider />
+      </Box>
+    </Grid>
+  );
+};
 namespace HomeStrengthSectionMovie {
   export interface Props {
-    title: string;
-    subTitle: JSX.Element;
+    title: string | JSX.Element;
+    subTitle: string | JSX.Element;
     description: JSX.Element;
     image: string;
     href: string;