import pngs

apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchModalBase.tsx

@@ -25,6 +25,7 @@ export const GlobalSearchModalBase = ({
       onChangeValue={onChangeValue}
       onSelect={onSelect}
       onViewSearchItem={onViewSearchItem}
+      placeholder="Search..."
     />
   );
 };

apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.stories.tsx

@@ -0,0 +1,60 @@
+import type { SearchTextData } from '@buster/server-shared/search';
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { GlobalSearchSecondaryContent } from './GlobalSearchSecondaryContent';
+
+const meta: Meta<typeof GlobalSearchSecondaryContent> = {
+  title: 'Features/Search/GlobalSearchSecondaryContent',
+  component: GlobalSearchSecondaryContent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockSearchTextData: SearchTextData = {
+  assetId: '123e4567-e89b-12d3-a456-426614174000',
+  assetType: 'chat',
+  title: 'Revenue Analysis Q4 2024',
+  additionalText: 'This is a comprehensive analysis of Q4 revenue trends',
+  updatedAt: new Date().toISOString(),
+  screenshotBucketKey: 'screenshots/mock-screenshot.png',
+  screenshotUrl: faker.image.url({
+    width: 1024,
+    height: 1024,
+  }),
+  ancestors: {
+    chats: [
+      {
+        id: '456e7890-e89b-12d3-a456-426614174001',
+        title: 'Parent Chat',
+      },
+    ],
+    dashboards: [
+      {
+        id: '789e0123-e89b-12d3-a456-426614174002',
+        title: 'Executive Dashboard',
+      },
+    ],
+    reports: [],
+    collections: [],
+  },
+  createdBy: {
+    id: 'abc123',
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    avatarUrl: faker.image.url({
+      width: 100,
+      height: 100,
+    }),
+  },
+};
+
+export const Default: Story = {
+  args: {
+    selectedItem: mockSearchTextData,
+  },
+};

apps/web/src/components/features/search/GlobalSearchModal/GlobalSearchSecondaryContent.tsx

@@ -1,5 +1,9 @@
 import type { SearchTextData } from '@buster/server-shared/search';
 import type React from 'react';
+import SkeletonSearchChat from '@/assets/png/skeleton-search-chat.png';
+import SkeletonSearchDashboard from '@/assets/png/skeleton-search-dashboard.png';
+import SkeletonSearchMetric from '@/assets/png/skeleton-search-metric.png';
+import SkeletonSearchReport from '@/assets/png/skeleton-search-report.png';
 
 export type GlobalSearchSecondaryContentProps = {
   selectedItem: SearchTextData;
@@ -8,6 +12,52 @@ export type GlobalSearchSecondaryContentProps = {
 export const GlobalSearchSecondaryContent: React.FC<GlobalSearchSecondaryContentProps> = ({
   selectedItem,
 }) => {
-  const { assetId, assetType, title, ancestors, updatedAt, screenshotBucketKey } = selectedItem;
-  return <div>GlobalSearchSecondaryContent</div>;
+  const {
+    assetId,
+    assetType,
+    title,
+    ancestors,
+    updatedAt,
+    screenshotBucketKey,
+    screenshotUrl,
+    createdBy,
+  } = selectedItem;
+  console.log(selectedItem);
+  return (
+    <div className="p-3 min-w-[420px] min-h-[420px]">
+      <ScreenshotImage screenshotUrl={screenshotUrl} assetType={assetType} />
+    </div>
+  );
+};
+
+const ScreenshotImage = ({
+  screenshotUrl,
+  assetType,
+}: {
+  screenshotUrl: string | null | undefined;
+  assetType: SearchTextData['assetType'];
+}) => {
+  let imageUrl = screenshotUrl;
+  if (!imageUrl) {
+    if (assetType === 'chat') {
+      imageUrl = SkeletonSearchChat;
+    } else if (assetType === 'metric_file') {
+      imageUrl = SkeletonSearchMetric;
+    } else if (assetType === 'dashboard_file') {
+      imageUrl = SkeletonSearchDashboard;
+    } else if (assetType === 'report_file') {
+      imageUrl = SkeletonSearchReport;
+    } else if (assetType === 'collection') {
+      imageUrl = SkeletonSearchMetric;
+    } else {
+      const _exhaustiveCheck: never = assetType;
+    }
+  }
+  return (
+    <img
+      src={screenshotUrl || SkeletonSearchMetric}
+      alt="Screenshot"
+      className="w-full h-full object-cover"
+    />
+  );
 };

packages/server-shared/src/search/search.ts

@@ -4,6 +4,7 @@ import {
   TextSearchResultSchema,
 } from '@buster/database/schema-types';
 import { z } from 'zod';
+import { UserInfoResponseSchema } from '../access-controls';
 import { AssetTypeSchema } from '../assets';
 import {
   PaginatedRequestSchema,
@@ -50,6 +51,7 @@ export const SearchTextRequestSchema = z
 export const SearchTextDataSchema = TextSearchResultSchema.extend({
   ancestors: AssetAncestorsSchema.optional(),
   screenshotUrl: z.string().optional(),
+  createdBy: UserInfoResponseSchema.optional(),
 });
 
 export type { AssetAncestors } from '@buster/database/schema-types';