create-cundi-app 1.0.17 → 1.0.19

package/README.md

@@ -39,6 +39,7 @@ The generated project includes:
 - 🛡️ **RBAC**: Role-based Access Control
 - 🌍 **i18n**: English and Traditional Chinese
 - 🌙 **Dark Mode**: Theme toggle support
+- 🤖 **AI Assistant**: Persistent right-side chat panel (Optional)
 - 📊 **Dashboard**: Starter template
 
 ## After Creating

package/index.js

@@ -52,6 +52,14 @@ async function main() {
         initial: false,
     });
 
+    // Ask if chat widget should be included
+    const { includeChatWidget } = await prompts({
+        type: "confirm",
+        name: "includeChatWidget",
+        message: "Include Chat Widget? (@cundi/react-chat-widget)",
+        initial: false,
+    });
+
     const targetDir = path.resolve(process.cwd(), projectName);
 
     // Check if directory already exists
@@ -76,6 +84,9 @@ async function main() {
     if (includeSamples) {
         console.log(kleur.gray("Including sample pages..."));
     }
+    if (includeChatWidget) {
+        console.log(kleur.gray("Including Chat Widget..."));
+    }
     console.log();
 
     // Copy template files
@@ -93,6 +104,13 @@ async function main() {
                 if (!includeSamples && relativePath.includes("pages/samples")) {
                     return false;
                 }
+                // Skip chat components if not requested
+                if (!includeChatWidget && (
+                    relativePath.includes("components/ChatPanel.tsx") ||
+                    relativePath.includes("components/HeaderWithChat.tsx")
+                )) {
+                    return false;
+                }
                 // Skip the alternative version files (they will be handled separately)
                 if (relativePath.endsWith(".no-samples.tsx") || relativePath.endsWith(".no-samples.ts")) {
                     return false;
@@ -102,21 +120,55 @@ async function main() {
         });
 
         // Handle App.tsx and i18n.ts based on sample choice
+        const appPath = path.join(targetDir, "src/App.tsx");
+        const i18nPath = path.join(targetDir, "src/i18n.ts");
+
         if (!includeSamples) {
             // If not including samples, use the no-samples versions
             const appNoSamplesPath = path.join(templateDir, "src/App.no-samples.tsx");
-            const appPath = path.join(targetDir, "src/App.tsx");
             if (fs.existsSync(appNoSamplesPath)) {
                 await fs.copy(appNoSamplesPath, appPath, { overwrite: true });
             }
 
             const i18nNoSamplesPath = path.join(templateDir, "src/i18n.no-samples.ts");
-            const i18nPath = path.join(targetDir, "src/i18n.ts");
             if (fs.existsSync(i18nNoSamplesPath)) {
                 await fs.copy(i18nNoSamplesPath, i18nPath, { overwrite: true });
             }
         }
 
+        // Process chat markers in App.tsx
+        if (fs.existsSync(appPath)) {
+            let appContent = await fs.readFile(appPath, "utf-8");
+            if (includeChatWidget) {
+                // Keep chat, remove markers and the "no chat alternative"
+                const markers = [
+                    /\/\/\s*\{CHAT_START\}/g,
+                    /\/\/\s*\{CHAT_END\}/g,
+                    /\/\/\s*\{NO_CHAT_START\}/g,
+                    /\/\/\s*\{NO_CHAT_END\}/g,
+                    /\{\s*\/\*\s*\{CHAT_START\}\s*\*\/\s*\}/g,
+                    /\{\s*\/\*\s*\{CHAT_END\}\s*\*\/\s*\}/g
+                ];
+                markers.forEach(re => {
+                    appContent = appContent.replace(re, "");
+                });
+
+                // Remove the "no chat" blocks entirely
+                appContent = appContent.replace(/\{\s*\/\*\s*\{NO_CHAT_START\}[\s\S]*?\{NO_CHAT_END\}\s*\*\/\s*\}/g, "");
+            } else {
+                // Remove chat blocks, uncomment "no chat alternative"
+                appContent = appContent.replace(/\/\/\s*\{CHAT_START\}[\s\S]*?\/\/\s*\{CHAT_END\}\n?/g, "");
+                appContent = appContent.replace(/\{\s*\/\*\s*\{CHAT_START\}\s*\*\/\s*\}[\s\S]*?\{\s*\/\*\s*\{CHAT_END\}\s*\*\/\s*\}\n?/g, "");
+
+                // Uncomment {NO_CHAT_START} ... {NO_CHAT_END}
+                // Case 1: Multi-line JSX comment
+                appContent = appContent.replace(/\{\s*\/\*\s*\{NO_CHAT_START\}\n?|(?:\n?\s*)?\{NO_CHAT_END\}\s*\*\/\s*\}/g, "");
+                // Case 2: single-line JS comment
+                appContent = appContent.replace(/\/\/\s*\{NO_CHAT_START\}\n?|\/\/\s*\{NO_CHAT_END\}\n?/g, "");
+            }
+            await fs.writeFile(appPath, appContent);
+        }
+
         // Generate package.json with project name
         const pkgTemplatePath = path.join(targetDir, "package.json.template");
         const pkgTargetPath = path.join(targetDir, "package.json");
@@ -124,6 +176,14 @@ async function main() {
         if (fs.existsSync(pkgTemplatePath)) {
             let pkgContent = await fs.readFile(pkgTemplatePath, "utf-8");
             pkgContent = pkgContent.replace(/\{\{PROJECT_NAME\}\}/g, projectName);
+
+            // Add chat widget dependency if requested
+            if (includeChatWidget) {
+                const pkg = JSON.parse(pkgContent);
+                pkg.dependencies["@cundi/react-chat-widget"] = "^1.0.0";
+                pkgContent = JSON.stringify(pkg, null, 2);
+            }
+
             await fs.writeFile(pkgTargetPath, pkgContent);
             await fs.remove(pkgTemplatePath);
         }
@@ -141,6 +201,9 @@ VITE_KEYCLOAK_URL=http://localhost:8080
 VITE_KEYCLOAK_REALM=your-realm
 VITE_KEYCLOAK_CLIENT_ID=your-client-id
 VITE_REDIRECT_URI=http://localhost:5173/auth/callback
+
+# Chat Widget Configuration (Optional)
+VITE_CHAT_WEBHOOK_URL=
 `
             );
         }
@@ -171,6 +234,10 @@ VITE_REDIRECT_URI=http://localhost:5173/auth/callback
             console.log(kleur.yellow("Note: Sample pages are included. Make sure your backend has the corresponding Business Objects."));
             console.log();
         }
+        if (includeChatWidget) {
+            console.log(kleur.yellow("Note: Chat Widget is included. See the Chat Demo page for usage examples."));
+            console.log();
+        }
         console.log(kleur.gray("────────────────────────────────────"));
         console.log(kleur.blue("Happy coding! 🎉"));
         console.log();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cundi-app",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Create a new Cundi app with React + Refine + Ant Design",
   "type": "module",
   "bin": {

package/template/package.json.template

@@ -24,7 +24,8 @@
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
-    "@cundi/refine-xaf": "^1.0.14",
+    "@cundi/refine-xaf": "^1.0.15",
+    "@cundi/react-chat-widget": "^1.0.1",
     "@refinedev/antd": "^6.0.3",
     "@refinedev/cli": "^2.16.50",
     "@refinedev/core": "^5.0.6",

package/template/src/App.no-samples.tsx

@@ -34,7 +34,9 @@ import { DashboardPage } from "./pages/dashboard";
 import {
     authProvider,
     dataProvider,
+    // {NO_CHAT_START}
     Header,
+    // {NO_CHAT_END}
     LoginPage,
     KeycloakLoginPage,
     AuthCallback,
@@ -57,6 +59,11 @@ import {
 
 import { accessControlProvider } from "./accessControlProvider";
 
+// {CHAT_START}
+import { ChatProvider } from "./components/ChatPanel";
+import { HeaderWithChat } from "./components/HeaderWithChat";
+// {CHAT_END}
+
 const API_URL = import.meta.env.VITE_API_URL + "/api/odata";
 
 const InnerApp: React.FC = () => {
@@ -169,7 +176,12 @@ const InnerApp: React.FC = () => {
                                     key="authenticated-routes"
                                     fallback={<CatchAllNavigate to="/login" />}
                                 >
+                                    { /* {CHAT_START} */}
+                                    <ThemedLayout Header={HeaderWithChat}>
+                                        { /* {CHAT_END} */}
+                                        { /* {NO_CHAT_START}
                                     <ThemedLayout Header={Header}>
+                                    {NO_CHAT_END} */ }
                                         <Outlet />
                                     </ThemedLayout>
                                 </Authenticated>
@@ -221,7 +233,12 @@ const InnerApp: React.FC = () => {
                         <Route
                             element={
                                 <Authenticated key="catch-all">
+                                    { /* {CHAT_START} */}
+                                    <ThemedLayout Header={HeaderWithChat}>
+                                        { /* {CHAT_END} */}
+                                        { /* {NO_CHAT_START}
                                     <ThemedLayout Header={Header}>
+                                    {NO_CHAT_END} */ }
                                         <Outlet />
                                     </ThemedLayout>
                                 </Authenticated>
@@ -241,8 +258,16 @@ const InnerApp: React.FC = () => {
 const App: React.FC = () => {
     return (
         <ColorModeContextProvider>
+            {/* {CHAT_START} */}
+            <ChatProvider>
+                <InnerApp />
+            </ChatProvider>
+            {/* {CHAT_END} */}
+            {/* {NO_CHAT_START}
             <InnerApp />
+            {NO_CHAT_END} */}
         </ColorModeContextProvider>
+
     );
 };
 

package/template/src/App.tsx

@@ -35,7 +35,9 @@ import { DashboardPage } from "./pages/dashboard";
 import {
     authProvider,
     dataProvider,
+    // {NO_CHAT_START}
     Header,
+    // {NO_CHAT_END}
     LoginPage,
     KeycloakLoginPage,
     AuthCallback,
@@ -76,6 +78,12 @@ import { DrawioTestList } from "./pages/samples/drawio-test/list";
 import { DrawioTestCreate } from "./pages/samples/drawio-test/create";
 import { DrawioTestEdit } from "./pages/samples/drawio-test/edit";
 import { DrawioTestShow } from "./pages/samples/drawio-test/show";
+import { OrderList, OrderCreate, OrderEdit, OrderShow } from "./pages/samples/order";
+
+// {CHAT_START}
+import { ChatProvider } from "./components/ChatPanel";
+import { HeaderWithChat } from "./components/HeaderWithChat";
+// {CHAT_END}
 
 const API_URL = import.meta.env.VITE_API_URL + "/api/odata";
 
@@ -131,6 +139,17 @@ const InnerApp: React.FC = () => {
                                 parent: "Model",
                             },
                         },
+                        {
+                            name: "Order",
+                            list: "/Orders",
+                            create: "/Orders/create",
+                            edit: "/Orders/edit/:id",
+                            show: "/Orders/show/:id",
+                            meta: {
+                                label: t("sider.order"),
+                                parent: "Model",
+                            },
+                        },
                         {
                             name: "TiptapTest",
                             list: "/TiptapTests",
@@ -264,7 +283,12 @@ const InnerApp: React.FC = () => {
                                     key="authenticated-routes"
                                     fallback={<CatchAllNavigate to="/login" />}
                                 >
+                                    { /* {CHAT_START} */}
+                                    <ThemedLayout Header={HeaderWithChat}>
+                                        { /* {CHAT_END} */}
+                                        { /* {NO_CHAT_START}
                                     <ThemedLayout Header={Header}>
+                                    {NO_CHAT_END} */ }
                                         <Outlet />
                                     </ThemedLayout>
                                 </Authenticated>
@@ -305,6 +329,13 @@ const InnerApp: React.FC = () => {
                                 <Route path="show/:id" element={<DrawioTestShow />} />
                             </Route>
 
+                            <Route path="/Orders">
+                                <Route index element={<OrderList />} />
+                                <Route path="create" element={<OrderCreate />} />
+                                <Route path="edit/:id" element={<OrderEdit />} />
+                                <Route path="show/:id" element={<OrderShow />} />
+                            </Route>
+
                             {/* Core routes */}
                             <Route path="/ApplicationUsers">
                                 <Route index element={<ApplicationUserList />} />
@@ -350,7 +381,12 @@ const InnerApp: React.FC = () => {
                         <Route
                             element={
                                 <Authenticated key="catch-all">
-                                    <ThemedLayout Header={Header}>
+                                    { /* {CHAT_START} */}
+                                    <ThemedLayout Header={HeaderWithChat}>
+                                        { /* {CHAT_END} */}
+                                        { /* {NO_CHAT_START}
+                            <ThemedLayout Header={Header}>
+                            {NO_CHAT_END} */ }
                                         <Outlet />
                                     </ThemedLayout>
                                 </Authenticated>
@@ -362,16 +398,24 @@ const InnerApp: React.FC = () => {
                     <UnsavedChangesNotifier />
                     <DocumentTitleHandler />
                 </Refine>
-            </AntdApp>
-        </BrowserRouter>
+            </AntdApp >
+        </BrowserRouter >
     );
 };
 
 const App: React.FC = () => {
     return (
         <ColorModeContextProvider>
+            {/* {CHAT_START} */}
+            <ChatProvider>
+                <InnerApp />
+            </ChatProvider>
+            {/* {CHAT_END} */}
+            {/* {NO_CHAT_START}
             <InnerApp />
+            {NO_CHAT_END} */}
         </ColorModeContextProvider>
+
     );
 };
 

package/template/src/components/ChatPanel.tsx

@@ -0,0 +1,239 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import { Button, Tooltip, theme } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import { ChatWidget } from "@cundi/react-chat-widget";
+import "@cundi/react-chat-widget/styles.css";
+import { useTranslation } from "react-i18next";
+
+const { useToken } = theme;
+
+// ============ Chat Context ============
+interface ChatContextType {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+const ChatContext = createContext<ChatContextType | null>(null);
+
+export const useChatPanel = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChatPanel must be used within ChatProvider");
+    }
+    return context;
+};
+
+// ============ Mock Data for Demo ============
+const MOCK_CHAT_RESPONSES: Record<string, (message: string, t: any) => any> = {
+    help: (_, t) => ({
+        output: `## 測試指令說明
+您可以輸入以下關鍵字來測試不同功能：
+
+| 指令 | 說明 |
+|------|------|
+| \`markdown\` | 顯示 Markdown 格式範例 |
+| \`table\` | 顯示表格範例 |
+| \`image\` | 顯示圖片範例 |
+| \`file\` | 顯示檔案下載連結 |
+| \`code\` | 顯示程式碼區塊範例 |
+| \`list\` | 顯示清單範例 |
+| \`help\` | 顯示此說明 |`
+    }),
+    markdown: () => ({
+        output: `### Markdown 測試
+這是一個 **Markdown** 格式的回應！
+- 支援 **粗體** 和 *斜體*
+- 支援 \`程式碼\` 區塊
+- 支援 [連結](https://google.com)
+> 這是一段引用文字`
+    }),
+    table: () => ({
+        output: `### 產品清單表格
+| 產品名稱 | 價格 | 庫存 |
+|---------|------|------|
+| 筆記型電腦 | $999 | 15 |
+| 無線滑鼠 | $29 | 150 |
+| 機械鍵盤 | $149 | 0 |`
+    }),
+    image: () => ({
+        output: `### 圖片展示\n這是一張隨機範例圖片：`,
+        image: 'https://picsum.photos/400/300'
+    }),
+    file: () => ({
+        output: `### 檔案下載\n以下是可供下載的檔案：`,
+        files: [
+            {
+                name: '範例文件.pdf',
+                url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+                type: 'application/pdf',
+                size: 13264,
+            }
+        ]
+    }),
+    code: () => ({
+        output: `### 程式碼範例\n\`\`\`tsx
+const HelloWorld = () => {
+    return <div>Hello Cundi!</div>;
+};
+\`\`\``
+    }),
+    list: () => ({
+        output: `### 開發進度\n- [x] 建立專案
+- [x] 整合聊天面板
+- [ ] 介面優化
+- [ ] 發布正式版`
+    })
+};
+
+// ============ Chat Provider ============
+interface ChatProviderProps {
+    children: ReactNode;
+    /** Width of chat panel */
+    panelWidth?: number;
+    /** Custom message handler for chat */
+    onSendMessage?: (message: string, files?: File[]) => Promise<{ output: string } | string>;
+    /** Webhook URL for webhook mode */
+    webhookUrl?: string;
+    /** Session ID for webhook mode */
+    sessionId?: string;
+}
+
+export const ChatProvider: React.FC<ChatProviderProps> = ({
+    children,
+    panelWidth = 500,
+    onSendMessage,
+    webhookUrl,
+    sessionId,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { token } = useToken();
+    const { t } = useTranslation();
+
+    // Default message handler (mock response generator)
+    const defaultMessageHandler = async (message: string) => {
+        await new Promise((resolve) => setTimeout(resolve, 800));
+        const input = message.toLowerCase().trim();
+
+        for (const [keyword, generator] of Object.entries(MOCK_CHAT_RESPONSES)) {
+            if (input.includes(keyword)) {
+                return generator(message, t);
+            }
+        }
+
+        return {
+            output: t("chat.defaultResponse", `收到您的訊息：「${message}」\n\n這是一個示範回應。您可以輸入 \`help\` 來查看更多指令測試。`),
+        };
+    };
+
+    const contextValue: ChatContextType = {
+        isOpen,
+        open: () => setIsOpen(true),
+        close: () => setIsOpen(false),
+        toggle: () => setIsOpen((prev) => !prev),
+    };
+
+    return (
+        <ChatContext.Provider value={contextValue}>
+            {/* Main content with margin adjustment */}
+            <div
+                style={{
+                    marginRight: isOpen ? panelWidth : 0,
+                    transition: "margin-right 0.3s ease-in-out",
+                    minHeight: "100vh",
+                }}
+            >
+                {children}
+            </div>
+
+            {/* Fixed Chat Panel */}
+            <div
+                style={{
+                    position: "fixed",
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: isOpen ? panelWidth : 0,
+                    backgroundColor: token.colorBgContainer,
+                    borderLeft: isOpen ? `1px solid ${token.colorBorderSecondary}` : "none",
+                    transition: "width 0.3s ease-in-out",
+                    overflow: "hidden",
+                    zIndex: 1000,
+                    display: "flex",
+                    flexDirection: "column",
+                }}
+            >
+                {isOpen && (
+                    <>
+                        {/* Panel Header */}
+                        <div
+                            style={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                padding: "12px 16px",
+                                borderBottom: `1px solid ${token.colorBorderSecondary}`,
+                                backgroundColor: token.colorBgElevated,
+                                height: 64,
+                            }}
+                        >
+                            <span style={{ fontWeight: 600, fontSize: 16, color: token.colorText }}>
+                                {t("chat.panelTitle", "AI Assistant")}
+                            </span>
+                            <Button
+                                type="text"
+                                icon={<CloseOutlined />}
+                                onClick={() => setIsOpen(false)}
+                                size="small"
+                            />
+                        </div>
+
+                        {/* Chat Widget */}
+                        <div style={{ flex: 1, minHeight: 0 }}>
+                            {webhookUrl ? (
+                                <ChatWidget
+                                    webhookUrl={webhookUrl}
+                                    sessionId={sessionId || `session-${Date.now()}`}
+                                    showHeader={false}
+                                    placeholder={t("chat.placeholder", "Type a message...")}
+                                    user={{ name: t("chat.user", "You"), avatar: "👤" }}
+                                    assistant={{ name: t("chat.assistant", "AI"), avatar: "🤖" }}
+                                />
+                            ) : (
+                                <ChatWidget
+                                    onSendMessage={onSendMessage || defaultMessageHandler}
+                                    showHeader={false}
+                                    placeholder={t("chat.placeholder", "Type a message...")}
+                                    user={{ name: t("chat.user", "You"), avatar: "👤" }}
+                                    assistant={{ name: t("chat.assistant", "AI"), avatar: "🤖" }}
+                                    allowFileUpload={true}
+                                />
+                            )}
+                        </div>
+                    </>
+                )}
+            </div>
+        </ChatContext.Provider>
+    );
+};
+
+// ============ Chat Toggle Button ============
+/**
+ * Button component to toggle the chat panel.
+ * Place this anywhere in your app (e.g., in the Header).
+ */
+export const ChatToggleButton: React.FC = () => {
+    const { isOpen, toggle } = useChatPanel();
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip title={t("chat.toggleTooltip", "Toggle AI Chat")}>
+            <Button
+                type={isOpen ? "primary" : "text"}
+                icon={<MessageOutlined />}
+                onClick={toggle}
+            />
+        </Tooltip>
+    );
+};

