@qlover/create-app 0.7.13 → 0.7.14

package/dist/templates/next-app/src/base/services/appApi/AppApiPlugin.ts

@@ -6,10 +6,13 @@ import {
 } from '@qlover/fe-corekit';
 import type { AppApiErrorInterface } from '@/base/port/AppApiInterface';
 import type { AppApiConfig } from './AppApiRequester';
+import type { LoggerInterface } from '@qlover/logger';
 
 export class AppApiPlugin implements ExecutorPlugin {
   readonly pluginName = 'AppApiPlugin';
 
+  constructor(protected logger: LoggerInterface) {}
+
   isAppApiErrorInterface(value: unknown): value is AppApiErrorInterface {
     return (
       typeof value === 'object' &&
@@ -21,8 +24,16 @@ export class AppApiPlugin implements ExecutorPlugin {
     );
   }
 
-  onSuccess(context: ExecutorContext<unknown>): void | Promise<void> {
+  onSuccess(context: ExecutorContext<AppApiConfig>): void | Promise<void> {
     const response = context.returnValue;
+    const { parameters } = context;
+
+    this.logger.info(
+      `%c[AppApi ${parameters.method} ${parameters.url}]%c - ${new Date().toLocaleString()}`,
+      'color: #0f0;',
+      'color: inherit;',
+      response
+    );
 
     if (this.isAppApiErrorInterface(response)) {
       throw new Error(response.message || response.id);
@@ -34,6 +45,8 @@ export class AppApiPlugin implements ExecutorPlugin {
   ): Promise<ExecutorError | void> {
     const { error, parameters } = context;
 
+    this.loggerError(parameters, error);
+
     if (error instanceof RequestError && parameters.responseType === 'json') {
       // @ts-expect-error response is not defined in Error
       let response = error?.response;
@@ -60,4 +73,13 @@ export class AppApiPlugin implements ExecutorPlugin {
       return {};
     }
   }
+
+  protected loggerError(config: AppApiConfig, error: unknown): void {
+    this.logger.error(
+      `%c[AppApi ${config.method} ${config.url}]%c - ${new Date().toLocaleString()}`,
+      'color: #f00;',
+      'color: inherit;',
+      error
+    );
+  }
 }

package/dist/templates/next-app/src/base/services/appApi/AppUserApiBootstrap.ts

@@ -3,6 +3,7 @@ import { FetchURLPlugin } from '@qlover/fe-corekit';
 import { DialogErrorPlugin } from '@/base/cases/DialogErrorPlugin';
 import { RequestEncryptPlugin } from '@/base/cases/RequestEncryptPlugin';
 import { StringEncryptor } from '@/base/cases/StringEncryptor';
+import { I } from '@config/IOCIdentifier';
 import { AppApiPlugin } from './AppApiPlugin';
 import { AppApiRequester } from './AppApiRequester';
 import type { AppApiConfig } from './AppApiRequester';
@@ -27,9 +28,8 @@ export class AppUserApiBootstrap implements BootstrapExecutorPlugin {
         requestDataSerializer: this.requestDataSerializer.bind(this)
       })
     );
-    appUserApi.usePlugin(new AppApiPlugin());
+    appUserApi.usePlugin(new AppApiPlugin(ioc.get(I.Logger)));
     appUserApi.usePlugin(ioc.get(DialogErrorPlugin));
-    console.log('jj AppUserApiBootstrap success');
   }
 
   protected requestDataSerializer(

package/dist/templates/next-app/src/base/types/PageProps.ts

@@ -1,4 +1,4 @@
-import type { PageWithParams } from '@/base/cases/PageParams';
+import type { PageWithParams } from '@/server/PageParams';
 
 export interface PageParamsProps extends PageWithParams {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;

package/dist/templates/next-app/src/core/bootstraps/BootstrapClient.ts

@@ -1,3 +1,4 @@
+import 'reflect-metadata';
 import { Bootstrap } from '@qlover/corekit-bridge';
 import { isObject } from 'lodash';
 import { browserGlobalsName } from '@config/common';

package/dist/templates/next-app/src/core/bootstraps/BootstrapServer.ts

@@ -1,3 +1,4 @@
+import 'reflect-metadata';
 import {
   type ServiceIdentifier,
   type BootstrapContextValue,

package/dist/templates/next-app/src/core/globals.ts

@@ -1,3 +1,5 @@
+import 'reflect-metadata';
+
 // ! global variables, don't import any dependencies and don't have side effects
 import { ColorFormatter, ConsoleHandler, Logger } from '@qlover/corekit-bridge';
 import { JSONSerializer } from '@qlover/fe-corekit';

package/dist/templates/next-app/src/core/serverIoc/ServerIOCRegister.ts

@@ -7,6 +7,7 @@ import {
   type IOCRegisterInterface
 } from '@qlover/corekit-bridge';
 import type { IocRegisterOptions } from '@/base/port/IOCInterface';
+import { SupabaseBridge } from '@/server/sqlBridges/SupabaseBridge';
 import { IOCIdentifier as I } from '@config/IOCIdentifier';
 
 export class ServerIOCRegister
@@ -45,7 +46,9 @@ export class ServerIOCRegister
     );
   }
 
-  protected registerImplement(_ioc: IOCContainerInterface): void {}
+  protected registerImplement(ioc: IOCContainerInterface): void {
+    ioc.bind(I.DBBridgeInterface, ioc.get(SupabaseBridge));
+  }
 
   protected registerCommon(_ioc: IOCContainerInterface): void {}
 

package/dist/templates/next-app/src/{base/cases → server}/PageParams.ts

@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation';
 import { getMessages, getTranslations } from 'next-intl/server';
 import { i18nConfig } from '@config/i18n';
 import type { LocaleType, PageI18nInterface } from '@config/i18n';
-import type { ParamsHandlerInterface as ParamsHandlerInterface } from '../port/ParamsHandlerInterface';
+import type { ParamsHandlerInterface as ParamsHandlerInterface } from './port/ParamsHandlerInterface';
 
 export interface PageWithParams {
   params?: Promise<PageParamsType>;

package/dist/templates/next-app/src/server/port/DBBridgeInterface.ts

@@ -0,0 +1,31 @@
+export type WhereOperation = '=' | '!=' | '>' | '<' | '>=' | '<=';
+export type Where = [string, WhereOperation, string | number];
+
+export interface BridgeEvent {
+  table: string;
+  fields?: string | string[];
+  where?: Where[];
+  data?: unknown;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface PaginationInfo {
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface DBBridgeResponse<T> {
+  error?: unknown;
+  data: T;
+  pagination?: PaginationInfo;
+}
+
+export interface DBBridgeInterface {
+  add(event: BridgeEvent): Promise<DBBridgeResponse<unknown>>;
+  update(event: BridgeEvent): Promise<DBBridgeResponse<unknown>>;
+  delete(event: BridgeEvent): Promise<DBBridgeResponse<unknown>>;
+  get(event: BridgeEvent): Promise<DBBridgeResponse<unknown>>;
+  pagination(event: BridgeEvent): Promise<DBBridgeResponse<unknown[]>>;
+}

package/dist/templates/next-app/src/server/port/DBTableInterface.ts

@@ -1,4 +1,4 @@
-import type { PaginationInterface } from '@/base/port/PaginationInterface';
+import type { PaginationInterface } from '@/server/port/PaginationInterface';
 
 export interface DBTableInterface {
   readonly name: string;

package/dist/templates/next-app/src/server/repositorys/UserRepository.ts

@@ -1,9 +1,9 @@
 import { inject, injectable } from 'inversify';
 import { isEmpty, last } from 'lodash';
-import type { DBBridgeInterface } from '@/base/port/DBBridgeInterface';
-import type { PaginationInterface } from '@/base/port/PaginationInterface';
+import type { DBBridgeInterface } from '@/server/port/DBBridgeInterface';
+import type { PaginationInterface } from '@/server/port/PaginationInterface';
 import type { UserSchema } from '@migrations/schema/UserSchema';
-import { SupabaseBridge } from '../SupabaseBridge';
+import { I } from '@config/IOCIdentifier';
 import type { UserRepositoryInterface } from '../port/UserRepositoryInterface';
 
 @injectable()
@@ -21,7 +21,9 @@ export class UserRepository implements UserRepositoryInterface {
     'updated_at'
   ];
 
-  constructor(@inject(SupabaseBridge) protected dbBridge: DBBridgeInterface) {}
+  constructor(
+    @inject(I.DBBridgeInterface) protected dbBridge: DBBridgeInterface
+  ) {}
 
   getAll(): Promise<unknown> {
     return this.dbBridge.get({ table: this.name });

package/dist/templates/next-app/src/server/services/AIService.ts

@@ -0,0 +1,43 @@
+import { inject, injectable } from 'inversify';
+import OpenAI from 'openai';
+import type { AppConfig } from '@/base/cases/AppConfig';
+import { I } from '@config/IOCIdentifier';
+import type { ChatCompletionMessageParam } from 'openai/resources/chat/completions';
+
+@injectable()
+export class AIService {
+  protected apiKey: string;
+  protected baseUrl: string;
+  protected client: OpenAI;
+
+  constructor(@inject(I.AppConfig) appConfig: AppConfig) {
+    this.apiKey = appConfig.openaiApiKey;
+    this.baseUrl = appConfig.openaiBaseUrl;
+
+    console.log(this.apiKey, this.baseUrl);
+    this.client = new OpenAI({
+      apiKey: this.apiKey,
+      baseURL: this.baseUrl
+    });
+  }
+
+  async completions(messages: ChatCompletionMessageParam[]): Promise<unknown> {
+    const url = `${this.baseUrl}/chat/completions`;
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({
+        messages: messages,
+        model: 'claude-sonnet-4-20250514'
+      }),
+      headers: {
+        Authorization: `token ${this.apiKey}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      },
+      mode: 'cors'
+    });
+
+    return await response.json();
+  }
+}

package/dist/templates/next-app/src/server/services/ApiUserService.ts

@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import type { PaginationInterface } from '@/base/port/PaginationInterface';
+import type { PaginationInterface } from '@/server/port/PaginationInterface';
 import type { UserSchema } from '@migrations/schema/UserSchema';
 import { UserRepository } from '../repositorys/UserRepository';
 import { PaginationValidator } from '../validators/PaginationValidator';

package/dist/templates/next-app/src/server/{SupabaseBridge.ts → sqlBridges/SupabaseBridge.ts}

@@ -9,8 +9,9 @@ import type { AppConfig } from '@/base/cases/AppConfig';
 import type {
   BridgeEvent,
   DBBridgeInterface,
+  DBBridgeResponse,
   Where
-} from '@/base/port/DBBridgeInterface';
+} from '@/server/port/DBBridgeInterface';
 import { I } from '@config/IOCIdentifier';
 import type { LoggerInterface } from '@qlover/logger';
 import type { PostgrestFilterBuilder } from '@supabase/postgrest-js';
@@ -24,6 +25,9 @@ const whereHandlerMaps = {
   '<=': 'lte'
 };
 
+export type SupabaseBridgeResponse<T> = DBBridgeResponse<T> &
+  PostgrestResponse<T>;
+
 @injectable()
 export class SupabaseBridge implements DBBridgeInterface {
   protected supabase: SupabaseClient;
@@ -42,19 +46,20 @@ export class SupabaseBridge implements DBBridgeInterface {
     return this.supabase;
   }
 
-  async execSql(sql: string): Promise<PostgrestSingleResponse<unknown>> {
+  async execSql(sql: string): Promise<SupabaseBridgeResponse<unknown>> {
     const res = await this.supabase.rpc('exec_sql', { sql });
     return this.catch(res);
   }
 
   protected async catch(
     result: PostgrestSingleResponse<unknown>
-  ): Promise<PostgrestSingleResponse<unknown>> {
+  ): Promise<SupabaseBridgeResponse<unknown>> {
     if (result.error) {
       this.logger.info(result);
       throw new Error(result.error.message);
     }
-    return result;
+
+    return result as SupabaseBridgeResponse<unknown>;
   }
 
   protected handleWhere(
@@ -79,7 +84,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     }
   }
 
-  async add(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>> {
+  async add(event: BridgeEvent): Promise<DBBridgeResponse<unknown>> {
     const { table, data } = event;
     if (!data) {
       throw new Error('Data is required for add operation');
@@ -91,7 +96,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     return this.catch(res);
   }
 
-  async update(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>> {
+  async update(event: BridgeEvent): Promise<DBBridgeResponse<unknown>> {
     const { table, data, where } = event;
     if (!data) {
       throw new Error('Data is required for update operation');
@@ -104,7 +109,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     return this.catch(await handler);
   }
 
-  async delete(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>> {
+  async delete(event: BridgeEvent): Promise<DBBridgeResponse<unknown>> {
     const { table, where } = event;
     const handler = this.supabase.from(table).delete();
 
@@ -113,7 +118,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     return this.catch(await handler);
   }
 
-  async get(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>> {
+  async get(event: BridgeEvent): Promise<SupabaseBridgeResponse<unknown>> {
     const { table, fields = '*', where } = event;
     const selectFields = Array.isArray(fields) ? fields.join(',') : fields;
     const handler = this.supabase.from(table).select(selectFields);
@@ -123,7 +128,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     return this.catch(await handler);
   }
 
-  async pagination(event: BridgeEvent): Promise<PostgrestResponse<unknown>> {
+  async pagination(event: BridgeEvent): Promise<DBBridgeResponse<unknown[]>> {
     const { table, fields = '*', where, page = 1, pageSize = 10 } = event;
     const selectFields = Array.isArray(fields) ? fields.join(',') : fields;
 
@@ -145,7 +150,7 @@ export class SupabaseBridge implements DBBridgeInterface {
     const result = await this.catch(await handler);
 
     if (result.error) {
-      return result as PostgrestResponse<unknown>;
+      return result as DBBridgeResponse<unknown[]>;
     }
 
     return {
@@ -154,6 +159,6 @@ export class SupabaseBridge implements DBBridgeInterface {
       count: countResult.count,
       status: result.status,
       statusText: result.statusText
-    };
+    } as DBBridgeResponse<unknown[]>;
   }
 }

package/dist/templates/next-app/src/server/validators/LoginValidator.ts

@@ -17,13 +17,13 @@ export interface LoginValidatorData {
   password: string;
 }
 
-const emailSchema = z.email({ error: V_EMAIL_INVALID });
+const emailSchema = z.string().email({ message: V_EMAIL_INVALID });
 
 const passwordSchema = z
   .string()
-  .min(6, { error: V_PASSWORD_MIN_LENGTH })
-  .max(50, { error: V_PASSWORD_MAX_LENGTH })
-  .regex(/^\S+$/, { error: V_PASSWORD_SPECIAL_CHARS });
+  .min(6, { message: V_PASSWORD_MIN_LENGTH })
+  .max(50, { message: V_PASSWORD_MAX_LENGTH })
+  .regex(/^\S+$/, { message: V_PASSWORD_SPECIAL_CHARS });
 
 interface ExtendedExecutorError extends ExecutorError {
   issues?: ValidationFaildResult[];

package/dist/templates/next-app/src/server/validators/PaginationValidator.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import type { PaginationInterface } from '@/base/port/PaginationInterface';
+import type { PaginationInterface } from '@/server/port/PaginationInterface';
 import { API_PAGE_INVALID } from '@config/Identifier';
 import {
   type ValidationFaildResult,

package/dist/templates/next-app/src/uikit/components/AdminLayout.tsx

@@ -3,18 +3,20 @@
 import {
   DashboardOutlined,
   UserOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined
 } from '@ant-design/icons';
 import { Layout, Menu } from 'antd';
 import { clsx } from 'clsx';
-import React, { useCallback, useMemo, type HTMLAttributes } from 'react';
+import React, { useMemo, type HTMLAttributes } from 'react';
 import { AdminPageManager } from '@/base/cases/AdminPageManager';
 import { BaseHeader } from './BaseHeader';
+import { LanguageSwitcher } from './LanguageSwitcher';
 import { LocaleLink } from './LocaleLink';
+import { LogoutButton } from './LogoutButton';
+import { ThemeSwitcher } from './ThemeSwitcher';
 import { useIOC } from '../hook/useIOC';
 import { useStore } from '../hook/useStore';
-import type { RenderLeftFunction } from './BaseHeader';
 import type { ItemType } from 'antd/es/menu/interface';
 
 const { Sider } = Layout;
@@ -33,7 +35,6 @@ export function AdminLayout(props: AdminLayoutProps) {
   const { children, className, mainClassName, ...rest } = props;
 
   const page = useIOC(AdminPageManager);
-
   const collapsedSidebar = useStore(page, page.selectors.collapsedSidebar);
   const navItems = useStore(page, page.selectors.navItems);
 
@@ -60,40 +61,46 @@ export function AdminLayout(props: AdminLayoutProps) {
     });
   }, [navItems]);
 
-  const renderHeaderLeft: RenderLeftFunction = useCallback(
-    ({ defaultElement }) => (
-      <div data-testid="AdminLayoutHeader" className="flex items-center">
-        <span
-          className="text-text hover:text-text-hover cursor-pointer text-md transition-colors"
-          onClick={() => page.toggleSidebar()}
-        >
-          {collapsedSidebar ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-        </span>
-
-        {defaultElement}
-      </div>
-    ),
-    [collapsedSidebar, page]
-  );
+  const rightActions = useMemo(() => {
+    return [
+      <LanguageSwitcher key="language-switcher" />,
+      <ThemeSwitcher key="theme-switcher" />,
+      <LogoutButton key="logout-button" />
+    ];
+  }, []);
 
   return (
     <Layout data-testid="AdminLayout" className={className} {...rest}>
-      <div className="overflow-auto h-screen sticky top-0 bottom-0 scrollbar-thin scrollbar-gutter-stable">
+      <div className="overflow-y-auto overflow-x-hidden h-screen sticky top-0 bottom-0 scrollbar-thin scrollbar-gutter-stable">
         <Sider
-          className="h-full"
+          className="h-full relative"
           onCollapse={() => page.toggleSidebar()}
           collapsed={collapsedSidebar}
+          collapsedWidth={46}
         >
-          <div className="demo-logo-vertical" />
           <Menu mode="inline" items={sidebarItems} />
+
+          <div
+            data-testid="ToggleSidebarButton"
+            className="absolute w-2 right-0 top-0 bottom-0 bg-secondary cursor-pointer hover:bg-elevated flex items-center justify-center"
+            onClick={() => page.toggleSidebar()}
+          >
+            <span className="text-text scale-75 rotate-x-90">
+              {collapsedSidebar ? (
+                <VerticalAlignTopOutlined />
+              ) : (
+                <VerticalAlignBottomOutlined />
+              )}
+            </span>
+          </div>
         </Sider>
       </div>
 
       <Layout>
         <BaseHeader
           href="/admin"
-          showLogoutButton
-          renderLeft={renderHeaderLeft}
+          className="max-w-full pl-0"
+          rightActions={rightActions}
         />
         <main
           className={clsx('p-2 bg-primary text-text flex-1', mainClassName)}

package/dist/templates/next-app/src/uikit/components/BaseHeader.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import { TeamOutlined } from '@ant-design/icons';
+import { clsx } from 'clsx';
 import { useLocale, useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import { useIOC } from '@/uikit/hook/useIOC';
 import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
 import { IOCIdentifier } from '@config/IOCIdentifier';
-import { LanguageSwitcher } from './LanguageSwitcher';
 import { LocaleLink } from './LocaleLink';
-import { LogoutButton } from './LogoutButton';
-import { ThemeSwitcher } from './ThemeSwitcher';
 
 export type RenderLeftFunction = (props: {
   locale: string;
@@ -18,13 +15,12 @@ export type RenderLeftFunction = (props: {
 
 export function BaseHeader(props: {
   href?: string;
-  showLogoutButton?: boolean;
-  showAdminButton?: boolean;
   renderLeft?: React.ReactNode | RenderLeftFunction;
+  rightActions?: React.ReactNode;
+  className?: string;
 }) {
-  const { href = '/', showLogoutButton, showAdminButton, renderLeft } = props;
+  const { href = '/', className, renderLeft, rightActions } = props;
   const appConfig = useIOC(IOCIdentifier.AppConfig);
-  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
   const locale = useLocale();
   const t = useTranslations();
 
@@ -44,7 +40,7 @@ export function BaseHeader(props: {
       >
         <span
           data-testid="base-header-app-name"
-          className="ml-2 text-lg font-semibold text-text"
+          className="text-lg font-semibold text-text"
         >
           {tt.title}
         </span>
@@ -69,24 +65,14 @@ export function BaseHeader(props: {
       data-testid="BaseHeader"
       className="h-14 bg-secondary border-b border-c-border sticky top-0 z-50"
     >
-      <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
+      <div
+        className={clsx(
+          'flex items-center justify-between h-full px-4 mx-auto max-w-7xl',
+          className
+        )}
+      >
         <div className="flex items-center">{RenderLeft}</div>
-        <div className="flex items-center gap-2 md:gap-4">
-          {showAdminButton && (
-            <LocaleLink
-              href="/admin"
-              title={tt.admin}
-              locale={locale}
-              className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
-            >
-              <TeamOutlined className="text-lg text-text" />
-            </LocaleLink>
-          )}
-
-          <LanguageSwitcher i18nService={i18nService} />
-          <ThemeSwitcher />
-          {showLogoutButton && <LogoutButton />}
-        </div>
+        <div className="flex items-center gap-2 md:gap-4">{rightActions}</div>
       </div>
     </header>
   );

package/dist/templates/next-app/src/uikit/components/BaseLayout.tsx

@@ -1,5 +1,12 @@
+import { TeamOutlined } from '@ant-design/icons';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, type HTMLAttributes } from 'react';
+import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
 import { BaseHeader } from './BaseHeader';
-import type { HTMLAttributes } from 'react';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from './LocaleLink';
+import { LogoutButton } from './LogoutButton';
+import { ThemeSwitcher } from './ThemeSwitcher';
 
 export interface BaseLayoutProps extends HTMLAttributes<HTMLDivElement> {
   showLogoutButton?: boolean;
@@ -14,16 +21,41 @@ export function BaseLayout({
   mainProps,
   ...props
 }: BaseLayoutProps) {
+  const locale = useLocale();
+  const t = useTranslations();
+
+  const tt = {
+    admin: t(PAGE_HEAD_ADMIN_TITLE)
+  };
+
+  const actions = useMemo(
+    () =>
+      [
+        showAdminButton && (
+          <LocaleLink
+            key="admin-button"
+            href="/admin"
+            title={tt.admin}
+            locale={locale}
+            className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+          >
+            <TeamOutlined className="text-lg text-text" />
+          </LocaleLink>
+        ),
+        <LanguageSwitcher key="language-switcher" />,
+        <ThemeSwitcher key="theme-switcher" />,
+        showLogoutButton && <LogoutButton key="logout-button" />
+      ].filter(Boolean),
+    [showAdminButton, tt.admin, locale, showLogoutButton]
+  );
+
   return (
     <div
       data-testid="BaseLayout"
       className="flex flex-col min-h-screen"
       {...props}
     >
-      <BaseHeader
-        showLogoutButton={showLogoutButton}
-        showAdminButton={showAdminButton}
-      />
+      <BaseHeader rightActions={actions} />
       <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
         {children}
       </main>

package/dist/templates/next-app/src/uikit/components/ChatRoot.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { ChatAction } from '@/base/cases/ChatAction';
+import { FocusBarAction } from '@/base/cases/FocusBarAction';
+import { useIOC } from '../hook/useIOC';
+import { ChatWrap } from './chat/ChatWrap';
+
+export function ChatRoot() {
+  const chatAction = useIOC(ChatAction);
+  const focusBarAction = useIOC(FocusBarAction);
+
+  return (
+    <div data-testid="ChatRoot" className="fixed bottom-0 right-0 ">
+      <ChatWrap chatAction={chatAction} focusBarAction={focusBarAction} />
+    </div>
+  );
+}

package/dist/templates/next-app/src/uikit/components/ClientSeo.tsx

@@ -0,0 +1,36 @@
+import type { PageI18nInterface } from '@config/i18n';
+import { With } from './With';
+
+export function ClientSeo(props: {
+  i18nInterface: PageI18nInterface;
+  children?: React.ReactNode;
+}) {
+  const { i18nInterface, children } = props;
+
+  return (
+    <>
+      <title>{i18nInterface.title}</title>
+      <meta name="description" content={i18nInterface.description} />
+      <meta name="keywords" content={i18nInterface.keywords} />
+      <meta name="author" content={i18nInterface.author} />
+      <meta name="publishedTime" content={i18nInterface.publishedTime} />
+      <meta name="modifiedTime" content={i18nInterface.modifiedTime} />
+
+      <With it={i18nInterface.canonical}>
+        <meta name="canonical" content={i18nInterface.canonical} />
+      </With>
+
+      <With it={i18nInterface.og}>
+        {({ title, description, image }) => (
+          <>
+            <meta name="og:title" content={title} />
+            <meta name="og:description" content={description} />
+            <meta name="og:image" content={image} />
+          </>
+        )}
+      </With>
+
+      {children}
+    </>
+  );
+}