+
+ );
+};
diff --git a/apps/medusa/src/admin/components/atoms/review-stars.tsx b/apps/medusa/src/admin/components/atoms/review-stars.tsx
new file mode 100644
index 000000000..e1070271e
--- /dev/null
+++ b/apps/medusa/src/admin/components/atoms/review-stars.tsx
@@ -0,0 +1,21 @@
+export const ReviewStars = ({ rating }: { rating: number }) => {
+ return (
+
+ {title}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+ {actions.length > 0 && (
+
+ {actions.map((action, index) => (
+
+ {action.type === 'button' && (
+
+ )}
+ {action.type === 'action-menu' &&
+ ))}
+
+ )}
+
+ {[...Array(5)].map((_, index) => (
+
+ ))}
+
+ );
+};
diff --git a/apps/medusa/src/admin/components/atoms/section-row.tsx b/apps/medusa/src/admin/components/atoms/section-row.tsx
new file mode 100644
index 000000000..6910c26d4
--- /dev/null
+++ b/apps/medusa/src/admin/components/atoms/section-row.tsx
@@ -0,0 +1,33 @@
+import { Text, clx } from '@medusajs/ui';
+
+export type SectionRowProps = {
+ title: string;
+ value?: React.ReactNode | string | null;
+ actions?: React.ReactNode;
+};
+
+export const SectionRow = ({ title, value, actions }: SectionRowProps) => {
+ const isValueString = typeof value === 'string' || !value;
+
+ return (
+
+
+ {title}
+
+
+ {isValueString ? (
+
+ {value ?? '-'}
+
+ ) : (
+
+ );
+};
diff --git a/apps/medusa/src/admin/components/hooks/product-review.ts b/apps/medusa/src/admin/components/hooks/product-review.ts
new file mode 100644
index 000000000..bfecc77ec
--- /dev/null
+++ b/apps/medusa/src/admin/components/hooks/product-review.ts
@@ -0,0 +1,44 @@
+import {
+ AdminCreateProductReviewResponseDTO,
+ AdminListProductReviewsQuery,
+ AdminListProductReviewsResponse,
+ AdminUpdateProductReviewResponseDTO,
+} from '@markethaus/types';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { sdk } from '../../sdk';
+
+const QUERY_KEY = ['product-reviews'];
+
+export const useAdminListProductReviews = (query: AdminListProductReviewsQuery) => {
+ return useQuery{value}
+ )}
+
+ {actions && {actions}
}
+
+ {product.thumbnail ? (
+ 
+ ) : (
+
+ )}
+
+ );
+ },
+ }),
+ columnHelper.accessor('order', {
+ id: 'order',
+ header: 'Order',
+ enableSorting: false,
+ cell: ({ row }) => {
+ return (
+
+
+ #{row.original.order.display_id}
+
+
+ );
+ },
+ }),
+ columnHelper.accessor('created_at', {
+ id: 'created_at',
+ header: 'Created At',
+ enableSorting: false,
+ cell: ({ row }) => {
+ return (
+
+
+
+ {product.title}
+
+
+
+
+ {DateTime.fromISO(row.original.created_at).toFormat('LLL dd yyyy hh:mm a')}
+
+ );
+ },
+ }),
+ columnHelper.accessor('name', {
+ id: 'name',
+ header: 'Customer',
+ enableSorting: false,
+ cell: ({ row }) => {
+ return (
+
+ {row.original.name}
+
+ );
+ },
+ }),
+ columnHelper.accessor('content', {
+ id: 'content',
+ header: 'Review',
+ enableSorting: false,
+ cell: ({ row }) => {
+ const rating = row.original.rating;
+ const content = row.original.content;
+ return (
+
+
+ );
+ },
+ }),
+ columnHelper.accessor('images', {
+ id: 'images',
+ header: 'Images',
+ enableSorting: false,
+ cell: ({ row }) => {
+ return {content}
+{row.original.images.length}
;
+ },
+ }),
+ columnHelper.accessor('response', {
+ id: 'response',
+ header: 'Response',
+ enableSorting: false,
+ cell: ({ row }) => {
+ const content = row.original.response?.content;
+ if (!content) {
+ return (
+
+ No response
+
+ );
+ }
+ return (
+
+
+ );
+ },
+ }),
+ columnHelper.action({
+ // @ts-ignore
+ id: 'actions',
+ actions: ({ row }) => [
+ {
+ icon: {content}
+
+ {review.product.thumbnail ? (
+ 
+ ) : (
+
+ )}
+
+ {review.product.title}
+
+
+ );
+
+ const OrderValue = () => (
+
+
+ {review.name}
+
+ );
+
+ const ReviewContent = () => (
+
+ {review.content}
+
+ );
+
+ const ImagesValue = () => (
+
+ {review.images.map((image, index) => (
+ 
+ ))}
+
+ );
+
+ const ResponseValue = () => (
+
+ {review.response?.content}
+
+ );
+
+ return (
+
+
+ );
+};
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/ChatPortal/chat-portal.tsx b/apps/medusa/src/admin/routes/ai-chat/components/ChatPortal/chat-portal.tsx
new file mode 100644
index 000000000..1ad67e63f
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/ChatPortal/chat-portal.tsx
@@ -0,0 +1,109 @@
+import { FocusModal, TooltipProvider, Drawer } from '@medusajs/ui';
+import * as Portal from '@radix-ui/react-portal';
+import { useKeyboardShortcut } from '../../../../hooks/use-keyboard-shortcut';
+import { useChatState } from '../../../../hooks/use-chat-state';
+import { useLocation } from 'react-router-dom';
+import { ChatContent } from './chat-content';
+import { TriggerButton } from './trigger-button';
+import { isMacKeyboard } from '../../../../utils/is-mac-keyboard';
+import { useChatSession } from '../../../../hooks/use-chat-session';
+
+export const ChatPortal = () => {
+ // Create a QueryClient instance for the devtools
+ const {
+ status,
+ setStatus,
+ lastOpenStatus,
+ drawerDirection,
+ handleChatToggle,
+ handleViewToggle,
+ handleDirectionToggle,
+ } = useChatState();
+ const { pathname } = useLocation();
+ const isMac = isMacKeyboard();
+ const { startNewChat } = useChatSession();
+
+ useKeyboardShortcut({
+ keys: [isMac ? 'cmd' : 'ctrl', '.'],
+ callback: handleChatToggle,
+ });
+
+ useKeyboardShortcut({
+ keys: [isMac ? 'cmd' : 'ctrl', 'shift', '.'],
+ callback: handleViewToggle,
+ });
+
+ useKeyboardShortcut({
+ keys: [isMac ? 'cmd' : 'ctrl', 'shift', 'm'],
+ callback: handleDirectionToggle,
+ });
+
+ const shouldHideButton = pathname.includes('ai-chat');
+ if (shouldHideButton) return null;
+
+ const tooltipContent = `${isMac ? '⌘' : 'Ctrl'} + .`;
+
+ const ChatContentComponent = () => (
+
+
+
+
+
+
+
+
+ {status === 'drawer' && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {wrappedButton}
+
+
+
+
+
+
+
+
+
+
+
+ {result.toolInvocation.args && (
+
+
+
+ {hasProducts && result.toolInvocation.state === 'result' && (
+
+ );
+};
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/ToolResults/use-tool-handlers.ts b/apps/medusa/src/admin/routes/ai-chat/components/ToolResults/use-tool-handlers.ts
new file mode 100644
index 000000000..9d8b26c93
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/ToolResults/use-tool-handlers.ts
@@ -0,0 +1,152 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { Message, ToolPart } from '../../types';
+import { toolHandlerRegistry, ToolHandler, ToolHandlerContext } from './tool-handler-registry';
+import {
+ invalidateProductQueriesHandler,
+ invalidateInventoryQueriesHandler,
+ logToolInvocationHandler,
+} from './default-handlers';
+import {
+ registerProductUpdateHandler,
+ registerProductCreateHandler,
+ registerInventoryHandler,
+} from './tool-handler-registry';
+import { productToastNotificationHandler, errorNotificationHandler } from './custom-handlers';
+
+// Initialize default handlers
+let defaultHandlersRegistered = false;
+function registerDefaultHandlers() {
+ if (defaultHandlersRegistered) return;
+
+ // Register product handlers
+ registerProductUpdateHandler(invalidateProductQueriesHandler);
+ registerProductCreateHandler(invalidateProductQueriesHandler);
+ registerProductUpdateHandler(productToastNotificationHandler);
+ registerProductCreateHandler(productToastNotificationHandler);
+
+ // Register error notification handler for all tools
+ toolHandlerRegistry.registerWildcardHandler(errorNotificationHandler);
+
+ // Register inventory handlers
+ registerInventoryHandler(invalidateInventoryQueriesHandler);
+
+ // Register logging for all tools (wildcard)
+ toolHandlerRegistry.registerWildcardHandler(logToolInvocationHandler);
+
+ defaultHandlersRegistered = true;
+}
+
+/**
+ * Generate a unique key for a tool result to track if it's been processed
+ */
+function getToolResultKey(result: ToolPart): string {
+ const { toolInvocation } = result;
+ const { toolName, state } = toolInvocation;
+
+ // For result state, include a hash of the result to differentiate between similar calls
+ if (state === 'result') {
+ // Simple hash just to differentiate results
+ const resultString = JSON.stringify(toolInvocation.result || {});
+ const resultHash = resultString.split('').reduce((acc, char) => {
+ return ((acc << 5) - acc + char.charCodeAt(0)) | 0;
+ }, 0);
+
+ return `${toolName}-${state}-${resultHash}`;
+ }
+
+ // For other states, the tool name and state are enough
+ return `${toolName}-${state}`;
+}
+
+/**
+ * Custom hook to handle tool results as they stream in
+ */
+export function useToolResultHandlers(
+ options: {
+ registerDefaultHandlers?: boolean;
+ customHandlers?: Array<{ toolName: string | string[]; handler: ToolHandler }>;
+ } = {},
+) {
+ const { registerDefaultHandlers: shouldRegisterDefaults = true, customHandlers = [] } = options;
+ const queryClient = useQueryClient();
+
+ // Track processed tool results to prevent duplicate processing
+ const processedResults = useRef🛠️ {result.toolInvocation.toolName}
+
+
+
+
+ )}
+ {result.toolInvocation.state === 'result' && (
+
+
+
+
+ )}
+
+
+ )}
+
+ {showHeader &&
+
+
+ );
+};
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/chat-input.tsx b/apps/medusa/src/admin/routes/ai-chat/components/chat-input.tsx
new file mode 100644
index 000000000..aca338a83
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/chat-input.tsx
@@ -0,0 +1,41 @@
+import { FormEvent } from 'react';
+import { Button } from '@medusajs/ui';
+import { Input } from '@medusajs/ui';
+import { ArrrowRight } from '@medusajs/icons';
+
+interface ChatInputProps {
+ onSubmit: (e: FormEventAI Chat
+ +
+
+ );
+});
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/chat-scroll-area.tsx b/apps/medusa/src/admin/routes/ai-chat/components/chat-scroll-area.tsx
new file mode 100644
index 000000000..9132085b1
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/chat-scroll-area.tsx
@@ -0,0 +1,76 @@
+import { useRef, memo } from 'react';
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import { Message } from '../types';
+import { MessageBubble } from './message-bubble';
+import { ScrollToBottomButton } from './scroll-to-bottom-button';
+import { ChatStatus } from './ai-chat';
+import { useChatScroll } from '../../../hooks/use-chat-scroll';
+
+interface ChatScrollAreaProps {
+ messages: Message[];
+ streamingMessage: Message | null;
+ chatId?: string;
+ status?: ChatStatus;
+}
+
+// Memoize individual static messages
+const StaticMessage = memo(({ message }: { message: Message }) =>
+ {/* Static messages with memo to prevent re-renders */}
+ {messages.map((message) => (
+
+
+ scrollToBottom()} />
+
+
+ {children}
+
+ ),
+ img: (props: ComponentPropsWithoutRef<'img'>) =>
+
+ );
+ },
+ (prevProps, nextProps) => {
+ // Custom comparison function for memo
+ // Only re-render if these props have changed
+ return (
+ prevProps.message.id === nextProps.message.id &&
+ prevProps.message.content === nextProps.message.content &&
+ prevProps.isStreamingMessage === nextProps.isStreamingMessage &&
+ prevProps.status === nextProps.status
+ );
+ },
+);
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/product-card.tsx b/apps/medusa/src/admin/routes/ai-chat/components/product-card.tsx
new file mode 100644
index 000000000..feee3bb91
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/product-card.tsx
@@ -0,0 +1,95 @@
+import { Text, Heading, Badge } from '@medusajs/ui';
+import { ProductDTO, ProductVariantDTO, CalculatedPriceSet } from '@medusajs/types';
+import { Link } from 'react-router-dom';
+
+interface ProductVariantWithComputedPrice extends ProductVariantDTO {
+ calculated_price?: CalculatedPriceSet;
+}
+
+interface ProductCardProps {
+ product: ProductDTO & {
+ variants: ProductVariantWithComputedPrice[];
+ };
+}
+
+const formatPrice = (amount: number | null | undefined, currencyCode: string | null | undefined): string => {
+ if (!amount || !currencyCode) return 'N/A';
+
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: currencyCode,
+ }).format(amount);
+};
+
+const getPriceRange = (variants: ProductVariantWithComputedPrice[]): string => {
+ if (!variants?.length) return '';
+ if (!variants.some((v) => v.calculated_price)) return '';
+
+ const prices = variants
+ .map((v) => ({
+ amount: v.calculated_price?.calculated_amount,
+ currency: v.calculated_price?.currency_code,
+ }))
+ .filter((p) => p.amount !== null && p.currency !== null);
+
+ if (!prices.length) return '';
+
+ const minPrice = Math.min(...prices.map((p) => p.amount as number));
+ const maxPrice = Math.max(...prices.map((p) => p.amount as number));
+ const currency = prices[0].currency;
+
+ if (minPrice === maxPrice) {
+ return formatPrice(minPrice, currency);
+ }
+
+ return `${formatPrice(minPrice, currency)} - ${formatPrice(maxPrice, currency)}`;
+};
+
+export const ProductCard = ({ product }: ProductCardProps) => {
+ return (
+
+
+ {!isUser && message.parts && partsIncludeToolsOrReasoning(message.parts) && (
+
+ {message.content}
+
+
+ {(status === 'streaming' || status === 'submitted') && isStreamingMessage && !isUser && (
+
+
+ {message.parts.map((part, index) => {
+ if (part.type === 'tool-invocation') {
+ return
+ )}
+
+
+
+
+ );
+};
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/product-list.tsx b/apps/medusa/src/admin/routes/ai-chat/components/product-list.tsx
new file mode 100644
index 000000000..3c6e75278
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/product-list.tsx
@@ -0,0 +1,35 @@
+import { Container, Text } from '@medusajs/ui';
+import { ProductDTO } from '@medusajs/types';
+import { ProductCard } from './product-card';
+
+interface ProductListProps {
+ products: ProductDTO[];
+ count?: number;
+}
+
+export const ProductList = ({ products, count }: ProductListProps) => {
+ return (
+
+
+
+ {product.thumbnail && (
+
+ {product.status}
+
+
+
+
+
+ )}
+
+ {getPriceRange(product.variants)}
+ {product.description}
+ {product.variants && product.variants.length > 0 && (
+
+
+
+ {product.title}
+
+ {product.collection && (
+
+ {product.collection.title}
+
+ )}
+
+
+
+ Variants: {product.variants.map((v: ProductVariantDTO) => v.title).join(', ')}
+
+
+ )}
+
+
+ );
+};
diff --git a/apps/medusa/src/admin/routes/ai-chat/components/reasoning-display.tsx b/apps/medusa/src/admin/routes/ai-chat/components/reasoning-display.tsx
new file mode 100644
index 000000000..5e3db33b1
--- /dev/null
+++ b/apps/medusa/src/admin/routes/ai-chat/components/reasoning-display.tsx
@@ -0,0 +1,22 @@
+import { Button, Text, Drawer } from '@medusajs/ui';
+import type { ReasoningPart } from '../types';
+
+export const ReasoningDisplay = ({ part }: { part: ReasoningPart }) => {
+ return (
+
+ {count !== undefined && (
+
+ Found {count} product{count !== 1 ? 's' : ''}
+
+ )}
+
+
+
+
+
+ {products.map((product) => (
+
+
+
+ ))}
+