@orbe-agro/client-core 5.6.201 → 5.6.203

package/lib/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import {
+    TbMessageChatbot,
+    TbArrowsMaximize,
+    TbArrowsMinimize,
+} from 'react-icons/tb'
+import { HiX } from 'react-icons/hi'
+import ChatView from '@/views/concepts/ai/Chat/components/ChatView'
+import ChatHistoryRenameDialog from '@/views/concepts/ai/Chat/components/ChatHistoryRenameDialog'
+import ModelSelect from '@/views/concepts/ai/Chat/components/ModelSelect'
+import useResizablePanel from './useResizablePanel'
+import ResizeHandles from './ResizeHandles'
+
+const iconButtonClass =
+    'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+
+const OrbeAiWidget = () => {
+    const [open, setOpen] = useState(false)
+    const [fullscreen, setFullscreen] = useState(false)
+    const { rect, startResize } = useResizablePanel()
+
+    const toggleOpen = () => setOpen((prev) => !prev)
+    const toggleFullscreen = () => setFullscreen((prev) => !prev)
+    const close = () => {
+        setOpen(false)
+        setFullscreen(false)
+    }
+
+    // Tela cheia: cobre o viewport inteiro (inset-0). Flutuante: usa o retângulo do resize.
+    const panelStyle = fullscreen
+        ? undefined
+        : {
+              top: rect.top,
+              left: rect.left,
+              width: rect.width,
+              height: rect.height,
+          }
+    const panelVariantClass = fullscreen
+        ? 'inset-0 rounded-none border-0'
+        : 'rounded-2xl border shadow-2xl'
+
+    return (
+        <div
+            className={`fixed bottom-6 right-6 flex flex-col items-end gap-3 print:hidden ${
+                fullscreen ? 'z-[9999]' : 'z-40'
+            }`}
+        >
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        key="orbe-ai-panel"
+                        initial={{ opacity: 0, y: 24, scale: 0.96 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 24, scale: 0.96 }}
+                        transition={{ duration: 0.2, ease: 'easeOut' }}
+                        style={panelStyle}
+                        className={`fixed flex flex-col overflow-hidden border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 ${panelVariantClass}`}
+                    >
+                        {!fullscreen && (
+                            <ResizeHandles onResizeStart={startResize} />
+                        )}
+
+                        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+                            <div className="flex items-center gap-2">
+                                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
+                                    <TbMessageChatbot size={20} />
+                                </span>
+                                <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    Orbe AI
+                                </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <ModelSelect />
+                                <button
+                                    type="button"
+                                    className={iconButtonClass}
+                                    onClick={toggleFullscreen}
+                                    aria-label={
+                                        fullscreen
+                                            ? 'Sair da tela cheia'
+                                            : 'Tela cheia'
+                                    }
+                                >
+                                    {fullscreen ? (
+                                        <TbArrowsMinimize size={18} />
+                                    ) : (
+                                        <TbArrowsMaximize size={18} />
+                                    )}
+                                </button>
+                                <button
+                                    type="button"
+                                    className={iconButtonClass}
+                                    onClick={close}
+                                    aria-label="Fechar chat Orbe AI"
+                                >
+                                    <HiX size={18} />
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="min-h-0 flex-1 p-2">
+                            <ChatView />
+                            <ChatHistoryRenameDialog />
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {!fullscreen && (
+                <button
+                    type="button"
+                    className="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-colors hover:bg-primary-deep focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                    onClick={toggleOpen}
+                    aria-label={open ? 'Fechar chat Orbe AI' : 'Abrir chat Orbe AI'}
+                    aria-expanded={open}
+                >
+                    {open ? <HiX size={24} /> : <TbMessageChatbot size={26} />}
+                </button>
+            )}
+        </div>
+    )
+}
+
+export default OrbeAiWidget

package/lib/@ecme/components/template/OrbeAiWidget/ResizeHandles.tsx

@@ -0,0 +1,47 @@
+import type { PointerEvent as ReactPointerEvent } from 'react'
+import type { ResizeDirection } from './useResizablePanel'
+
+type ResizeHandlesProps = {
+    onResizeStart: (
+        event: ReactPointerEvent,
+        direction: ResizeDirection,
+    ) => void
+}
+
+const EDGES: { direction: ResizeDirection; className: string }[] = [
+    { direction: 'top', className: 'left-0 right-0 top-0 h-1.5 cursor-ns-resize' },
+    { direction: 'bottom', className: 'bottom-0 left-0 right-0 h-1.5 cursor-ns-resize' },
+    { direction: 'left', className: 'bottom-0 left-0 top-0 w-1.5 cursor-ew-resize' },
+    { direction: 'right', className: 'bottom-0 right-0 top-0 w-1.5 cursor-ew-resize' },
+]
+
+const CORNERS: { direction: ResizeDirection; className: string }[] = [
+    { direction: 'top-left', className: 'left-0 top-0 cursor-nwse-resize' },
+    { direction: 'top-right', className: 'right-0 top-0 cursor-nesw-resize' },
+    { direction: 'bottom-left', className: 'bottom-0 left-0 cursor-nesw-resize' },
+    { direction: 'bottom-right', className: 'bottom-0 right-0 cursor-nwse-resize' },
+]
+
+/** Alças transparentes de redimensionamento nas 4 bordas + 4 cantos do painel. */
+const ResizeHandles = ({ onResizeStart }: ResizeHandlesProps) => (
+    <>
+        {EDGES.map(({ direction, className }) => (
+            <span
+                key={direction}
+                aria-hidden
+                onPointerDown={(event) => onResizeStart(event, direction)}
+                className={`absolute z-20 ${className}`}
+            />
+        ))}
+        {CORNERS.map(({ direction, className }) => (
+            <span
+                key={direction}
+                aria-hidden
+                onPointerDown={(event) => onResizeStart(event, direction)}
+                className={`absolute z-30 h-3 w-3 ${className}`}
+            />
+        ))}
+    </>
+)
+
+export default ResizeHandles

