feat: various bug fixes and enhancements

This patch includes various bug fixes and enhancements:

- The widget README now better reflects the updated Vite setup.

- We now use `neutral` for `shadcn` components, instead of `slate`.

- A type checking script was added to the widget web app.

- Downloaded PDFs now include a timestamp to reduce file name conflicts.

- When deep research is enabled, we now show deep research plan
  suggestions instead of the normal prompt suggestions.

- Prompt suggestion items now show tagged datasets as mentions instead
  of rendering the markdown link string.

- Various components were moved from the widget app to the UI package.

- Research plans are now always opened by default.

- We now import SVGs using default imports instead of named imports.

- Charts are now rendered without `unsafe-eval` JavaScript. This allows
  for more strict content-security policies (CSP).

Author: nicholaschiang

apps/widget/README.md

@@ -2,30 +2,27 @@
 
 ## Development
 
-This is a `create-react-app`. You can build it like so:
+This is a React web application built with Vite.
+You can build it like so:
 
 - Install dependencies
 
 ```bash
-npm install
+pnpm install
 ```
 
 - (Optional) For developing, start app on localhost
 
 ```bash
-npm run start
+pnpm dev
 ```
 
 - Run build command
 
 ```bash
-npm run build
+pnpm build
 ```
 
-- The build files should now be in `build` folder, ready to be deployed and served. This includes
-  - `index.html` The entry point for the react app
-  - `loader.js` The script that is used to load the react widget in the target website
-
 ## Documentation
 
 Please visit [Numbers Station Widget API Documentation](https://docs.numbersstation.ai/api/guides/embed-widget/) for the embed widget implementation guide.

apps/widget/components.json

@@ -5,7 +5,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/index.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
     "cssVariables": true
   },
   "aliases": {

apps/widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ns/widget",
-  "version": "188.21.2",
+  "version": "192.5.0",
   "private": true,
   "type": "module",
   "homepage": ".",
@@ -10,7 +10,8 @@
     "serve": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --max-warnings=100",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --max-warnings=70",
+    "typecheck": "tsc --noEmit",
     "format": "prettier src --write"
   },
   "prettier": "@ns/prettier-config",
@@ -70,7 +71,7 @@
     "sonner": "^1.7.0",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
-    "vega-embed": "^6.26.0",
+    "vega-embed": "^6.29.0",
     "web-vitals": "^4.2.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.1"
@@ -129,4 +130,4 @@
     "node": ">=22"
   },
   "packageManager": "[email protected]"
-}
+}

apps/widget/src/components/DownloadPDFButton.tsx

@@ -2,10 +2,10 @@ import download from 'downloadjs'
 import { toast } from 'sonner'
 
 import { getChatSummaryPdf } from '@ns/public-api'
+import { Button } from '@ns/ui/atoms/Button'
 import { DEFAULT_CONVERSATION_NAME } from '@ns/ui/utils/constants'
 
-import { Button } from 'components/Button'
-import { ReactComponent as PDF } from 'lib/icons/pdf.svg?react'
+import PDF from 'lib/icons/pdf.svg?react'
 import { useChatStore } from 'lib/stores/chat'
 import { getAccount } from 'lib/stores/user'
 
@@ -18,7 +18,7 @@ export function DownloadPDFButton({ messageId }: { messageId: string }) {
     )
     download(
       data as Blob,
-      `${currentChat?.name ?? DEFAULT_CONVERSATION_NAME} Summary.pdf`,
+      `${currentChat?.name ?? DEFAULT_CONVERSATION_NAME} Summary ${new Date().toLocaleString()}.pdf`,
       'application/pdf',
     )
   }

apps/widget/src/components/ErrorAlert.tsx

@@ -1,6 +1,6 @@
 import { AlertCircle } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from 'components/Alert'