package/template/src/components/HeaderWithChat.tsx

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from "react";
+import { useLogout, useGetIdentity, useUpdatePassword } from "@refinedev/core";
+import { Layout, Button, Space, Typography, Avatar, theme, Dropdown, MenuProps, Tooltip } from "antd";
+import { LogoutOutlined, UserOutlined, DownOutlined, SunOutlined, MoonOutlined, CameraOutlined, LockOutlined, GlobalOutlined, MessageOutlined } from "@ant-design/icons";
+import { useColorMode, GlobalSearch, ChangePhotoModal, ChangePasswordModal } from "@cundi/refine-xaf";
+import { useTranslation } from "react-i18next";
+import { useChatPanel } from "./ChatPanel";
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+/**
+ * Custom Header that includes the chat toggle button
+ * This is a modified version of the Header from @cundi/refine-xaf
+ */
+export const HeaderWithChat: React.FC = () => {
+    const { mutate: logout } = useLogout();
+    const { mutate: updatePassword } = useUpdatePassword();
+    const { data: user } = useGetIdentity<any>();
+    const { mode, setMode } = useColorMode();
+    const { token } = useToken();
+    const { isOpen: isChatOpen, toggle: toggleChat } = useChatPanel();
+
+    const { t: translate, i18n } = useTranslation();
+    const currentLocale = i18n.language;
+
+    const handleLanguageChange = (lang: string) => {
+        i18n.changeLanguage(lang);
+    };
+
+    // Track auth provider
+    const [authProvider, setAuthProvider] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (user) {
+            setAuthProvider(localStorage.getItem("auth_provider"));
+        }
+    }, [user]);
+
+    // Photo Modal State
+    const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false);
+
+    // Password Modal State
+    const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
+
+    const menuItems: MenuProps["items"] = [
+        {
+            key: "user-info",
+            label: (
+                <Space direction="vertical" size={0}>
+                    <Text strong>{user?.name}</Text>
+                </Space>
+            ),
+            icon: <UserOutlined />,
+            disabled: true,
+            style: { cursor: "default", color: token.colorText },
+        },
+        {
+            type: "divider",
+        },
+        {
+            key: "change-photo",
+            label: translate("components.header.menu.changePhoto", "Change Photo"),
+            icon: <CameraOutlined />,
+            onClick: () => {
+                setIsPhotoModalOpen(true);
+            },
+        },
+        {
+            key: "change-password",
+            label: authProvider === "keycloak"
+                ? translate("components.header.menu.manageAccount", "Manage Account in Keycloak")
+                : translate("components.header.menu.changePassword", "Change Password"),
+            icon: <LockOutlined />,
+            onClick: () => {
+                if (authProvider === "keycloak") {
+                    const env = (import.meta as any).env;
+                    const keycloakUrl = env?.VITE_KEYCLOAK_URL || "http://localhost:8080";
+                    const realm = env?.VITE_KEYCLOAK_REALM || "cundi";
+                    window.open(`${keycloakUrl}/realms/${realm}/account`, "_blank");
+                } else {
+                    setIsPasswordModalOpen(true);
+                }
+            },
+        },
+        {
+            type: "divider",
+        },
+        {
+            key: "theme",
+            label: mode === "light"
+                ? translate("components.header.theme.dark", "Dark Theme")
+                : translate("components.header.theme.light", "Light Theme"),
+            icon: mode === "light" ? <MoonOutlined /> : <SunOutlined />,
+            onClick: () => setMode(mode === "light" ? "dark" : "light"),
+        },
+        {
+            key: "logout",
+            label: translate("components.header.menu.logout", "Logout"),
+            icon: <LogoutOutlined />,
+            onClick: () => logout(),
+        }
+    ];
+
+    return (
+        <Layout.Header
+            style={{
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+                padding: "0 24px",
+                height: "64px",
+                backgroundColor: token.colorBgElevated,
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+            }}
+        >
+            <Space size="middle">
+                <div>
+                    <GlobalSearch width={300} placeholder={translate("components.globalSearch.placeholder", "Search...")} />
+                </div>
+
+                {/* Chat Toggle Button */}
+                <Tooltip title={translate("chat.toggleTooltip", "Toggle AI Chat")}>
+                    <Button
+                        type={isChatOpen ? "primary" : "text"}
+                        icon={<MessageOutlined />}
+                        onClick={toggleChat}
+                    />
+                </Tooltip>
+
+                <Dropdown
+                    menu={{
+                        items: [
+                            {
+                                key: "en",
+                                label: translate("components.header.language.en", "English"),
+                                onClick: () => handleLanguageChange("en"),
+                                disabled: currentLocale === "en",
+                            },
+                            {
+                                key: "zh-TW",
+                                label: translate("components.header.language.zh-TW", "繁體中文"),
+                                onClick: () => handleLanguageChange("zh-TW"),
+                                disabled: currentLocale === "zh-TW",
+                            },
+                        ]
+                    }}
+                    trigger={["click"]}
+                >
+                    <Button type="text" icon={<GlobalOutlined />}>
+                        {currentLocale === "zh-TW" ? "繁體中文" : "English"} <DownOutlined />
+                    </Button>
+                </Dropdown>
+
+                <Dropdown menu={{ items: menuItems }} trigger={["click"]}>
+                    <Button type="text" style={{ height: 48 }}>
+                        <Space>
+                            <Avatar src={user?.avatar} alt={user?.name} icon={<UserOutlined />} />
+                            <Text>{user?.name}</Text>
+                            <DownOutlined style={{ fontSize: 12 }} />
+                        </Space>
+                    </Button>
+                </Dropdown>
+            </Space>
+
+            {/* Photo Modal */}
+            <ChangePhotoModal
+                open={isPhotoModalOpen}
+                onClose={() => setIsPhotoModalOpen(false)}
+                user={user}
+            />
+
+            <ChangePasswordModal
+                open={isPasswordModalOpen}
+                onClose={() => setIsPasswordModalOpen(false)}
+            />
+        </Layout.Header>
+    );
+};

