@wix/ditto-codegen-public 1.0.136 → 1.0.137

package/dist/examples-apps/ai-chatbot/src/dashboard/pages/product/ProductChat.tsx

@@ -1,23 +1,29 @@
-import React, { useCallback, useState, type FC } from "react";
-import { products } from "@wix/stores";
-import { httpClient } from "@wix/essentials";
+import { useCallback, useState, type FC } from "react";
+import { productsV3 } from "@wix/stores";
 import { Text, Box, Card, Input, Loader } from "@wix/design-system";
 import * as Icons from "@wix/wix-ui-icons-common";
-import type { ChatMessage } from '../../../types';
 import styles from "./ProductChat.module.css";
 
+export type ChatMessage = {
+  text: string;
+  author: "Business Buddy" | "User";
+};
+
 async function submitProductChatMessage(
   messages: ChatMessage[],
-  product: products.Product,
+  product: productsV3.V3Product,
 ) {
   try {
-  const response = await httpClient.fetchWithAuth(`${import.meta.env.BASE_API_URL}/chat`, {
-    method: "POST",
-    body: JSON.stringify({
-      messages,
-      product,
-    }),
-  });
+    const response = await fetch("/api/chat", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        messages,
+        product,
+      }),
+    });
     const message = await response.json();
 
     return message;
@@ -27,7 +33,7 @@ async function submitProductChatMessage(
   }
 }
 
-export const ProductChat: FC<{ product: products.Product }> = ({ product }) => {
+export const ProductChat: FC<{ product: productsV3.V3Product }> = ({ product }) => {
   const [isWaitingForReply, setIsWaitingForReply] = useState<boolean>(false);
   const [messageDraft, setMessageDraft] = useState<string>();
   const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
@@ -61,7 +67,7 @@ export const ProductChat: FC<{ product: products.Product }> = ({ product }) => {
     <Card>
       <Card.Header
         title={`Ask Business Buddy about "${product.name}"`}
-        subtitle={`SKU: ${product.sku}`}
+        subtitle={`Product ID: ${product._id}`}
       />
       <Card.Content>
         {chatMessages.map((message) => (
@@ -73,19 +79,19 @@ export const ProductChat: FC<{ product: products.Product }> = ({ product }) => {
         ))}
         <Box width="100%" marginTop="SP6">
           <Input
-            className={styles.userInput}
+            {...(styles.userInput && { className: styles.userInput })}
             onChange={(e) => setMessageDraft(e.target.value)}
             onEnterPressed={submitMessage}
             disabled={isWaitingForReply}
-            value={messageDraft}
+            value={messageDraft ?? ""}
             placeholder="Ask Business Buddy something..."
-            prefix={
-              isWaitingForReply && (
+            {...(isWaitingForReply && {
+              prefix: (
                 <Input.Affix>
                   <Loader size="tiny" />
                 </Input.Affix>
-              )
-            }
+              ),
+            })}
             suffix={
               <Input.IconAffix>
                 <Icons.Send onClick={submitMessage} />

package/dist/examples-apps/ai-chatbot/src/dashboard/pages/product/page.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState, type FC } from "react";
 import { useQuery } from "react-query";
-import { products } from "@wix/stores";
+import { productsV3 } from "@wix/stores";
 import {
   AutoComplete,
   Card,
@@ -14,16 +14,17 @@ import { withProviders } from "../../withProviders";
 import { ProductChat } from "./ProductChat";
 
 const ProductsPage: FC = () => {
-  const [currentProduct, setCurrentProduct] = useState<products.Product>();
+  const [currentProduct, setCurrentProduct] = useState<productsV3.V3Product>();
   const [searchQuery, setSearchQuery] = useState<string>("");
 
   const {
     data: storeProducts,
     isLoading,
     error,
-  } = useQuery(["products", searchQuery], () =>
-    products.queryProducts().startsWith("name", searchQuery).find(),
-  );
+  } = useQuery(["products", searchQuery], async () => {
+    const result = await productsV3.queryProducts().find();
+    return { items: result.items || [] };
+  });
 
   const options = useMemo(
     () =>
@@ -35,10 +36,10 @@ const ProductsPage: FC = () => {
   );
 
   const handleSelect = useCallback(
-    (event) => {
+    (event: { id: string | number }) => {
       setCurrentProduct(
         storeProducts!.items.find(
-          (product) => product._id === (event.id as string),
+          (product) => product._id === String(event.id),
         ),
       );
     },
@@ -46,7 +47,7 @@ const ProductsPage: FC = () => {
   );
 
   const handleChange = useCallback(
-    (event) => {
+    (event: React.ChangeEvent<HTMLInputElement>) => {
       setSearchQuery(event.target.value);
       setCurrentProduct(undefined);
     },
@@ -74,11 +75,11 @@ const ProductsPage: FC = () => {
               <Card.Content>
                 <AutoComplete
                   size="large"
-                  status={isLoading ? "loading" : undefined}
-                  options={options}
+                  {...(isLoading && { status: "loading"})}
+                  {...(options && { options })}
                   onSelect={handleSelect}
                   onChange={handleChange}
-                  value={currentProduct?.name ?? undefined}
+                  {...(currentProduct?.name && { value: currentProduct.name })}
                   placeholder="Select a product to chat about"
                 />
               </Card.Content>