@instockng/storefront-ui 1.0.107 → 1.0.108

package/src/contexts/AssistantContext.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { AssistantDrawer } from '../components/AssistantDrawer';
+
+type AssistantContextType = {
+  /** Open the assistant drawer with a question. Pass productSlug if on a product page. */
+  ask: (question: string, productSlug?: string) => void;
+  /** Close the assistant drawer */
+  close: () => void;
+  /** Whether the drawer is currently open */
+  isOpen: boolean;
+};
+
+const AssistantContext = createContext<AssistantContextType | null>(null);
+
+export function useAssistant() {
+  const ctx = useContext(AssistantContext);
+  if (!ctx) throw new Error('useAssistant must be used within StorefrontProvider');
+  return ctx;
+}
+
+export interface AssistantProviderProps {
+  children: ReactNode;
+  apiUrl: string;
+  brandSlug: string;
+  assistantName?: string;
+}
+
+export function AssistantProvider({
+  children,
+  apiUrl,
+  brandSlug,
+  assistantName,
+}: AssistantProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [question, setQuestion] = useState('');
+  const [productSlug, setProductSlug] = useState<string | undefined>();
+
+  const ask = useCallback((q: string, slug?: string) => {
+    setQuestion(q);
+    setProductSlug(slug);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => setIsOpen(false), []);
+
+  return (
+    <AssistantContext.Provider value={{ ask, close, isOpen }}>
+      {children}
+      <AssistantDrawer
+        isOpen={isOpen}
+        onClose={close}
+        apiUrl={apiUrl}
+        brandSlug={brandSlug}
+        productSlug={productSlug}
+        initialQuestion={question}
+        assistantName={assistantName}
+      />
+    </AssistantContext.Provider>
+  );
+}

package/src/index.ts

@@ -11,6 +11,9 @@ export type { StorefrontProviderProps } from './providers/StorefrontProvider';
 // Export cart context (use this instead of prop drilling)
 export { CartProvider, useCart } from './contexts/CartContext';
 
+// Export AI assistant context
+export { useAssistant } from './contexts/AssistantContext';
+
 // Export Meta Pixel tracking
 export { useMetaPixel, MetaPixelProvider } from './providers/MetaPixelProvider';
 export type { MetaPixelProviderProps, PurchaseItem } from './providers/MetaPixelProvider';
@@ -71,8 +74,6 @@ export type { AssistantDrawerProps } from './components/AssistantDrawer';
 export { ProductAssistantChips } from './components/ProductAssistantChips';
 export type { ProductAssistantChipsProps } from './components/ProductAssistantChips';
 
-export { SearchAssistantTrigger } from './components/SearchAssistantTrigger';
-export type { SearchAssistantTriggerProps } from './components/SearchAssistantTrigger';
 
 // Export UI primitives (for customization)
 export { Button } from './components/ui/button';

package/src/providers/StorefrontProvider.tsx

@@ -28,6 +28,7 @@
 import { ReactNode } from 'react';
 import { ApiClientProvider, useGetBrand } from '@instockng/api-client';
 import { CartProvider, CartProviderProps } from '../contexts/CartContext';
+import { AssistantProvider } from '../contexts/AssistantContext';
 import { MetaPixelProvider } from './MetaPixelProvider';
 import { TikTokPixelProvider } from './TikTokPixelProvider';
 
@@ -41,6 +42,8 @@ export interface StorefrontProviderProps {
   initialCartId?: string;
   /** Optional: Props to pass to the ShoppingCart component */
   shoppingCartProps?: CartProviderProps['shoppingCartProps'];
+  /** Optional: AI assistant display name */
+  assistantName?: string;
 }
 
 /**
@@ -51,7 +54,9 @@ function StorefrontProviderInner({
   brandSlug,
   initialCartId,
   shoppingCartProps,
-}: Omit<StorefrontProviderProps, 'apiUrl'>) {
+  assistantName,
+  apiUrl,
+}: Omit<StorefrontProviderProps, 'apiUrl'> & { apiUrl: string }) {
   const { data: brand } = useGetBrand(brandSlug);
 
   return (
@@ -62,7 +67,13 @@ function StorefrontProviderInner({
           initialCartId={initialCartId}
           shoppingCartProps={shoppingCartProps}
         >
-          {children}
+          <AssistantProvider
+            apiUrl={apiUrl}
+            brandSlug={brandSlug}
+            assistantName={assistantName}
+          >
+            {children}
+          </AssistantProvider>
         </CartProvider>
       </TikTokPixelProvider>
     </MetaPixelProvider>
@@ -83,9 +94,11 @@ export function StorefrontProvider({
   apiUrl,
   initialCartId,
   shoppingCartProps,
+  assistantName,
 }: StorefrontProviderProps) {
   // Storefront-ui doesn't use authenticated endpoints, so provide a no-op getAuthToken
   const getAuthToken = async () => '';
+  const resolvedApiUrl = apiUrl || 'https://oms-api.instock.ng';
 
   return (
     <ApiClientProvider getAuthToken={getAuthToken} {...(apiUrl && { baseURL: apiUrl })}>
@@ -93,6 +106,8 @@ export function StorefrontProvider({
         brandSlug={brandSlug}
         initialCartId={initialCartId}
         shoppingCartProps={shoppingCartProps}
+        assistantName={assistantName}
+        apiUrl={resolvedApiUrl}
       >
         {children}
       </StorefrontProviderInner>

package/dist/components/SearchAssistantTrigger.d.ts

@@ -1,12 +0,0 @@
-export interface SearchAssistantTriggerProps {
-    /** The search query to pre-fill */
-    searchQuery?: string;
-    /** Callback to open the drawer with a question */
-    onAsk: (question: string) => void;
-    /** Custom class name */
-    className?: string;
-    /** Custom label */
-    label?: string;
-}
-export declare function SearchAssistantTrigger({ searchQuery, onAsk, className, label, }: SearchAssistantTriggerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SearchAssistantTrigger.d.ts.map

package/dist/components/SearchAssistantTrigger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchAssistantTrigger.d.ts","sourceRoot":"","sources":["../../src/components/SearchAssistantTrigger.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,2BAA2B;IAC1C,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAgB,EAChB,KAAK,EACL,SAAS,EACT,KAAgB,GACjB,EAAE,2BAA2B,2CAW7B"}

package/src/components/SearchAssistantTrigger.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SearchAssistantTrigger } from './SearchAssistantTrigger';
-
-const meta = {
-  title: 'Components/SearchAssistantTrigger',
-  component: SearchAssistantTrigger,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof SearchAssistantTrigger>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    searchQuery: 'toys for babies',
-    onAsk: (question) => console.log('Asked:', question),
-  },
-};
-
-export const CustomLabel: Story = {
-  args: {
-    searchQuery: 'maternity leggings',
-    onAsk: (question) => console.log('Asked:', question),
-    label: 'Ask AI about "maternity leggings"',
-  },
-};
-
-export const EmptyQuery: Story = {
-  args: {
-    onAsk: (question) => console.log('Asked:', question),
-  },
-};

package/src/components/SearchAssistantTrigger.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-/**
- * SearchAssistantTrigger Component
- *
- * "Ask AI" button shown in search results (e.g., when search returns no results).
- * Clicking opens the AssistantDrawer with the search query as the question.
- */
-
-import { Sparkles } from 'lucide-react';
-import { Button } from './ui/button';
-import { cn } from '../lib/utils';
-
-export interface SearchAssistantTriggerProps {
-  /** The search query to pre-fill */
-  searchQuery?: string;
-  /** Callback to open the drawer with a question */
-  onAsk: (question: string) => void;
-  /** Custom class name */
-  className?: string;
-  /** Custom label */
-  label?: string;
-}
-
-export function SearchAssistantTrigger({
-  searchQuery = '',
-  onAsk,
-  className,
-  label = 'Ask AI',
-}: SearchAssistantTriggerProps) {
-  return (
-    <Button
-      variant="outline"
-      onClick={() => onAsk(searchQuery)}
-      className={cn('gap-2', className)}
-    >
-      <Sparkles className="h-4 w-4 text-orange-500" />
-      {label}
-    </Button>
-  );
-}