package/template/src/i18n.no-samples.ts

@@ -14,6 +14,14 @@ const enExtended = {
         triggerLogs: "Trigger Logs",
         mirrorConfigs: "Mirror Configs",
     },
+    // Chat translations
+    chat: {
+        panelTitle: "AI Assistant",
+        toggleTooltip: "Toggle AI Chat",
+        placeholder: "Type a message...",
+        user: "You",
+        assistant: "AI",
+    },
 };
 
 const zhTWExtended = {
@@ -24,6 +32,14 @@ const zhTWExtended = {
         triggerLogs: "觸發紀錄",
         mirrorConfigs: "鏡射設定",
     },
+    // Chat translations
+    chat: {
+        panelTitle: "AI 助手",
+        toggleTooltip: "開啟/關閉 AI 聊天",
+        placeholder: "輸入訊息...",
+        user: "您",
+        assistant: "AI",
+    },
 };
 
 i18n

package/template/src/i18n.ts

@@ -17,10 +17,19 @@ const enExtended = {
         samples: "Samples",
         model: "Model",
         basicTypeTest: "Basic Type",
+        order: "Master-Details",
         tiptapTest: "Tiptap Editor",
         drawioTest: "Drawio Editor",
         fullTextSearch: "Full Text Search",
     },
+    // Chat translations
+    chat: {
+        panelTitle: "AI Assistant",
+        toggleTooltip: "Toggle AI Chat",
+        placeholder: "Type a message...",
+        user: "You",
+        assistant: "AI",
+    },
     // Sample field translations
     article: {
         title: "Title",
@@ -45,12 +54,39 @@ const enExtended = {
         doubleValue: "Double Value",
         dateTimeValue: "DateTime Value",
         boolValue: "Bool Value",
+        statusValue: "Status",
+        status: {
+            Draft: "Draft",
+            Active: "Active",
+            Completed: "Completed",
+            Cancelled: "Cancelled",
+        },
         imageValue: "Image Value",
     },
+    order: {
+        orderNumber: "Order Number",
+        orderDate: "Order Date",
+        customerName: "Customer Name",
+        notes: "Notes",
+        totalAmount: "Total Amount",
+        items: "Order Items",
+    },
+    orderItem: {
+        title: "Order Item",
+        productName: "Product Name",
+        quantity: "Quantity",
+        unitPrice: "Unit Price",
+        subtotal: "Subtotal",
+    },
+    validation: {
+        required: "This field is required",
+    },
     types: {
         Article: "Article",
         Product: "Product",
         BasicTypeTest: "Basic Type",
+        Order: "Order",
+        OrderItem: "Order Item",
     },
 };
 
