@qlover/create-app 0.7.12 → 0.7.14

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}
+    </>
+  );
+}

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

@@ -4,17 +4,16 @@ import { TranslationOutlined } from '@ant-design/icons';
 import { Dropdown } from 'antd';
 import { useLocale } from 'next-intl';
 import { useCallback, useMemo } from 'react';
-import type {
-  I18nServiceInterface,
-  I18nServiceLocale
-} from '@/base/port/I18nServiceInterface';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
 import { usePathname, useRouter } from '@/i18n/routing';
 import { i18nConfig } from '@config/i18n';
 import type { LocaleType } from '@config/i18n';
+import { I } from '@config/IOCIdentifier';
+import { useIOC } from '../hook/useIOC';
 import type { ItemType } from 'antd/es/menu/interface';
 
-export function LanguageSwitcher(props: { i18nService: I18nServiceInterface }) {
-  const { i18nService } = props;
+export function LanguageSwitcher() {
+  const i18nService = useIOC(I.I18nServiceInterface);
   const pathname = usePathname(); // current pathname, aware of i18n
 
   const router = useRouter(); // i18n-aware router instance

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { LogoutOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { useCallback } from 'react';

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

@@ -0,0 +1,17 @@
+export function With<T>(props: {
+  fallback?: React.ReactNode;
+  it: T;
+  children: React.ReactNode | ((it: NonNullable<T>) => React.ReactNode);
+}) {
+  const { fallback, it, children } = props;
+
+  if (it) {
+    if (typeof children === 'function') {
+      return children(it);
+    }
+
+    return children;
+  }
+
+  return fallback ?? null;
+}

package/dist/templates/next-app/src/uikit/components/chat/ChatActionInterface.ts

@@ -0,0 +1,30 @@
+import {
+  StoreInterface,
+  type StoreStateInterface
+} from '@qlover/corekit-bridge';
+
+export const MessageType = Object.freeze({
+  USER: 'user',
+  ASSISTANT: 'assistant'
+});
+
+export type MessageTypeValue = (typeof MessageType)[keyof typeof MessageType];
+
+export interface MessageInterface {
+  id: string;
+  content: unknown;
+  role: MessageTypeValue;
+  createdAt: string;
+
+  loading?: boolean;
+}
+
+export interface ChatStateInterface extends StoreStateInterface {
+  messages: MessageInterface[];
+}
+
+export abstract class ChatActionInterface<
+  S extends ChatStateInterface
+> extends StoreInterface<S> {
+  abstract focus(): void;
+}

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

@@ -0,0 +1,65 @@
+import { SendOutlined } from '@ant-design/icons';
+import { Button, Input } from 'antd';
+import { useCallback, useRef } from 'react';
+import { useStore } from '../../hook/useStore';
+import type {
+  FocusBarActionInterface,
+  FocusBarStateInterface
+} from './FocusBarActionInterface';
+
+export function ChatFocusBar({
+  focusBarAction
+}: {
+  focusBarAction: FocusBarActionInterface<FocusBarStateInterface>;
+}) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const { inputValue } = useStore(focusBarAction);
+  const sendState = useStore(focusBarAction, (state) => state.sendState);
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      focusBarAction.setInputValue(e.target.value);
+    },
+    [focusBarAction]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        focusBarAction.sendMessage(inputValue);
+      }
+    },
+    [focusBarAction, inputValue]
+  );
+
+  const sending = sendState.loading;
+
+  return (
+    <div
+      data-testid="ChatFocusBarInput"
+      className="flex items-end gap-2 p-4 bg-elevated border-t border-c-border"
+    >
+      <Input.TextArea
+        ref={inputRef}
+        disabled={sending}
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Type your message..."
+        rows={1}
+      />
+      <Button
+        data-testid="ChatFocusBarSendButton"
+        onClick={() => {
+          focusBarAction.sendMessage(inputValue);
+        }}
+        type="primary"
+        className="flex items-center justify-center !h-10 !w-10 !rounded-full !bg-c-brand !text-white hover:!bg-c-brand-hover transition-colors"
+        icon={<SendOutlined />}
+        loading={sending}
+        disabled={sending}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { MessageType } from './ChatActionInterface';
+import { useStore } from '../../hook/useStore';
+import type {
+  ChatActionInterface,
+  ChatStateInterface,
+  MessageInterface
+} from './ChatActionInterface';
+
+function MessageItem({ message }: { message: MessageInterface }) {
+  return (
+    <div
+      data-testid="MessageItem"
+      className={`flex ${
+        message.role === MessageType.USER ? 'justify-end' : 'justify-start'
+      } mb-4`}
+    >
+      <div
+        data-testid="MessageItemContent"
+        className={`max-w-[70%] rounded-lg p-3 ${
+          message.role === MessageType.USER
+            ? 'bg-blue-500 text-white'
+            : 'bg-gray-100 dark:bg-gray-700'
+        }`}
+      >
+        <p className="whitespace-pre-wrap break-words">{message.content}</p>
+        <div className="mt-1 text-xs opacity-70">
+          {new Date(message.createdAt).toLocaleTimeString()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ChatMessages({
+  chatAction
+}: {
+  chatAction: ChatActionInterface<ChatStateInterface>;
+}) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const { messages } = useStore(chatAction);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div data-testid="ChatMessages" className="flex-1 overflow-y-auto p-4">
+      {messages.map((message: MessageInterface) => (
+        <MessageItem
+          data-testid="MessageItem"
+          key={message.id}
+          message={message}
+        />
+      ))}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+}