@orbe-agro/client-core 5.6.201 → 5.6.202

package/lib/@ecme/components/view/ChatBox/components/MessageList.tsx

@@ -22,6 +22,9 @@ export type MessageListProps = {
     customRenderer?: (message: List, index: number) => string | ReactNode
     customAction?: (message: List, index: number) => string | ReactNode
     bubbleClass?: string
+    myBubbleClass?: string
+    botBubbleClass?: string
+    renderTyping?: () => ReactNode
     messageListClass?: string
 }
 
@@ -34,6 +37,9 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
         customAction,
         messageListClass,
         bubbleClass,
+        myBubbleClass,
+        botBubbleClass,
+        renderTyping,
     } = props
 
     return (
@@ -49,7 +55,11 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
                                 key={message.id}
                                 showAvatar={showAvatar}
                                 avatarGap={avatarGap}
-                                bubbleClass={bubbleClass}
+                                bubbleClass={
+                                    message.isMyMessage
+                                        ? myBubbleClass ?? bubbleClass
+                                        : botBubbleClass ?? bubbleClass
+                                }
                                 {...message}
                                 {...(customRenderer
                                     ? {
@@ -71,14 +81,18 @@ const MessageList = forwardRef<ScrollBarRef, MessageListProps>((props, ref) => {
                                 sender={typing}
                                 type="regular"
                                 showAvatar={showAvatar}
-                                bubbleClass={bubbleClass}
+                                bubbleClass={botBubbleClass ?? bubbleClass}
                                 avatarGap={avatarGap}
                                 content={
-                                    <span className="flex items-center gap-2">
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                        <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
-                                    </span>
+                                    renderTyping ? (
+                                        renderTyping()
+                                    ) : (
+                                        <span className="flex items-center gap-2">
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                            <span className="size-1.5 rounded-full bg-gray-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-gray-300"></span>
+                                        </span>
+                                    )
                                 }
                             />
                         )}

package/lib/@ecme/configs/navigation.config/concepts.navigation.config.ts

@@ -38,22 +38,6 @@ const conceptsNavigationConfig: NavigationTree[] = [
                     },
                 },
                 subMenu: [
-                    {
-                        key: 'concepts.ai.chat',
-                        path: `${CONCEPTS_PREFIX_PATH}/ai/chat`,
-                        title: 'Chat',
-                        translateKey: 'nav.conceptsAi.chat',
-                        icon: 'aiChat',
-                        type: NAV_ITEM_TYPE_ITEM,
-                        authority: [ADMIN, USER],
-                        meta: {
-                            description: {
-                                translateKey: 'nav.conceptsAi.chatDesc',
-                                label: 'AI-powered chat systems',
-                            },
-                        },
-                        subMenu: [],
-                    },
                     {
                         key: 'concepts.ai.image',
                         path: `${CONCEPTS_PREFIX_PATH}/ai/image`,

package/lib/@ecme/configs/routes.config/conceptsRoute.ts

@@ -4,15 +4,6 @@ import { ADMIN, USER } from '@/constants/roles.constant'
 import type { Routes } from '@/@types/routes'
 
 const conceptsRoute: Routes = [
-    {
-        key: 'concepts.ai.chat',
-        path: `${CONCEPTS_PREFIX_PATH}/ai/chat`,
-        component: lazy(() => import('@/views/concepts/ai/Chat')),
-        authority: [ADMIN, USER],
-        meta: {
-            pageContainerType: 'contained',
-        },
-    },
     {
         key: 'concepts.ai.image',
         path: `${CONCEPTS_PREFIX_PATH}/ai/image`,

package/lib/@ecme/services/AiService.ts

@@ -1,4 +1,31 @@
 import ApiService from './ApiService'
+import { useAiModelStore } from '@/views/concepts/ai/Chat/store/aiModelStore'
+
+/** Informa ao backend qual modelo usar. Sem o header, ele aplica o default. */
+export const AI_MODEL_HEADER = 'X-Ai-Model'
+
+export type AiModel = {
+    id: string
+    label: string
+    default: boolean
+    cloud: boolean
+}
+
+export type GetAiModelsResponse = {
+    models: AiModel[]
+}
+
+/**
+ * Header do modelo escolhido, montado por chamada.
+ *
+ * Deliberadamente NAO e um interceptor global do AxiosBase: o chat vive no
+ * layout de todos os MFEs, e um interceptor faria toda requisicao de todo
+ * modulo passar por essa checagem so para servir ao /ai/*.
+ */
+const aiModelHeader = () => {
+    const selectedModel = useAiModelStore.getState().selectedModel
+    return selectedModel ? { [AI_MODEL_HEADER]: selectedModel } : undefined
+}
 
 export async function apiPostChat<T>(data: {
     prompt: string
@@ -8,6 +35,8 @@ export async function apiPostChat<T>(data: {
         url: '/ai/chat',
         method: 'post',
         data,
+        headers: aiModelHeader(),
+        skipGlobalLoading: true,
     })
 }
 
@@ -15,6 +44,15 @@ export async function apiGetChatHistory<T>() {
     return ApiService.fetchDataWithAxios<T>({
         url: '/ai/chat/history',
         method: 'get',
+        skipGlobalLoading: true,
+    })
+}
+
+export async function apiGetAiModels<T>() {
+    return ApiService.fetchDataWithAxios<T>({
+        url: '/ai/models',
+        method: 'get',
+        skipGlobalLoading: true,
     })
 }
 
@@ -25,6 +63,7 @@ export async function apiGetImages<T, U extends Record<string, unknown>>(
         url: '/ai/images',
         method: 'get',
         params,
+        skipGlobalLoading: true,
     })
 }
 
@@ -35,5 +74,6 @@ export async function apiPostImages<T, U extends Record<string, unknown>>(
         url: '/ai/images',
         method: 'post',
         data,
+        skipGlobalLoading: true,
     })
 }

package/lib/@ecme/services/axios/AxiosBase.ts

@@ -6,6 +6,19 @@ import { useLoadingConfigStore, getCurrentMicrofrontendId } from "@base/store";
 import AxiosRequestIntrceptorConfigCallback from "./AxiosRequestIntrceptorConfigCallback";
 import AxiosResponseIntrceptorErrorCallback from "./AxiosResponseIntrceptorErrorCallback";
 
+/**
+ * Permite que uma requisição específica seja excluída do loading global
+ * (overlay de tela cheia). Útil para chamadas que exibem seu próprio
+ * indicador de carregamento — ex.: o chat de IA, que mostra o balãozinho
+ * de "digitando". Comportamento padrão inalterado: só afeta requisições
+ * que marcarem explicitamente `skipGlobalLoading: true`.
+ */
+declare module "axios" {
+  interface AxiosRequestConfig {
+    skipGlobalLoading?: boolean;
+  }
+}
+
 const AxiosBase = axios.create({
   timeout: 600000,
   baseURL: API_URL,
@@ -13,25 +26,37 @@ const AxiosBase = axios.create({
 
 let activeRequests = 0;
 
+const startGlobalLoading = () => {
+  const microfrontendId = getCurrentMicrofrontendId();
+  const loadingConfig = useLoadingConfigStore.getState();
+  if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
+    useThemeStore.getState().setLoading(true);
+  }
+};
+
+const stopGlobalLoading = () => {
+  const microfrontendId = getCurrentMicrofrontendId();
+  const loadingConfig = useLoadingConfigStore.getState();
+  if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
+    useThemeStore.getState().setLoading(false);
+  }
+};
+
 AxiosBase.interceptors.request.use(
   (config) => {
-    activeRequests++;
-    if (activeRequests === 1) {
-      const microfrontendId = getCurrentMicrofrontendId();
-      const loadingConfig = useLoadingConfigStore.getState();
-      if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
-        useThemeStore.getState().setLoading(true);
+    if (!config.skipGlobalLoading) {
+      activeRequests++;
+      if (activeRequests === 1) {
+        startGlobalLoading();
       }
     }
     return AxiosRequestIntrceptorConfigCallback(config);
   },
   (error) => {
-    activeRequests = Math.max(0, activeRequests - 1);
-    if (activeRequests === 0) {
-      const microfrontendId = getCurrentMicrofrontendId();
-      const loadingConfig = useLoadingConfigStore.getState();
-      if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
-        useThemeStore.getState().setLoading(false);
+    if (!error?.config?.skipGlobalLoading) {
+      activeRequests = Math.max(0, activeRequests - 1);
+      if (activeRequests === 0) {
+        stopGlobalLoading();
       }
     }
     return Promise.reject(error);
@@ -40,23 +65,19 @@ AxiosBase.interceptors.request.use(
 
 AxiosBase.interceptors.response.use(
   (response) => {
-    activeRequests = Math.max(0, activeRequests - 1);
-    if (activeRequests === 0) {
-      const microfrontendId = getCurrentMicrofrontendId();
-      const loadingConfig = useLoadingConfigStore.getState();
-      if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
-        useThemeStore.getState().setLoading(false);
+    if (!response.config?.skipGlobalLoading) {
+      activeRequests = Math.max(0, activeRequests - 1);
+      if (activeRequests === 0) {
+        stopGlobalLoading();
       }
     }
     return response;
   },
   (error: AxiosError) => {
-    activeRequests = Math.max(0, activeRequests - 1);
-    if (activeRequests === 0) {
-      const microfrontendId = getCurrentMicrofrontendId();
-      const loadingConfig = useLoadingConfigStore.getState();
-      if (loadingConfig.getGlobalLoadingEnabled(microfrontendId)) {
-        useThemeStore.getState().setLoading(false);
+    if (!error.config?.skipGlobalLoading) {
+      activeRequests = Math.max(0, activeRequests - 1);
+      if (activeRequests === 0) {
+        stopGlobalLoading();
       }
     }
     AxiosResponseIntrceptorErrorCallback(error);

package/lib/@ecme/views/concepts/ai/Chat/components/AiThinkingIndicator.tsx

@@ -0,0 +1,24 @@
+import { TbSparkles } from 'react-icons/tb'
+
+/**
+ * Indicador de "pensando" do agente Orbe AI — loader profissional exibido
+ * enquanto a resposta está sendo gerada (estado isTyping do chat).
+ */
+const AiThinkingIndicator = () => {
+    return (
+        <span className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+            <TbSparkles
+                size={18}
+                className="text-primary motion-safe:animate-pulse"
+            />
+            <span className="text-sm">Orbe AI está pensando</span>
+            <span className="inline-flex items-center gap-1">
+                <span className="size-1.5 rounded-full bg-primary motion-safe:animate-bounce [animation-delay:-0.3s]" />
+                <span className="size-1.5 rounded-full bg-primary motion-safe:animate-bounce [animation-delay:-0.15s]" />
+                <span className="size-1.5 rounded-full bg-primary motion-safe:animate-bounce" />
+            </span>
+        </span>
+    )
+}
+
+export default AiThinkingIndicator

package/lib/@ecme/views/concepts/ai/Chat/components/ChatLandingView.tsx

@@ -22,23 +22,23 @@ const promptSuggestion: {
     type: PromptType
 }[] = [
     {
-        title: 'Help me sound like an expert for an upcoming trip',
-        prompt: `I'm going whale watching this weekend and want to appear knowledgeable about killer whales. Tell me a few unique and interesting facts I can share.`,
+        title: 'Como consultar um pedido de venda?',
+        prompt: 'Como faço para consultar um pedido de venda no Orbe Agro?',
         type: 'guide',
     },
     {
-        title: 'Outline an logical sales pitch for a new product',
-        prompt: `Structure a sales pitch for a hair dryer that's also a microphone. Be concise and organize the sales pitch logically. `,
-        type: 'writing',
+        title: 'Para que serve o módulo de Trade?',
+        prompt: 'Explique para que serve o módulo de Trade no Orbe Agro.',
+        type: 'idea',
     },
     {
-        title: 'Help me get organized with a list of 10 tips',
-        prompt: `Give me 10 tips for room organization. `,
-        type: 'idea',
+        title: 'Como abrir um processo de armazenagem?',
+        prompt: 'Quais são os passos para abrir um processo de armazenagem de grãos no Orbe Agro?',
+        type: 'writing',
     },
     {
-        title: 'Write code for a specific task, including edge cases',
-        prompt: `Write a Java function that takes a path as an input and creates a file storing the current system date. Consider edge cases.`,
+        title: 'Onde vejo o limite de crédito de um cliente?',
+        prompt: 'Onde encontro o limite de crédito de um cliente no Orbe Agro?',
         type: 'coding',
     },
 ]
@@ -47,20 +47,20 @@ const ChatLandingView = () => {
     const { handleSend } = useChatSend()
 
     return (
-        <div className="max-w-[900px] w-full mx-auto mt-20">
+        <div className="max-w-[900px] w-full mx-auto mt-6">
             <div>
-                <div className="heading-text text-4xl leading-snug">
-                    <span className="font-semibold bg-gradient-to-r from-indigo-500 to-red-400 bg-clip-text text-transparent text-5xl">
-                        Hello, there
+                <div className="heading-text text-2xl leading-snug">
+                    <span className="font-semibold bg-gradient-to-r from-indigo-500 to-red-400 bg-clip-text text-transparent text-3xl">
+                        Olá!
                     </span>
                     <br />
-                    <span>How can I help you today?</span>
+                    <span>Como posso te ajudar hoje?</span>
                 </div>
-                <div className="mt-8 grid grid-cols-2 xl:grid-cols-4 gap-4">
+                <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                     {promptSuggestion.map((suggestion) => (
                         <div
                             key={suggestion.title}
-                            className="flex flex-col gap-4 justify-between rounded-xl bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-5 min-h-40 2xl:min-h-60 cursor-pointer"
+                            className="flex flex-col gap-3 justify-between rounded-xl bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 p-4 min-h-28 cursor-pointer"
                             role="button"
                             onClick={() => handleSend(suggestion.title)}
                         >

package/lib/@ecme/views/concepts/ai/Chat/components/ChatView.tsx

@@ -5,6 +5,7 @@ import ChatLandingView from './ChatLandingView'
 import ChatMobileNav from './ChatMobileNav'
 import ChatCustomContent from './ChatCustomContent'
 import ChatCustomAction from './ChatCustomAction'
+import AiThinkingIndicator from './AiThinkingIndicator'
 import { usGenerativeChatStore } from '../store/generativeChatStore'
 import useChatSend from '../hooks/useChatSend'
 import type { ScrollBarRef } from '@/components/ui/ScrollBar'
@@ -55,10 +56,12 @@ const ChatView = () => {
             <ChatBox
                 ref={scrollRef}
                 messageList={messageList}
-                placeholder="Enter a prompt here"
+                placeholder="Pergunte algo sobre o Orbe Agro…"
                 showMessageList={Boolean(selectedConversation)}
-                showAvatar={true}
-                avatarGap={true}
+                showAvatar={false}
+                avatarGap={false}
+                myBubbleClass="bg-primary text-white"
+                renderTyping={() => <AiThinkingIndicator />}
                 containerClass="h-[calc(100%-30px)] xl:h-full"
                 messageListClass="h-[calc(100%-100px)] xl:h-[calc(100%-70px)]"
                 typing={
@@ -98,7 +101,11 @@ const ChatView = () => {
                 }}
                 onInputChange={handleInputChange}
             >
-                {!selectedConversation && <ChatLandingView />}
+                {!selectedConversation && (
+                    <div className="flex-1 min-h-0 overflow-y-auto">
+                        <ChatLandingView />
+                    </div>
+                )}
             </ChatBox>
         </Card>
     )

package/lib/@ecme/views/concepts/ai/Chat/components/ModelSelect.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react'
+import { apiGetAiModels } from '@/services/AiService'
+import { useAiModelStore } from '../store/aiModelStore'
+import type { AiModel, GetAiModelsResponse } from '@/services/AiService'
+
+/**
+ * Seletor do modelo de IA do chat (GET /ai/models). Se o backend estiver
+ * indisponivel ou nao expuser modelos, o seletor nao aparece e o backend usa o
+ * modelo default — por isso ele pode ser montado sem medo em qualquer MFE.
+ */
+const ModelSelect = () => {
+    const [models, setModels] = useState<AiModel[]>([])
+    const selectedModel = useAiModelStore((state) => state.selectedModel)
+    const setSelectedModel = useAiModelStore((state) => state.setSelectedModel)
+
+    useEffect(() => {
+        let active = true
+        apiGetAiModels<GetAiModelsResponse>()
+            .then((resp) => {
+                if (!active) {
+                    return
+                }
+                setModels(resp.models)
+                const current = useAiModelStore.getState().selectedModel
+                const exists = resp.models.some((model) => model.id === current)
+                if (!current || !exists) {
+                    const fallback =
+                        resp.models.find((model) => model.default) ??
+                        resp.models[0]
+                    if (fallback) {
+                        useAiModelStore
+                            .getState()
+                            .setSelectedModel(fallback.id)
+                    }
+                }
+            })
+            .catch(() => {
+                // Sem lista de modelos: o backend responde com o default.
+            })
+        return () => {
+            active = false
+        }
+    }, [])
+
+    if (models.length === 0) {
+        return null
+    }
+
+    return (
+        <select
+            aria-label="Modelo de IA"
+            title="Modelo de IA"
+            className="max-w-[9rem] truncate rounded-lg border border-gray-300 bg-white px-2 py-1 text-xs dark:border-gray-600 dark:bg-gray-800"
+            value={selectedModel ?? ''}
+            onChange={(event) => setSelectedModel(event.target.value)}
+        >
+            {models.map((model) => (
+                <option key={model.id} value={model.id}>
+                    {model.label}
+                </option>
+            ))}
+        </select>
+    )
+}
+
+export default ModelSelect

package/lib/@ecme/views/concepts/ai/Chat/hooks/useChatSend.ts

@@ -1,10 +1,12 @@
 import { usGenerativeChatStore } from '../store/generativeChatStore'
 import { apiPostChat } from '@/services/AiService'
+import { useAuth } from '@/auth'
 import dayjs from 'dayjs'
 import uniqueId from 'lodash/uniqueId'
 import type { PostAiChatResponse } from '../types'
 
 const useChatSend = () => {
+    const { user } = useAuth()
     const {
         selectedConversation,
         setSelectedConversation,
@@ -17,9 +19,9 @@ const useChatSend = () => {
         pushConversation(id, {
             id: uniqueId('ai-conversation-'),
             sender: {
-                id: '1',
-                name: 'Angelina Gotelli',
-                avatarImageUrl: '/img/avatars/thumb-1.jpg',
+                id: user.userId ?? 'me',
+                name: user.userName ?? 'Você',
+                avatarImageUrl: user.avatar ?? undefined,
             },
             content: prompt,
             timestamp: dayjs().toDate(),

package/lib/@ecme/views/concepts/ai/Chat/store/aiModelStore.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type AiModelState = {
+    selectedModel: string | null
+    setSelectedModel: (model: string) => void
+}
+
+/**
+ * Modelo de IA escolhido pelo usuario para o chat do Orbe AI.
+ *
+ * Persistido em localStorage: como todos os MFEs vivem na mesma origem, a
+ * escolha acompanha o usuario entre os modulos e entre sessoes.
+ */
+export const useAiModelStore = create<AiModelState>()(
+    persist(
+        (set) => ({
+            selectedModel: null,
+            setSelectedModel: (model) => set({ selectedModel: model }),
+        }),
+        { name: 'orbe-ai-model' },
+    ),
+)

package/lib/base/components/forms/GenericForms/GenericArrayFormSection.tsx

@@ -27,7 +27,7 @@ type GeneralFormSectionProps<
     K extends ArrayPath<T>,
 > = IFormSectionBaseProps<T> & {
     nameArray: K
-    defaultAppendItem: FieldArray<T, K>
+    defaultAppendItem: any
     nameCampoStringArray: string[]
     nameCampoNumberArray: string[]
     nameCampoSelectArray?: string[]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbe-agro/client-core",
-  "version": "5.6.201",
+  "version": "5.6.202",
   "description": "Biblioteca principal de componentes e utilidades para os microfrontends do Orbe Agro.",
   "type": "module",
   "main": "./dist/index.js",