@@ -65,10 +101,19 @@ const zhTWExtended = {
         samples: "範例",
         model: "資料模型",
         basicTypeTest: "基本型別",
+        order: "主從式資料",
         tiptapTest: "Tiptap 編輯器",
         drawioTest: "Drawio 編輯器",
         fullTextSearch: "全文檢索",
     },
+    // Chat translations
+    chat: {
+        panelTitle: "AI 助手",
+        toggleTooltip: "開啟/關閉 AI 聊天",
+        placeholder: "輸入訊息...",
+        user: "您",
+        assistant: "AI",
+    },
     // Sample field translations
     article: {
         title: "標題",
@@ -93,12 +138,39 @@ const zhTWExtended = {
         doubleValue: "浮點數",
         dateTimeValue: "日期時間",
         boolValue: "布林值",
+        statusValue: "狀態",
+        status: {
+            Draft: "草稿",
+            Active: "啟用",
+            Completed: "完成",
+            Cancelled: "取消",
+        },
         imageValue: "圖片",
     },
+    order: {
+        orderNumber: "訂單編號",
+        orderDate: "訂單日期",
+        customerName: "客戶名稱",
+        notes: "備註",
+        totalAmount: "總金額",
+        items: "訂單明細",
+    },
+    orderItem: {
+        title: "訂單明細",
+        productName: "產品名稱",
+        quantity: "數量",
+        unitPrice: "單價",
+        subtotal: "小計",
+    },
+    validation: {
+        required: "此欄位為必填",
+    },
     types: {
         Article: "文章",
         Product: "產品",
         BasicTypeTest: "基本型別",
+        Order: "訂單",
+        OrderItem: "訂單明細",
     },
 };
 