+import { Alert, AlertDescription, AlertTitle } from '@ns/ui/atoms/Alert'
 
 interface Props {
   message: string

apps/widget/src/components/ErrorBoundary.tsx

@@ -4,10 +4,9 @@ import {
   type FallbackProps,
 } from 'react-error-boundary'
 
+import { Button } from '@ns/ui/atoms/Button'
 import { ErrorBoundaryContent } from '@ns/ui/molecules/ErrorBoundaryContent'
 
-import { Button } from 'components/Button'
-
 function FallbackComponent({ error, resetErrorBoundary }: FallbackProps) {
   return (
     <ErrorBoundaryContent error={error}>
@@ -23,7 +22,7 @@ export function ErrorBoundary({ children }: React.PropsWithChildren) {
   return (
     <Boundary
       FallbackComponent={FallbackComponent}
-      onReset={() => navigate({ to: '/' })}
+      onReset={() => navigate({ to: '/$' })}
     >
       {children}
     </Boundary>

apps/widget/src/components/ExportPDFButton.tsx

@@ -3,8 +3,8 @@ import { ExternalLink } from 'lucide-react'
 import { toast } from 'sonner'
 
 import { getDeepResearchSummaryPdf } from '@ns/public-api'
+import { Button } from '@ns/ui/atoms/Button'
 
-import { Button } from 'components/Button'
 import { useChatStore } from 'lib/stores/chat'
 import { getAccount } from 'lib/stores/user'
 
@@ -17,7 +17,7 @@ export function ExportPDFButton({ messageId }: { messageId: string }) {
     )
     download(
       data as Blob,
-      `${currentChat?.name ?? 'Deep Research'} Summary.pdf`,
+      `${currentChat?.name ?? 'Deep Research'} Summary ${new Date().toLocaleString()}.pdf`,
       'application/pdf',
     )
   }

apps/widget/src/components/Suggestions.tsx

@@ -1,28 +1,36 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { Link } from '@tanstack/react-router'
-import { ArrowRight } from 'lucide-react'
+import { Link, useNavigate, useSearch } from '@tanstack/react-router'
+import { ArrowRight, Atom } from 'lucide-react'
 import { nanoid } from 'nanoid'
 import { forwardRef } from 'react'
+import { toast } from 'sonner'
 
 import {
   AgentName,
+  type ChatApiResponse,
+  type DeepResearchPlanInDbBase,
   type GetSuggestionsForAccountQueryParams,
   type SuggestionApi,
+  useCreateChatFromDeepResearchPlan,
+  useGetDeepResearchPlans,
   useGetSuggestionsForAccount,
 } from '@ns/public-api'
+import { Alert, AlertDescription, AlertTitle } from '@ns/ui/atoms/Alert'
+import { Button } from '@ns/ui/atoms/Button'
+import { Spinner } from '@ns/ui/atoms/Spinner'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@ns/ui/atoms/Tooltip'
+import {
+  MessageRichTextInput,
+  MessageRichTextInputContent,
+} from '@ns/ui/molecules/MessageRichTextInput'
 import { AGENT_DESCRIPTIONS, AGENT_DISPLAY_NAMES } from '@ns/ui/utils/agentName'
 import { cn } from '@ns/ui/utils/cn'
 import { ASSET_TRIGGER } from '@ns/ui/utils/mentions'
 
-import { Alert, AlertDescription, AlertTitle } from 'components/Alert'
-import { Button } from 'components/Button'
-import { Spinner } from 'components/Spinner'
 import { useChatStore } from 'lib/stores/chat'
 import { useCustomizationStore } from 'lib/stores/customization'
 import { getAccount } from 'lib/stores/user'
 
-import { Tooltip, TooltipContent, TooltipTrigger } from './Tooltip'
-
 const suggestedAgentNames = [
   AgentName.sql_query_agent,
   AgentName.search_agent,
@@ -36,10 +44,14 @@ export function Suggestions({ className }: { className?: string }) {
   const {
     state: { showPromptLibrary },
   } = useCustomizationStore()
+  const { deepResearch } = useSearch({ from: '/_widget/chats' })
   return (
     <TabsPrimitive.Root
       defaultValue={suggestedAgentNames[0]}
-      className={cn('mx-auto flex max-w-3xl flex-col gap-2.5', className)}
+      className={cn(
+        'mx-auto flex w-full max-w-3xl flex-col gap-2.5',
+        className,
+      )}
     >
       <header className='flex flex-col gap-2 pt-4'>
         <h1 className='text-2xl font-semibold'>
@@ -49,7 +61,7 @@ export function Suggestions({ className }: { className?: string }) {
           <p className='text-base text-neutral-600'>
             Write your own prompt or choose a curated one
           </p>
-          {showPromptLibrary && (
+          {showPromptLibrary && !deepResearch && (
             <Button
               size='sm'
               variant='outline'
@@ -64,20 +76,16 @@ export function Suggestions({ className }: { className?: string }) {
           )}
         </div>
       </header>
-      <SuggestionsGrid limit={4} />
+      {deepResearch ? <DeepResearchGrid /> : <SuggestionsGrid limit={4} />}
     </TabsPrimitive.Root>
   )
 }
 
-export function SuggestionsGrid(params: GetSuggestionsForAccountQueryParams) {
-  const {
-    data: suggestions,
-    isPending,
-    error,
-  } = useGetSuggestionsForAccount({
-    accountName: getAccount(),
-    params,
-  })
+function Grid({
+  isPending,
+  error,
+  children,
+}: React.PropsWithChildren<{ isPending: boolean; error: unknown }>) {
   return isPending ? (
     <div className='flex items-center justify-center gap-2 p-6'>
       <Spinner size={0.4} />
@@ -89,11 +97,76 @@ export function SuggestionsGrid(params: GetSuggestionsForAccountQueryParams) {
       <AlertDescription>{(error as Error).message}</AlertDescription>
     </Alert>
   ) : (
-    <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
-      {suggestions.map((suggestion) => (
+    <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>{children}</div>
+  )
+}
+
+function DeepResearchGrid() {
+  const {
+    data: deepResearchPlans,
+    isPending,
+    error,
+  } = useGetDeepResearchPlans({ accountName: getAccount() })
+  return (
+    <Grid isPending={isPending} error={error}>
+      {deepResearchPlans?.map((plan) => (
+        <DeepResearchGridItem plan={plan} key={plan.id} />
+      ))}
+    </Grid>
+  )
+}
+
+function DeepResearchGridItem({ plan }: { plan: DeepResearchPlanInDbBase }) {
+  const { mutateAsync, isPending } = useCreateChatFromDeepResearchPlan()
+  const { setCurrentChat } = useChatStore()
+  const navigate = useNavigate()
+  const onSuccess = (chat: ChatApiResponse) => {
+    setCurrentChat(chat)
+    navigate({ to: '/chats', search: true })
+  }
+  const onClick = () =>
+    toast.promise(
+      async () => {
+        await mutateAsync(
+          { accountName: getAccount(), deepResearchPlanId: plan.id },
+          { onSuccess },
+        )
+      },
+      {
+        loading: 'Creating chat from research plan...',
+        success: 'Chat created from research plan',
+        error: 'Error creating chat from research plan',
+      },
+    )
+  return (
+    <GridItem
+      onClick={onClick}
+      suggestion={plan.question}
+      className={cn(isPending && 'cursor-wait')}
+    >
+      <Mention className='bg-indigo-50 text-indigo-600'>
+        <Atom className='h-4 w-4' />
+        <span>Deep research</span>
+      </Mention>
+    </GridItem>
+  )
+}
+
+export function SuggestionsGrid(params: GetSuggestionsForAccountQueryParams) {
+  const {
+    data: suggestions,
+    isPending,
+    error,
+  } = useGetSuggestionsForAccount({
+    accountName: getAccount(),
+    params,
+  })
+  return (
+    <Grid isPending={isPending} error={error}>
+      {suggestions?.map((suggestion) => (
         <SuggestionsGridItem suggestion={suggestion} key={nanoid()} />
       ))}
-    </div>
+    </Grid>
   )
 }
 
@@ -104,18 +177,39 @@ function SuggestionsGridItem({ suggestion }: { suggestion: SuggestionApi }) {
   const { sendMessage } = useChatStore()
   const assetTag = `[${suggestion.asset_name}](ds-${suggestion.short_id})`
   const message = `${suggestion.prompt} ${ASSET_TRIGGER}${assetTag}`
+  return (
+    <GridItem
+      onClick={() => sendMessage(message)}
+      suggestion={suggestion.prompt}
+    >
+      {showAgentTagging && <AgentMention name={suggestion.agent_name} />}
+      <AssetMention name={suggestion.asset_name} />
+    </GridItem>
+  )
+}
+
+function GridItem({
+  className,
+  suggestion,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLButtonElement> & { suggestion: string }) {
   return (
     <button
       type='button'
-      onClick={() => sendMessage(message)}
-      className='flex flex-col items-start justify-between gap-6 rounded-lg border border-neutral-200 bg-white p-4 text-left transition hover:border-primary focus:border-primary'
+      className={cn(
+        'flex flex-col items-start justify-between gap-6 rounded-lg border border-neutral-200 bg-white p-4 text-left transition hover:border-primary focus:border-primary',
+        className,
+      )}
+      {...props}
     >
-      <span className='line-clamp-2 min-h-10 text-sm font-normal text-neutral-900'>
-        {suggestion.prompt}
-      </span>
+      <div className='line-clamp-2 min-h-10 text-sm font-normal text-neutral-900'>
+        <MessageRichTextInput readOnly value={suggestion}>
+          <MessageRichTextInputContent />
+        </MessageRichTextInput>
+      </div>
       <div className='flex w-full items-center justify-between gap-4'>
-        {showAgentTagging && <AgentMention name={suggestion.agent_name} />}
-        <AssetMention name={suggestion.asset_name} />
+        {children}
       </div>
     </button>
   )
@@ -151,7 +245,7 @@ const Mention = forwardRef<HTMLDivElement, MentionProps>(
   ({ className, children, ...props }, ref) => (
     <div
       className={cn(
-        'flex h-6 items-center rounded-md px-1.5 text-xs',
+        'flex h-6 items-center gap-1 rounded-md px-1.5 text-xs',
         className,
       )}
       ref={ref}

apps/widget/src/components/chat/ChatListItem.tsx

@@ -3,15 +3,15 @@ import { Ellipsis } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 
 import { type ChatApiResponse } from '@ns/public-api'
-import { cn } from '@ns/ui/utils/cn'
-
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from 'components/Dropdown'
+} from '@ns/ui/atoms/DropdownMenu'
+import { cn } from '@ns/ui/utils/cn'
+
 import { useChatStore } from 'lib/stores/chat'
 
 interface ChatListItemProps {