@nyris/nyris-webapp 0.3.91 → 0.3.92

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.91",
+  "version": "0.3.92",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
-    "@nyris/nyris-api": "^0.3.91",
-    "@nyris/nyris-react-components": "^0.3.91",
+    "@google/genai": "^1.46.0",
+    "@nyris/nyris-api": "^0.3.92",
+    "@nyris/nyris-react-components": "^0.3.92",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/data/related-parts.json

@@ -0,0 +1,83 @@
+{
+  "GC Gruppe": [
+    {
+      "keywords": ["faucet", "mixer tap", "basin mixer", "Waschtischarmatur", "Armatur", "Mischer", "Einhandmischer", "Einhandmischbatterie", "Einhebelmischer", "Waschtischbatterie"],
+      "relatedParts": [
+        { "label": "Filter Cartridge", "description": "Replacement ceramic or carbon filter cartridge for water purification" },
+        { "label": "Sealing Tape", "description": "PTFE thread seal tape for leak-proof pipe connections" },
+        { "label": "Aerator", "description": "Flow regulator/strainer insert for the faucet spout" },
+        { "label": "Flexible Hose", "description": "Braided water supply connection hose" },
+        { "label": "Angle Valve", "description": "Shut-off valve for the water supply line beneath the basin" }
+      ]
+    },
+    {
+      "keywords": ["shower", "Brause", "Dusche", "Duschkopf", "Duscharmatur", "Brausekopf", "shower head", "shower enclosure"],
+      "relatedParts": [
+        { "label": "Shower Hose", "description": "Flexible connection hose between mixer and shower head" },
+        { "label": "Wall Bracket", "description": "Mounting bracket or slide bar for the shower head" },
+        { "label": "Sealing Set", "description": "Gaskets and O-rings for shower connections" },
+        { "label": "Shower Filter", "description": "Inline water filter for limescale and chlorine reduction" },
+        { "label": "Diverter Valve", "description": "Valve to switch water flow between tub spout and shower" }
+      ]
+    },
+    {
+      "keywords": ["radiator", "Heizkoerper", "Heizung", "Heizkörper", "Konvektor", "panel radiator"],
+      "relatedParts": [
+        { "label": "Thermostat Valve", "description": "Temperature control valve head for the radiator" },
+        { "label": "Bleed Valve", "description": "Air release valve for radiator maintenance" },
+        { "label": "Wall Bracket", "description": "Mounting bracket set for radiator installation" },
+        { "label": "Lockshield Valve", "description": "Return-side balancing valve for flow regulation" },
+        { "label": "Radiator Plug", "description": "Blanking plug and seal for unused radiator connections" }
+      ]
+    },
+    {
+      "keywords": ["toilet", "WC", "Toilette", "Klosett", "wall-hung WC", "stand-WC"],
+      "relatedParts": [
+        { "label": "Flush Valve", "description": "Internal flush mechanism and valve for the cistern" },
+        { "label": "Toilet Seat", "description": "Replacement seat and lid with hinges" },
+        { "label": "Flush Plate", "description": "Actuator plate for concealed cistern systems" },
+        { "label": "Concealed Cistern", "description": "In-wall cistern frame for wall-hung installations" },
+        { "label": "Connection Set", "description": "Waste pipe connector and seal kit for WC installation" }
+      ]
+    },
+    {
+      "keywords": ["pump", "Pumpe", "Umwälzpumpe", "circulation pump", "Heizungspumpe"],
+      "relatedParts": [
+        { "label": "Check Valve", "description": "Non-return valve to prevent backflow in the system" },
+        { "label": "Pump Flange Set", "description": "Connection flanges and gaskets for pump installation" },
+        { "label": "Insulation Shell", "description": "Thermal insulation jacket for the pump body" },
+        { "label": "Replacement Seal", "description": "Mechanical shaft seal for pump maintenance" },
+        { "label": "Speed Controller", "description": "Electronic controller for variable pump speed" }
+      ]
+    },
+    {
+      "keywords": ["boiler", "Kessel", "Heizkessel", "Brennwertkessel", "Gaskessel", "water heater", "Warmwasserspeicher", "Durchlauferhitzer"],
+      "relatedParts": [
+        { "label": "Expansion Vessel", "description": "Pressure compensation vessel for the heating circuit" },
+        { "label": "Safety Valve", "description": "Pressure relief valve for overpressure protection" },
+        { "label": "Flue Pipe", "description": "Exhaust gas duct for combustion venting" },
+        { "label": "Condensate Trap", "description": "Siphon for condensate drainage from condensing boilers" },
+        { "label": "Ignition Electrode", "description": "Replacement spark electrode for burner ignition" }
+      ]
+    },
+    {
+      "keywords": ["washbasin", "Waschbecken", "basin", "Waschtisch", "Handwaschbecken", "vanity"],
+      "relatedParts": [
+        { "label": "Pop-up Waste", "description": "Click-clack or pop-up drain plug for the basin" },
+        { "label": "Siphon", "description": "Bottle trap or P-trap for basin waste drainage" },
+        { "label": "Basin Mixer", "description": "Single-lever or two-handle mixer tap for the washbasin" },
+        { "label": "Mounting Kit", "description": "Fixing bolts and brackets for basin installation" },
+        { "label": "Overflow Cover", "description": "Decorative cover for the basin overflow hole" }
+      ]
+    },
+    {
+      "keywords": ["valve", "Ventil", "Absperrventil", "Regelventil", "ball valve", "Kugelventil", "gate valve"],
+      "relatedParts": [
+        { "label": "Replacement Seal", "description": "O-ring or flat gasket set for valve maintenance" },
+        { "label": "Handle Extension", "description": "Extended lever or wheel handle for hard-to-reach valves" },
+        { "label": "Insulation Jacket", "description": "Thermal insulation shell for exposed valve bodies" },
+        { "label": "Fitting Adapter", "description": "Thread adapter or compression fitting for pipe connection" }
+      ]
+    }
+  ]
+}