package/template/src/pages/samples/basic-type-test/create.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Create, useForm } from "@refinedev/antd";
-import { Form, Input, InputNumber, DatePicker, Switch } from "antd";
+import { Form, Input, InputNumber, DatePicker, Switch, Select } from "antd";
 import { useTranslation } from "react-i18next";
 import { Base64Upload } from "@cundi/refine-xaf";
 import dayjs from "dayjs";
@@ -56,6 +56,19 @@ export const BasicTypeTestCreate: React.FC = () => {
                 >
                     <Switch />
                 </Form.Item>
+                <Form.Item
+                    label={t("basicTypeTest.statusValue")}
+                    name="StatusValue"
+                >
+                    <Select
+                        options={[
+                            { value: "Draft", label: t("basicTypeTest.status.Draft") },
+                            { value: "Active", label: t("basicTypeTest.status.Active") },
+                            { value: "Completed", label: t("basicTypeTest.status.Completed") },
+                            { value: "Cancelled", label: t("basicTypeTest.status.Cancelled") },
+                        ]}
+                    />
+                </Form.Item>
                 <Form.Item
                     label={t("basicTypeTest.imageValue")}
                     name="ImageValue"

package/template/src/pages/samples/basic-type-test/edit.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Edit, useForm } from "@refinedev/antd";
-import { Form, Input, InputNumber, DatePicker, Switch } from "antd";
+import { Form, Input, InputNumber, DatePicker, Switch, Select } from "antd";
 import { useTranslation } from "react-i18next";
 import { Base64Upload } from "@cundi/refine-xaf";
 import dayjs from "dayjs";