package/lib/@ecme/components/template/OrbeAiWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './OrbeAiWidget'

package/lib/@ecme/components/template/OrbeAiWidget/useResizablePanel.ts

@@ -0,0 +1,108 @@
+import { useCallback, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent } from 'react'
+
+export type Rect = { top: number; left: number; width: number; height: number }
+
+export type ResizeDirection =
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+
+const MIN = { width: 360, height: 420 }
+const DEFAULT = { width: 480, height: 720 }
+const MARGIN = 12 // distância mínima das bordas do viewport
+const ANCHOR = { right: 24, bottomOffset: 92 } // canto inferior-direito, acima do FAB
+
+const clamp = (value: number, min: number, max: number) =>
+    Math.min(Math.max(value, min), max)
+
+/** Retângulo inicial: ancorado no canto inferior-direito, logo acima do FAB. */
+const getDefaultRect = (): Rect => {
+    const width = Math.min(DEFAULT.width, window.innerWidth - MARGIN * 2)
+    const height = Math.min(DEFAULT.height, window.innerHeight - MARGIN * 2)
+    return {
+        width,
+        height,
+        left: Math.max(MARGIN, window.innerWidth - width - ANCHOR.right),
+        top: Math.max(MARGIN, window.innerHeight - height - ANCHOR.bottomOffset),
+    }
+}
+
+/**
+ * Painel redimensionável por qualquer borda/canto. O painel é posicionado
+ * livremente (`fixed` com top/left/width/height); cada direção move sua borda
+ * mantendo a borda oposta fixa, com limites de mínimo e do viewport.
+ */
+const useResizablePanel = () => {
+    const [rect, setRect] = useState<Rect>(getDefaultRect)
+
+    const startResize = useCallback(
+        (event: ReactPointerEvent, direction: ResizeDirection) => {
+            event.preventDefault()
+            event.stopPropagation()
+
+            const startX = event.clientX
+            const startY = event.clientY
+            const start = rect
+            const right = start.left + start.width
+            const bottom = start.top + start.height
+
+            const previousUserSelect = document.body.style.userSelect
+            document.body.style.userSelect = 'none'
+
+            const handleMove = (moveEvent: PointerEvent) => {
+                const dx = moveEvent.clientX - startX
+                const dy = moveEvent.clientY - startY
+                const next: Rect = { ...start }
+
+                if (direction.includes('right')) {
+                    next.width = clamp(
+                        start.width + dx,
+                        MIN.width,
+                        window.innerWidth - start.left - MARGIN,
+                    )
+                }
+                if (direction.includes('left')) {
+                    next.width = clamp(start.width - dx, MIN.width, right - MARGIN)
+                    next.left = right - next.width
+                }
+                if (direction.includes('bottom')) {
+                    next.height = clamp(
+                        start.height + dy,
+                        MIN.height,
+                        window.innerHeight - start.top - MARGIN,
+                    )
+                }
+                if (direction.includes('top')) {
+                    next.height = clamp(
+                        start.height - dy,
+                        MIN.height,
+                        bottom - MARGIN,
+                    )
+                    next.top = bottom - next.height
+                }
+
+                setRect(next)
+            }
+
+            const stopResize = () => {
+                document.body.style.userSelect = previousUserSelect
+                window.removeEventListener('pointermove', handleMove)
+                window.removeEventListener('pointerup', stopResize)
+            }
+
+            window.addEventListener('pointermove', handleMove)
+            window.addEventListener('pointerup', stopResize)
+        },
+        [rect],
+    )
+
+    return { rect, startResize }
+}
+
+export default useResizablePanel

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

@@ -32,6 +32,9 @@ const ChatBox = forwardRef<ScrollBarRef, ChatBoxProps>((props, ref) => {
         customRenderer,
         customAction,
         bubbleClass,
+        myBubbleClass,
+        botBubbleClass,
+        renderTyping,
         typing,
         messageListClass,
         containerClass,
@@ -59,6 +62,9 @@ const ChatBox = forwardRef<ScrollBarRef, ChatBoxProps>((props, ref) => {
                     typing={typing}
                     messageListClass={messageListClass}
                     bubbleClass={bubbleClass}
+                    myBubbleClass={myBubbleClass}
+                    botBubbleClass={botBubbleClass}
+                    renderTyping={renderTyping}
                 />            )}
             {children}
         </ChatContainer>

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)}
                         >