package/public/js/settings.example.js

@@ -46,6 +46,8 @@ var settings = {
   vizo: {
     groundingEnabled: false,
     fallbackToElasticSearch: false,
+    chat: true,
+    findRelatedParts: true,
   },
   // UI - theme
   theme: {
@@ -103,6 +105,7 @@ var settings = {
   experienceVisualSearchImages: [],
   simpleCardView: false,
   noSimilarSearch: false,
+  useSmartFilters: false,
   showFeedback: false,
   geoLocation: false,
   geoLocationMessage: '',

package/src/App.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

package/src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import AuthProvider from 'providers/AuthProvider';
 import AppRouter from 'routes/Router';
 

package/src/assets/arrow_down_expanded.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="6" viewBox="0 0 16 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.46905 5.70262C7.79378 5.90608 8.20622 5.90608 8.53095 5.70262L15.6455 1.2449C16.0406 0.997313 16.0406 0.42165 15.6455 0.174064C15.4403 0.045508 15.1797 0.0455079 14.9745 0.174064L8.53095 4.21139C8.20622 4.41486 7.79378 4.41486 7.46905 4.21139L1.02547 0.174064C0.820298 0.0455083 0.559701 0.0455079 0.354525 0.174064C-0.0406208 0.42165 -0.0406208 0.997313 0.354525 1.2449L7.46905 5.70262Z" fill="#2B2C46"/>
+</svg>

package/src/assets/arrow_enter.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- License: CC Attribution. Made by iconhub: https://iconhub.io/ -->
+<svg width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="up" class="icon glyph"><path d="M19.71,9.29l-7-7h0a1.15,1.15,0,0,0-.33-.21.94.94,0,0,0-.76,0,1.15,1.15,0,0,0-.33.21h0l-7,7a1,1,0,0,0,1.42,1.42L11,5.41V21a1,1,0,0,0,2,0V5.41l5.29,5.3a1,1,0,0,0,1.42,0A1,1,0,0,0,19.71,9.29Z" fill="currentColor"></path></svg>

package/src/assets/camera.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3571 16.0714H0.642857C0.287817 16.0714 0 15.7836 0 15.4286V4.50002C0 4.14498 0.287817 3.85716 0.642857 3.85716H4.79571L5.895 2.21787C6.01327 2.03827 6.21352 1.9297 6.42857 1.92859H11.5714C11.7865 1.9297 11.9867 2.03827 12.105 2.21787L13.2043 3.85716H17.3571C17.7122 3.85716 18 4.14498 18 4.50002V15.4286C18 15.7836 17.7122 16.0714 17.3571 16.0714ZM1.28597 14.7857H16.7145V5.14289H12.8574C12.6424 5.14177 12.4421 5.03321 12.3238 4.8536L11.2245 3.21431H6.77597L5.67668 4.8536C5.55841 5.03321 5.35816 5.14177 5.14311 5.14289H1.28597V14.7857ZM9.00013 13.5001C6.86989 13.5001 5.14299 11.7732 5.14299 9.64291C5.14299 7.51267 6.86989 5.78577 9.00013 5.78577C11.1304 5.78577 12.8573 7.51267 12.8573 9.64291C12.8573 11.7732 11.1304 13.5001 9.00013 13.5001ZM9.00042 7.07141C7.58026 7.07141 6.429 8.22268 6.429 9.64284C6.429 11.063 7.58026 12.2143 9.00042 12.2143C10.4206 12.2143 11.5719 11.063 11.5719 9.64284C11.5719 8.22268 10.4206 7.07141 9.00042 7.07141Z" fill="currentColor"/>
+</svg>

package/src/assets/close.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.475 3.575C13.7649 3.28505 13.7649 2.81495 13.475 2.525C13.1851 2.23505 12.715 2.23505 12.425 2.525L8.70711 6.24289C8.31658 6.63342 7.68342 6.63342 7.29289 6.24289L3.575 2.525C3.28505 2.23505 2.81495 2.23505 2.525 2.525C2.23505 2.81495 2.23505 3.28505 2.525 3.575L6.24289 7.29289C6.63342 7.68342 6.63342 8.31658 6.24289 8.70711L2.525 12.425C2.23505 12.7149 2.23505 13.1851 2.525 13.475C2.81495 13.7649 3.28505 13.7649 3.575 13.475L7.29289 9.75711C7.68342 9.36658 8.31658 9.36658 8.70711 9.75711L12.425 13.475C12.7149 13.7649 13.1851 13.7649 13.475 13.475C13.7649 13.1851 13.7649 12.715 13.475 12.425L9.75711 8.70711C9.36658 8.31658 9.36658 7.68342 9.75711 7.29289L13.475 3.575Z" fill="currentColor"/>
+</svg>

package/src/assets/enter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6571 2.43183C10.4497 2.63925 10.4497 2.97899 10.6571 3.18641L13.5539 6.08315C13.7827 6.31202 13.6218 6.70898 13.2964 6.70898H3.50827C3.50827 6.70898 2.42468 6.73759 1.72016 6.06884C1.28744 5.654 1.06571 5.04247 1.06214 4.24497V0.532856C1.06571 0.239607 0.826106 0 0.532857 0C0.239607 0 0 0.239607 0 0.532856V4.24139C0 5.34287 0.336164 6.21547 0.987036 6.83773C1.9097 7.71748 3.17211 7.7747 3.46893 7.7747C3.50827 7.7747 3.52973 7.7747 3.5333 7.7747H13.2964C13.6218 7.7747 13.7863 8.16808 13.5539 8.40054L10.5999 11.3545C10.3925 11.5619 10.3925 11.9017 10.5999 12.1091C10.8073 12.3165 11.1471 12.3165 11.3545 12.1091L15.8426 7.62092C16.0501 7.4135 16.0501 7.07376 15.8426 6.86634L11.4117 2.4354C11.2043 2.22798 10.8646 2.22798 10.6571 2.4354V2.43183Z" fill="#AAABB5"/>
+</svg>

package/src/assets/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8333 9.37931C12.8333 12.4264 10.2217 14.8966 7 14.8966C3.77834 14.8966 1.16667 12.4264 1.16667 9.37931C1.16667 6.33222 3.77834 3.86207 7 3.86207L10.6062 3.86207L8.51532 5.84022L9.33333 6.62069L12.8333 3.31034L9.33333 0L8.51532 0.780138L10.608 2.75862L7 2.75862C3.13401 2.75862 0 5.72281 0 9.37931C0 13.0358 3.13401 16 7 16C10.866 16 14 13.0358 14 9.37931H12.8333Z" fill="currentColor"/>
+</svg>

package/src/assets/vizo_avatar.svg

@@ -0,0 +1,16 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#55566B"/>
+<g clip-path="url(#clip0_8518_62118)">
+<path d="M20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36Z" fill="url(#paint0_radial_8518_62118)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 33.3024C12.6632 33.3024 6.69727 27.3365 6.69727 19.9998C6.69727 12.6632 12.6632 6.69727 19.9998 6.69727C27.3365 6.69727 33.3024 12.6676 33.3024 19.9998C33.3024 27.3321 27.3365 33.3024 19.9998 33.3024ZM19.9998 8.42379C13.6165 8.42379 8.42379 13.6165 8.42379 19.9998C8.42379 26.3832 13.6165 31.5759 19.9998 31.5759C26.3832 31.5759 31.5759 26.3832 31.5759 19.9998C31.5759 13.6165 26.3832 8.42379 19.9998 8.42379ZM19.5565 27.9213C19.3149 27.9126 19.0689 27.895 18.8273 27.8598C15.2776 27.4073 12.4615 24.6133 11.9783 21.0636C11.9431 20.8 11.9212 20.5364 11.9124 20.2728C11.9036 19.9916 11.6751 19.7676 11.3984 19.7676H10.88C10.7394 19.7676 10.6032 19.8247 10.5066 19.9257C10.4099 20.0268 10.3572 20.1586 10.3616 20.2992C10.5241 25.2766 14.5527 29.3052 19.5302 29.4677H19.5477C19.6795 29.4677 19.8069 29.415 19.9036 29.3228C20.0046 29.2261 20.0617 29.0899 20.0617 28.9493V28.431C20.0617 28.1498 19.8421 27.9257 19.5565 27.9126V27.9213ZM25.0209 12.2162C25.1615 12.1899 25.2977 12.2206 25.4119 12.3041V12.3085C27.8062 14.0438 29.234 16.7324 29.3306 19.6802C29.335 19.8208 29.2823 19.9526 29.1856 20.0537C29.0846 20.1547 28.9484 20.2118 28.8078 20.2118H28.2894C28.0127 20.2118 27.7842 19.9878 27.7754 19.7066C27.6876 17.2552 26.5014 15.0191 24.5157 13.5737C24.2872 13.4112 24.2301 13.0992 24.3883 12.8664L24.6782 12.4403C24.7573 12.3216 24.8803 12.2426 25.0209 12.2162ZM24.108 26.7081C25.7651 26.7081 27.1085 25.3647 27.1085 23.7076C27.1085 22.0504 25.7651 20.707 24.108 20.707C22.4508 20.707 21.1074 22.0504 21.1074 23.7076C21.1074 25.3647 22.4508 26.7081 24.108 26.7081ZM24.1079 19.2441C21.6433 19.2441 19.6444 21.2431 19.6444 23.7076C19.6444 24.3578 19.785 24.9729 20.0354 25.5308H20.0134C16.9602 25.5308 14.4824 23.053 14.4824 19.9998C14.4824 16.9465 16.9602 14.4688 20.0134 14.4688C22.891 14.4688 25.2501 16.6653 25.5181 19.4726C25.0744 19.3276 24.5999 19.2441 24.1079 19.2441Z" fill="white"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_8518_62118" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20 20) rotate(90) scale(16)">
+<stop offset="0.3125" stop-color="#655EE3"/>
+<stop offset="1" stop-color="#2B2C46"/>
+</radialGradient>
+<clipPath id="clip0_8518_62118">
+<rect width="32" height="32" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/Cadenas/CadenasWebViewer.tsx

@@ -119,7 +119,7 @@ function CadenasWebViewer({
             .then(() => {
               setStatus3dView('loaded');
             })
-            .catch((err: any) => {
+            .catch(() => {
               setStatus3dView('not-found');
             });
         });

package/src/components/Cart.tsx

@@ -117,41 +117,50 @@ const Cart = () => {
         content="The basket is currently empty"
         disabled={!!amountOfParts}
       >
-        <button
+        <div
           className={twMerge(
-            'relative flex items-center justify-center rounded-2xl border border-solid border-[#DDDEE7]',
-            'h-8 w-8',
+            'h-[56px] min-w-[56px]',
+            'desktop:min-w-[68px] desktop:h-[68px] bg-white rounded-2xl flex items-center justify-center ',
+            'border border-solid border-[#DDDEE7]',
+            'shadow-ds-1',
           )}
-          style={{
-            backgroundColor:
-              amountOfParts > 0
-                ? window.settings.theme.primaryColor
-                : '#FAFAFA',
-          }}
-          onClick={() => onToggleCart(true)}
         >
-          {amountOfParts ? (
-            <div
-              className={twMerge(
-                'absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white border-solid text-white',
-                'text-[9px]',
-              )}
-              style={{
-                backgroundColor: window.settings.theme.primaryColor,
-              }}
-            >
-              {amountOfParts}
-            </div>
-          ) : (
-            ''
-          )}
-          <Icon
-            name="cart"
+          <button
             className={twMerge(
-              amountOfParts > 0 ? 'fill-white text-white' : 'text-black',
+              'relative flex items-center justify-center rounded-2xl',
+              'h-10 w-10',
             )}
-          />
-        </button>
+            style={{
+              backgroundColor:
+                amountOfParts > 0
+                  ? window.settings.theme.primaryColor
+                  : '#FAFAFA',
+            }}
+            onClick={() => onToggleCart(true)}
+          >
+            {amountOfParts ? (
+              <div
+                className={twMerge(
+                  'absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border-2 border-white border-solid text-white',
+                  'text-[9px]',
+                )}
+                style={{
+                  backgroundColor: window.settings.theme.primaryColor,
+                }}
+              >
+                {amountOfParts}
+              </div>
+            ) : (
+              ''
+            )}
+            <Icon
+              name="cart"
+              className={twMerge(
+                amountOfParts > 0 ? 'fill-white text-white' : 'text-[#BBBDCF]',
+              )}
+            />
+          </button>
+        </div>
       </Tooltip>
       {isCartOpen &&
         createPortal(
@@ -163,9 +172,10 @@ const Cart = () => {
             <div
               className={twMerge(
                 'absolute right-0 flex h-full w-[410px] max-w-full flex-col bg-transparent',
+                'p-4',
               )}
             >
-              <div className="flex h-full  max-w-full flex-col bg-white">
+              <div className="flex h-full  max-w-full flex-col bg-white rounded-2xl">
                 <div className="flex h-[52px] items-center justify-between px-4 py-2 border-b border-solid border-[#DDDEE7]">
                   <div className="text-xl font-semibold">
                     Your cart ({amountOfParts} items)
@@ -224,11 +234,13 @@ const Cart = () => {
                           className="mr-2 h-[50px] w-[50px] bg-white object-contain"
                         />
                         <div>
-                          <div className="max-w-[175px] break-words text-[9px] font-normal">
-                            {part.sku}
-                          </div>
-                          <div className="max-w-[175px] break-words text-xs font-semibold">
-                            {part.title}
+                          <div>
+                            <div className="max-w-[175px] break-words text-[9px] font-normal">
+                              {part.sku}
+                            </div>
+                            <div className="max-w-[175px] break-words text-xs font-semibold">
+                              {part.title}
+                            </div>
                           </div>
                         </div>
                       </div>

package/src/components/ChatAssistant/ChatAssistant.tsx

@@ -0,0 +1,289 @@
+import { memo, useRef, useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Sparkles, Send, Loader2, Globe } from 'lucide-react';
+
+import useConversationStore from 'stores/chat/conversationStore';
+import { Icon } from '@nyris/nyris-react-components';
+import useUiStore from 'stores/ui/uiStore';
+import OptionChip, { ChatOption } from './OptionChip';
+import { useChatAssistantLogic } from './useChatAssistantLogic';
+
+function ChatAssistant() {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const {
+    inputValue,
+    setInputValue,
+    messages,
+    isLoading,
+    isEvaluated,
+    hasApiKey,
+    p7Running,
+    p7Done,
+    catalogSearching,
+    messagesEndRef,
+    imageInputRef,
+    handleSendMessage,
+    handleOptionClick,
+    handleImageUpload,
+  } = useChatAssistantLogic();
+
+  const setIsOpen = useConversationStore(s => s.setIsOpen);
+
+  const toggleAiMode = useUiStore(state => state.toggleAiMode);
+
+  // Focus input on text_search_prompt option click
+  const wrappedHandleOptionClick = useCallback(
+    async (option: ChatOption) => {
+      if (option.action_type === 'text_search_prompt') {
+        inputRef.current?.focus();
+      }
+      if (option.action_type === 'related_part') {
+        inputRef.current?.focus();
+      }
+      await handleOptionClick(option);
+    },
+    [handleOptionClick],
+  );
+
+  return (
+    <div
+      className={twMerge([
+        'w-full h-full rounded-[24px] relative shadow-outer overflow-hidden',
+        'flex flex-col',
+
+        'border border-solid border-[#DDDEE7]',
+        'bg-[radial-gradient(ellipse_at_70%_7%,_#F3F4F8_50%,_#E4E3FF_100%)]',
+      ])}
+    >
+      <div
+        className="absolute top-3 right-4 bg-[#FAFAFA] w-7 h-7 flex justify-center items-center rounded-lg cursor-pointer"
+        onClick={() => {
+          toggleAiMode();
+          setIsOpen(false);
+        }}
+      >
+        <Icon name="close" className="fill-[#BBBDCF] text-[#BBBDCF]" />
+      </div>
+
+      {/* {error && (
+        <div className="flex-shrink-0 mx-3 mt-2 p-2.5 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
+          <AlertCircle size={12} className="text-red-500 flex-shrink-0" />
+          <p className="text-[11px] text-red-700">{error}</p>
+        </div>
+      )} */}
+
+      {/* ── Messages ── */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-5 py-3 space-y-3">
+        {messages.length === 0 && !isLoading ? (
+          <div className="flex flex-col items-center justify-center flex-grow text-center px-4 py-10">
+            <div className="w-12 h-12 rounded-full bg-[#F0EFFF] flex items-center justify-center mb-3">
+              <Sparkles size={20} className="text-[#3E36DC]" />
+            </div>
+            <p className="text-sm font-semibold text-[#2B2C46] mb-1">
+              Vizo Search Assistant
+            </p>
+            <p className="text-[11px] text-[#999] leading-relaxed max-w-[200px]">
+              Upload an image to get started, or search for a product
+            </p>
+          </div>
+        ) : (
+          messages.map((msg, i) => {
+            return (
+              <div
+                key={msg.id || i}
+                className={twMerge(
+                  'flex',
+                  msg.role === 'user' ? 'justify-end' : 'justify-start',
+                )}
+              >
+                <div className="">
+                  {/* Bubble */}
+                  <div
+                    className={twMerge(
+                      'py-3 pr-4 text-sm leading-relaxed',
+                      msg.role === 'user'
+                        ? 'bg-[#E7E8F1] text-[#3B3E5F] rounded-tl-[16px] rounded-tr-[8px] rounded-br-[16px] rounded-bl-[16px] px-4 py-3 font-medium'
+                        : msg?.content?.startsWith('[P7')
+                          ? 'bg-[#EEF2FF] border border-[#C7D2FE] text-[#2B2C46] rounded-2xl rounded-bl-sm'
+                          : ' text-[#2B2C46] rounded-2xl rounded-bl-sm',
+                      i === 0 && 'pr-6',
+                    )}
+                  >
+                    {msg.imageUrl && (
+                      <img
+                        src={msg.imageUrl}
+                        alt="Uploaded"
+                        className="w-[48px] h-[48px] rounded-lg object-cover mb-2"
+                      />
+                    )}
+                    {msg?.content?.startsWith('[P7') && (
+                      <div className="flex items-center gap-1 mb-1.5 text-indigo-600 font-semibold text-[10px]">
+                        <Globe size={10} /> Google Grounding
+                      </div>
+                    )}
+                    <pre className="whitespace-pre-wrap font-sans text-sm leading-4 tracking-[0.16px]">
+                      {msg?.content?.startsWith('[P7')
+                        ? msg.content.replace(/^\[P7[^\]]*\]\s*/, '')
+                        : msg.content}
+                    </pre>
+                  </div>
+
+                  {/* Quick reply options */}
+                  {msg.role === 'assistant' &&
+                    msg.options &&
+                    msg.options.length > 0 && (
+                      <div className="mt-2 space-y-2.5">
+                        {/* Option chips */}
+                        <div className="flex flex-wrap gap-1.5">
+                          {msg.options
+                            .filter(o => o.action_type !== 'text_search_prompt')
+                            .map((option, optIdx) => (
+                              <OptionChip
+                                key={optIdx}
+                                option={option}
+                                onClick={wrappedHandleOptionClick}
+                                disabled={
+                                  isLoading || i !== messages.length - 1
+                                }
+                              />
+                            ))}
+                        </div>
+                      </div>
+                    )}
+                </div>
+              </div>
+            );
+          })
+        )}
+
+        {/* Loading indicator */}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="flex items-center gap-2 px-3 py-2.5 bg-[#F3F3F5] rounded-2xl rounded-bl-sm">
+              <Loader2 size={12} className="animate-spin text-[#3E36DC]" />
+              <span className="text-xs text-[#666]">
+                {!isEvaluated
+                  ? 'Analyzing results...'
+                  : catalogSearching
+                    ? 'Refining your search…'
+                    : 'Thinking...'}
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* ── P7 Grounding status strip ── */}
+      {(p7Running || p7Done) && (
+        <div className="flex-shrink-0 px-3 py-1.5 border-t border-[#E0E0E0] bg-[#F8F8FF]">
+          {p7Running ? (
+            <span className="flex items-center gap-1.5 text-[10px] text-blue-600">
+              <Globe size={10} className="animate-pulse" /> Running Google
+              Grounding...
+            </span>
+          ) : (
+            <span className="flex items-center gap-1.5 text-[10px] text-blue-500">
+              <Globe size={10} /> Google Grounding complete
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* ── Upload image — fixed above input ── */}
+      {isEvaluated && hasApiKey && (
+        <div className="px-2">
+          <button
+            onClick={() => imageInputRef.current?.click()}
+            disabled={isLoading}
+            className={twMerge(
+              'w-full h-12 rounded-[32px] bg-[#3B3E5F] mb-2',
+              'flex items-center justify-center gap-2 text-white cursor-pointer',
+              'hover:bg-[#333653] transition-colors',
+              isLoading && 'opacity-50 cursor-not-allowed',
+            )}
+          >
+            <span>Upload image</span>
+            <Icon name="camera_ai" />
+          </button>
+        </div>
+      )}
+
+      {/* ── Input ── */}
+      {/* <div className="flex-shrink-0 px-3 py-3 border-t border-[#E0E0E0] bg-white rounded-3xl mt-2">
+      </div> */}
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          handleSendMessage();
+        }}
+        className="flex gap-2 items-end px-2"
+      >
+        <textarea
+          ref={inputRef}
+          value={inputValue}
+          onChange={e => setInputValue(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !e.shiftKey && !isLoading) {
+              e.preventDefault();
+              handleSendMessage();
+            }
+          }}
+          placeholder={
+            isLoading ? 'Please wait...' : 'Ask about the results...'
+          }
+          disabled={isLoading}
+          rows={1}
+          className={twMerge(
+            'flex-1 resize-none rounded-xl px-3 py-2.5 text-sm pr-14',
+            'border-2 border-[#3E36DC] outline-none',
+            'bg-[#F3F4F8] disabled:opacity-60',
+            'min-h-[56px] max-h-[100px]',
+            'rounded-[32px]',
+            'overflow-y-auto scrollbar-hide',
+          )}
+          style={{
+            fontFamily: 'inherit',
+            lineHeight: '1.4',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+          }}
+          /* Hide scrollbar for Webkit browsers */
+          /* Add this style in a global CSS if not already present: .scrollbar-hide::-webkit-scrollbar { display: none; } */
+        />
+
+        <button
+          type="submit"
+          disabled={isLoading || !inputValue.trim() || !hasApiKey}
+          className={twMerge(
+            'p-2.5 rounded-[32px] transition-colors flex-shrink-0 w-10 h-10 flex items-center justify-center',
+            inputValue.trim() && !isLoading && hasApiKey
+              ? 'bg-[#FAFAFA] text-black hover:bg-blue-100/40'
+              : 'bg-[#E0E0E0] text-[#999] cursor-not-allowed',
+            'absolute right-4 bottom-2',
+          )}
+        >
+          <Send size={16} />
+        </button>
+        {/* Hidden file input — triggered by Upload image button above */}
+        <input
+          ref={imageInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={e => {
+            const file = e.target.files?.[0];
+            if (file) {
+              handleImageUpload(file);
+              e.target.value = '';
+            }
+          }}
+        />
+      </form>
+    </div>
+  );
+}
+
+export default memo(ChatAssistant);