@@ -56,6 +56,19 @@ export const BasicTypeTestEdit: React.FC = () => {
                 >
                     <Switch />
                 </Form.Item>
+                <Form.Item
+                    label={t("basicTypeTest.statusValue")}
+                    name="StatusValue"
+                >
+                    <Select
+                        options={[
+                            { value: "Draft", label: t("basicTypeTest.status.Draft") },
+                            { value: "Active", label: t("basicTypeTest.status.Active") },
+                            { value: "Completed", label: t("basicTypeTest.status.Completed") },
+                            { value: "Cancelled", label: t("basicTypeTest.status.Cancelled") },
+                        ]}
+                    />
+                </Form.Item>
                 <Form.Item
                     label={t("basicTypeTest.imageValue")}
                     name="ImageValue"

package/template/src/pages/samples/basic-type-test/list.tsx

@@ -46,6 +46,22 @@ export const BasicTypeTestList: React.FC = () => {
                 // @ts-ignore
                 defaultVisible
             />
+            <Table.Column
+                dataIndex="StatusValue"
+                title={t("basicTypeTest.statusValue")}
+                sorter
+                render={(value: string) => (
+                    <Tag color={
+                        value === "Active" ? "green" :
+                            value === "Completed" ? "blue" :
+                                value === "Cancelled" ? "red" : "default"
+                    }>
+                        {t(`basicTypeTest.status.${value}`, value)}
+                    </Tag>
+                )}
+                // @ts-ignore
+                defaultVisible
+            />
             <Table.Column
                 dataIndex="ImageValue"
                 title={t("basicTypeTest.imageValue")}

package/template/src/pages/samples/order/create.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Create, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker } from "antd";
+import { useTranslation } from "react-i18next";
+import dayjs from "dayjs";
+
+export const OrderCreate: React.FC = () => {
+    const { t } = useTranslation();
+    const { formProps, saveButtonProps } = useForm({
+        redirect: "edit",
+    });
+
+    return (
+        <Create saveButtonProps={saveButtonProps}>
+            <Form {...formProps} layout="vertical">
+                <Form.Item
+                    label={t("order.orderNumber")}
+                    name="OrderNumber"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.orderDate")}
+                    name="OrderDate"
+                    getValueProps={(value) => ({
+                        value: value ? dayjs(value) : dayjs(),
+                    })}
+                    getValueFromEvent={(date) => date?.toISOString()}
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.customerName")}
+                    name="CustomerName"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.notes")}
+                    name="Notes"
+                >
+                    <Input.TextArea rows={3} />
+                </Form.Item>
+            </Form>
+        </Create>
+    );
+};

package/template/src/pages/samples/order/edit.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { Edit, useForm } from "@refinedev/antd";
+import { Form, Input, DatePicker, InputNumber, Card } from "antd";
+import { useTranslation } from "react-i18next";
+import { RelatedList } from "@cundi/refine-xaf";
+import { useTable } from "@refinedev/antd";
+import { Table } from "antd";
+import dayjs from "dayjs";
+
+// OrderItem Form Fields Component
+const OrderItemFormFields: React.FC<{ mode: "create" | "edit" }> = () => {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <Form.Item
+                label={t("orderItem.productName")}
+                name="ProductName"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <Input />
+            </Form.Item>
+            <Form.Item
+                label={t("orderItem.quantity")}
+                name="Quantity"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <InputNumber min={1} style={{ width: "100%" }} />
+            </Form.Item>
+            <Form.Item
+                label={t("orderItem.unitPrice")}
+                name="UnitPrice"
+                rules={[{ required: true, message: t("validation.required") }]}
+            >
+                <InputNumber min={0} precision={2} style={{ width: "100%" }} prefix="$" />
+            </Form.Item>
+        </>
+    );
+};
+
+export const OrderEdit: React.FC = () => {
+    const { t } = useTranslation();
+    const { formProps, saveButtonProps, query } = useForm({
+        meta: {
+            expand: ["Items"],
+        },
+    });
+
+    const orderId = query?.data?.data?.Oid as string | undefined;
+
+    // Fetch order items for the RelatedList
+    const { tableProps } = useTable({
+        resource: "OrderItem",
+        filters: {
+            permanent: [
+                { field: "Order/Oid", operator: "eq", value: orderId || "" }
+            ]
+        },
+        syncWithLocation: false,
+        queryOptions: {
+            enabled: !!orderId,
+        },
+        pagination: {
+            mode: "off"
+        }
+    });
+
+    // Convert readonly array to mutable array for RelatedList
+    const dataSource = tableProps.dataSource ? [...tableProps.dataSource] : [];
+
+    return (
+        <Edit saveButtonProps={saveButtonProps}>
+            <Form {...formProps} layout="vertical">
+                <Form.Item
+                    label={t("order.orderNumber")}
+                    name="OrderNumber"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.orderDate")}
+                    name="OrderDate"
+                    getValueProps={(value) => ({
+                        value: value ? dayjs(value) : null,
+                    })}
+                    getValueFromEvent={(date) => date?.toISOString()}
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <DatePicker style={{ width: "100%" }} />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.customerName")}
+                    name="CustomerName"
+                    rules={[{ required: true, message: t("validation.required") }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    label={t("order.notes")}
+                    name="Notes"
+                >
+                    <Input.TextArea rows={3} />
+                </Form.Item>
+            </Form>
+
+            {/* Order Items (Details) */}
+            <Card title={t("order.items")} style={{ marginTop: 16 }}>
+                <RelatedList
+                    resource="OrderItem"
+                    masterField="Order"
+                    masterId={orderId}
+                    dataSource={dataSource}
+                    FormFields={OrderItemFormFields}
+                    modalTitle={t("orderItem.title")}
+                >
+                    <Table.Column
+                        dataIndex="ProductName"
+                        title={t("orderItem.productName")}
+                    />
+                    <Table.Column
+                        dataIndex="Quantity"
+                        title={t("orderItem.quantity")}
+                    />
+                    <Table.Column
+                        dataIndex="UnitPrice"
+                        title={t("orderItem.unitPrice")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                    <Table.Column
+                        dataIndex="Subtotal"
+                        title={t("orderItem.subtotal")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                </RelatedList>
+            </Card>
+        </Edit>
+    );
+};

package/template/src/pages/samples/order/index.ts

@@ -0,0 +1,4 @@
+export { OrderList } from "./list";
+export { OrderCreate } from "./create";
+export { OrderEdit } from "./edit";
+export { OrderShow } from "./show";

package/template/src/pages/samples/order/list.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { BaseRecord } from "@refinedev/core";
+import { EditButton, ShowButton, DeleteButton } from "@refinedev/antd";
+import { Table, Space, Tag } from "antd";
+import { SmartList } from "@cundi/refine-xaf";
+import { useTranslation } from "react-i18next";
+
+export const OrderList: React.FC = () => {
+    const { t } = useTranslation();
+
+    return (
+        <SmartList
+            resource="Order"
+            searchFields={["OrderNumber", "CustomerName"]}
+        >
+            <Table.Column
+                dataIndex="OrderNumber"
+                title={t("order.orderNumber")}
+                sorter
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="OrderDate"
+                title={t("order.orderDate")}
+                sorter
+                render={(value: string) => value ? new Date(value).toLocaleDateString() : "-"}
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="CustomerName"
+                title={t("order.customerName")}
+                sorter
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                dataIndex="TotalAmount"
+                title={t("order.totalAmount")}
+                sorter
+                render={(value: number) => value ? `$${value.toFixed(2)}` : "$0.00"}
+                // @ts-ignore
+                defaultVisible
+            />
+            <Table.Column
+                title={t("buttons.list")}
+                dataIndex="actions"
+                render={(_, record: BaseRecord) => (
+                    <Space>
+                        <EditButton hideText size="small" recordItemId={record.Oid} />
+                        <ShowButton hideText size="small" recordItemId={record.Oid} />
+                        <DeleteButton hideText size="small" recordItemId={record.Oid} />
+                    </Space>
+                )}
+            />
+        </SmartList>
+    );
+};

package/template/src/pages/samples/order/show.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Show } from "@refinedev/antd";
+import { useShow } from "@refinedev/core";
+import { Typography, Table, Card, Descriptions } from "antd";
+import { useTranslation } from "react-i18next";
+
+const { Title } = Typography;
+
+export const OrderShow: React.FC = () => {
+    const { t } = useTranslation();
+    const { query } = useShow({
+        meta: {
+            expand: ["Items"],
+        },
+    });
+    const { data, isLoading } = query;
+    const record = data?.data;
+
+    return (
+        <Show isLoading={isLoading}>
+            <Descriptions bordered column={1}>
+                <Descriptions.Item label={t("order.orderNumber")}>
+                    {record?.OrderNumber}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.orderDate")}>
+                    {record?.OrderDate ? new Date(record.OrderDate).toLocaleDateString() : "-"}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.customerName")}>
+                    {record?.CustomerName}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.totalAmount")}>
+                    ${record?.TotalAmount?.toFixed(2) || "0.00"}
+                </Descriptions.Item>
+                <Descriptions.Item label={t("order.notes")}>
+                    {record?.Notes || "-"}
+                </Descriptions.Item>
+            </Descriptions>
+
+            <Card title={t("order.items")} style={{ marginTop: 16 }}>
+                <Table
+                    dataSource={record?.Items || []}
+                    rowKey="Oid"
+                    pagination={false}
+                    bordered
+                    size="small"
+                >
+                    <Table.Column
+                        dataIndex="ProductName"
+                        title={t("orderItem.productName")}
+                    />
+                    <Table.Column
+                        dataIndex="Quantity"
+                        title={t("orderItem.quantity")}
+                    />
+                    <Table.Column
+                        dataIndex="UnitPrice"
+                        title={t("orderItem.unitPrice")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                    <Table.Column
+                        dataIndex="Subtotal"
+                        title={t("orderItem.subtotal")}
+                        render={(value: number) => value ? `$${value.toFixed(2)}` : "-"}
+                    />
+                </Table>
+            </Card>
+        </Show>
+    );
+};