@stack-spot/ai-chat-widget 1.36.1-betacitric.1 → 1.36.1

package/src/components/Tooltip/style.tsx

@@ -0,0 +1,24 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const animationTimeMS = 300
+
+export const TooltipBox = styled.div`
+  position: absolute;
+  opacity: 0;
+  transition: opacity ${animationTimeMS/ 1000}s;
+  top: 0;
+  left: 0;
+
+  &.visible {
+    opacity: 1;
+  }
+`
+
+export const DefaultTooltip = styled.div`
+  padding: 4px 8px;
+  background-color: ${theme.color.inverse[500]};
+  color: ${theme.color.inverse.contrastText};
+  border-radius: 6px;
+  margin: 6px;
+`

package/src/components/Tooltip/types.ts

@@ -0,0 +1,28 @@
+export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
+
+export interface BoxPosition {
+  x1: number,
+  x2: number,
+  y1: number,
+  y2: number,
+}
+
+export interface ShowOptions {
+  /**
+   * The content of the tooltip. Can be either a string or a React Element.
+   */
+  content: React.ReactNode,
+  /**
+   * The anchor to the tooltip. This is part of what defines the position where the tooltip will appear.
+   */
+  anchor: HTMLElement,
+  /**
+   * The position relative to the element referred by `anchor`.
+   * @default bottom
+   */
+  position?: TooltipPosition,
+  /**
+   * Whether or not to hide the tooltip when a click is detected outside of it.
+   */
+  hideOnClickOutside?: boolean,
+}

package/src/components/WorkspaceTabNavigator.tsx

@@ -1,5 +1,6 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { FieldGroup, IconButton, ImageBox, Input, Row, Text } from '@stack-spot/citric-react'
+import { Box, Flex, IconBox, Image, Text } from '@citric/core'
+import { ArrowRight, Search, Spaces, Times } from '@citric/icons'
+import { Avatar, IconButton } from '@citric/ui'
 import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { workspaceAiClient } from '@stack-spot/portal-network'
 import { WorkspaceResponse, WorkspaceVisibilityLevelEnum } from '@stack-spot/portal-network/api/workspace-ai'
@@ -8,6 +9,7 @@ import { memo, useMemo, useState } from 'react'
 import { useRightPanel } from '../right-panel/hooks'
 import { ButtonFavorite } from './ButtonFavorite'
 import { ComponentNavigator, ComponentNavigatorProps, NavigationComponent, NavigationMap, useComponentNavigation } from './ComponentNavigator'
+import { IconInput } from './IconInput'
 import { ListResource } from './ListResource'
 
 interface CardSpaceProps {
@@ -18,24 +20,25 @@ interface CardSpaceProps {
 }
 
 export const CardSpace = ({ onClick, name, icon, logoUrl }: CardSpaceProps) =>
-  <Row
+  <Flex
     onClick={onClick}
     flex={1}
+    alignItems="center"
     justifyContent="space-between"
     mr={2}
     bg="light.400"
-    radius="sm"
+    r="sm"
     p={3}
-    style={{ cursor: 'pointer' }}
+    sx={{ cursor: 'pointer' }}
   >
-    <Row gap="8px">
-      <ImageBox appearance="square">
-        {logoUrl ? <img src={logoUrl} /> : icon}
-      </ImageBox>
+    <Flex alignContent="center" alignItems="center" sx={{ gap: '8px', m: 1 }} >
+      <Avatar size="xxs" appearance="square" sx={{ bg: 'light.600', r: 'xxs' }}>
+        {logoUrl ? <Image src={logoUrl} /> : <IconBox> {icon} </IconBox>}
+      </Avatar>
       <Text appearance="body2">{name}</Text>
-    </Row>
-    <IconButton icon="ArrowRight" />
-  </Row>
+    </Flex>
+    <IconButton><ArrowRight /></IconButton>
+  </Flex>
 
 interface WorkspaceSourcesTabProps {
   visibility: WorkspaceVisibilityLevelEnum,
@@ -88,17 +91,16 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
 
   return (
     <>
-      <FieldGroup fullWidth style={{ alignSelf: 'stretch' }}>
-        <Icon icon="Search" />
-        <Input type="search" value={filter} onChange={setFilter} />
-      </FieldGroup>
+      <Box w={12}>
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+      </Box>
 
       {!!filtered.length &&
         <ListResource
           list={filtered}
           keygen={w => w.id}
           style={{ gap: '6px', display: 'flex', flexDirection: 'column' }}
-          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Icon icon="Spaces" />} onClick={() => onClick(w)} />}
+          renderLabel={w => <CardSpace name={w.name} logoUrl={w.logo} icon={<Spaces />} onClick={() => onClick(w)} />}
           renderAfterElement={(w) =>
             <ButtonFavorite favorite={{ idOrSlug: w?.id, listFavorites, onAddFavorite, onRemoveFavorite }} />}
           optionClassName={w => (filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
@@ -108,25 +110,26 @@ const WorkspaceSourcesTab = ({ visibility, onClick }: WorkspaceSourcesTabProps)
           className="option-list"
         />
       }
-      <div style={{ width: '100%' }}>
+      <Box w={12}>
         {!!workspaces.length && !filtered.length &&
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
         {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
-      </div>
+      </Box>
     </>
   )
 }
 
+
 const WorkspaceHeader = <T extends NavigationMap, K extends keyof T>({ data }: { data: NavigationComponent<T, K> }) => {
   const { close: closeRightPanel } = useRightPanel()
   const workspaceId = (data.props as any)['workspaceId']
   if (!workspaceId) return
 
   const workspace = workspaceAiClient.workspaceAi.useQuery({ id: workspaceId })
-  return <Row justifyContent="space-between" flex={1}>
+  return <Flex justifyContent="space-between" alignItems="center" flex={1}>
     {data.component === 'workspaceResource' ? 'Spots' : workspace.name}
-    {data.fullScreen && <IconButton icon="Times" title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel} />}
-  </Row>
+    {data.fullScreen && <IconButton title={'t.close'} aria-label={'t.close'} onClick={closeRightPanel}>  <Times /> </IconButton>}
+  </Flex>
 }
 
 interface WorkspaceTabNavigatorProps {

package/src/components/form/DescribedCheckboxGroup.tsx

@@ -1,106 +1,81 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Accordion, Checkbox, CheckboxGroup, FieldGroup, Input, Row, Text, useCheckboxGroupControls } from '@stack-spot/citric-react'
+import { Checkbox, Flex, Text } from '@citric/core'
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { difference, uniqBy } from 'lodash'
-import { useCallback, useEffect, useState } from 'react'
-import { Labeled } from '../../state/types'
-import { ButtonFavorite, Favorite } from '../ButtonFavorite'
-
-interface Props<T> {
-  initialValue?: T[],
-  options: T[],
-  /**
-   * Must return the data needed by the component, given the option.
-   */
-  data: (option: T) => { name: string, description: string } & Favorite<any>,
-  /**
-   * Use this when the selection must be kept at a global level, managed by a React Ref.
-   */
-  globalSelection?: React.MutableRefObject<Labeled[] | undefined>,
-  emptyResults: React.ReactNode,
-  emptyDataset: React.ReactNode,
-  onChange?: (value: T[]) => void,
-}
+import { useMemo } from 'react'
+import { Accordion } from '../Accordion'
+import { RadioCheckBox } from './styled'
+import { CheckProps } from './types'
 
 /**
  * Renders a checkbox group where each option has a label and a description.
  * The description in placed under the label and checkbox as an accordion.
- * 
- * Also renders a search input and a select all checkbox.
  */
-export function DescribedCheckboxGroup<T>(
-  { initialValue, options: opt, data, globalSelection, onChange: change, emptyDataset, emptyResults }: Props<T>,
-) {
+export function DescribedCheckboxGroup<T>({
+  keygen, 
+  onChange, 
+  options, 
+  renderDescription, 
+  renderLabel, 
+  renderBeforeElement, 
+  renderAfterElement, 
+  optionClassName, 
+  optionStyle, 
+  value, 
+  className, 
+  style }: CheckProps<T>) {
   const t = useTranslate(dictionary)
-  const [options, setOptions] = useState(opt)
+  const allSelected = options.length > 0 && options.every(option => value.includes(option))
 
-  useEffect(() => {
-    if (controls.value.length === 0 && (initialValue?.length ?? 0) > 0) controls.setValue(initialValue!)
-  }, [initialValue])
+  const handleSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      onChange(options)
+    } else {
+      onChange([])
+    }
+  }
 
-  const onChange = useCallback((newValue: T[], previousValue: T[]) => {
-    change?.(newValue)
-    if (!globalSelection?.current) return
-    const added = difference(newValue, previousValue)
-    const removed = difference(previousValue, newValue)
-    globalSelection.current = globalSelection.current?.filter(o => !removed.some(r => data(r).idOrSlug === o.id)) ?? []
-    globalSelection.current = uniqBy(
-      [...globalSelection.current, ...added.map(o => ({ id: data(o).idOrSlug, label: data(o).name }))],
-      'id',
+  const items = useMemo(() => options.map((option) => {
+    const label = renderLabel(option)
+    const description = renderDescription(option)
+    const header = (
+      <label>
+        <Checkbox
+          checked={value.includes(option)}
+          onChange={(e) => {
+            if (e.target.checked && !value.includes(option)) onChange([...value, option])
+            else onChange(value.filter(item => item !== option))
+          }}
+        />
+        {typeof label === 'string' ? <Text>{label}</Text> : label}
+      </label>
     )
-  }, [])
 
-  const controls = useCheckboxGroupControls({
-    initialValue,
-    options,
-    applyFilter: (filter, o) => data(o).name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
-    renderKey: o => data(o).idOrSlug,
-    onChange,
-  })
+    return (
+      <>
+        <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+          {renderBeforeElement?.(option)}
+          <Accordion header={header}>
+            {typeof description === 'string'
+              ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
+              : description as any
+            }
+          </Accordion>
+          {renderAfterElement?.(option)}
+        </li>
+      </>
+    )
+  }), [options, value])
 
-  return options.length ? <>
-    <FieldGroup fullWidth>
-      <Icon icon="Search" />
-      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
-    </FieldGroup>
-    {controls.options.length ? <>
-      <Row tag="label" gap="10px" p="11px">
-        <Checkbox value={controls.isAllSelected} onChange={v => v ? controls.selectAll() : controls.removeSelection()} />
-        <Text>{controls.isAllSelected ? t.removeAll : t.selectAll}</Text>
-      </Row>
-      <CheckboxGroup
-        options={controls.options}
-        value={controls.value}
-        onChange={controls.setValue}
-        renderKey={controls.renderKey}
-        className="option-list"
-        renderItem={(checkbox, o) => {
-          const { description, idOrSlug, name, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
-          return (
-            <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
-              <Accordion header={btn => <>{checkbox}<Text>{name}</Text>{btn}</>} appearance="card" maxHeight={100}>
-                <Text appearance="microtext1" color="light.700">{description}</Text>
-              </Accordion>
-              {onAddFavorite && <ButtonFavorite favorite={{
-                idOrSlug: idOrSlug,
-                listFavorites,
-                onAddFavorite: async (...args) => {
-                  const res = await onAddFavorite(...args)
-                  setOptions([...options]) // forces options re-rendering
-                  return res
-                },
-                onRemoveFavorite: async (...args) => {
-                  const res = await onRemoveFavorite?.(...args)
-                  setOptions([...options]) // forces options re-rendering
-                  return res ?? false
-                },
-              }} />}
-            </Row>
-          )
-        }}
+  return <RadioCheckBox style={style} className={className}>
+    <Flex as="li" alignItems="center" ml={3} pl={1}>
+      <Checkbox
+        checked={allSelected}
+        onChange={handleSelectAll}
       />
-    </> : emptyResults}
-  </> : emptyDataset
+      <Text>{allSelected ? t.removeAll : t.selectAll}</Text>
+    </Flex>
+    {items}
+  </RadioCheckBox>
 }
 
 const dictionary = {

package/src/components/form/DescribedRadioGroup.tsx

@@ -1,85 +1,52 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Accordion, FieldGroup, ImageBox, Input, RadioGroup, Row, Text, useRadioGroupControls } from '@stack-spot/citric-react'
-import { useEffect, useState } from 'react'
-import { ButtonFavorite, Favorite } from '../ButtonFavorite'
-
-interface Props<T> {
-  initialValue?: T,
-  options: T[],
-  /**
-   * Must return the data needed by the component, given the option.
-   * @param option 
-   * @returns 
-   */
-  data: (option: T) => { name: string, description: React.ReactNode, image?: React.ReactElement } & Favorite<any>,
-  emptyResults: React.ReactNode,
-  emptyDataset: React.ReactNode,
-  onChange?: (value: T | undefined) => void,
-}
+import { Radio, Text } from '@citric/core'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+import { Accordion } from '../Accordion'
+import { RadioCheckBox } from './styled'
+import { RadioProps } from './types'
 
 /**
- * Renders a radio group where each option has a label and a description.
- * The description in placed under the label and checkbox as an accordion.
- * 
- * Also renders a search input.
+ * Renders a radio button group where each option has a label and a description.
+ * The description in placed under the label and radio button as an accordion.
  */
-export function DescribedRadioGroup<T>({ initialValue, options: opt, data, emptyDataset, emptyResults, onChange }: Props<T>) {
-  const [options, setOptions] = useState(opt)
-  const controls = useRadioGroupControls({
-    initialValue,
-    options,
-    applyFilter: (filter, o) => data(o).name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
-    renderKey: o => data(o).idOrSlug,
-    onChange,
-  })
+export function DescribedRadioGroup<T>(
+  { 
+    keygen, 
+    onChange, 
+    options, 
+    renderDescription, 
+    renderLabel, 
+    renderBeforeElement,
+    renderAfterElement,
+    optionClassName, 
+    optionStyle, 
+    value, 
+    className, 
+    style }: RadioProps<T>,
+) {
+  const items = useMemo(() => options.map((option) => {
+    const label = renderLabel(option)
+    const description = renderDescription(option)
 
-  useEffect(() => {
-    if (controls.value === undefined && initialValue !== undefined) controls.setValue(initialValue)
-  }, [initialValue])
+    const header = (
+      <label>
+        <Radio checked={option === value} onChange={() => onChange(option)} />
+        {typeof label === 'string' ? <Text>{label}</Text> : label}
+      </label>
+    )
+    return (
+      <li key={keygen(option)} className={listToClass(['radio-group-item', optionClassName?.(option)])} style={optionStyle?.(option)}>
+        {renderBeforeElement?.(option)}
+        <Accordion header={header}>
+          {typeof description === 'string'
+            ? <Text appearance="microtext1" colorScheme="light.700">{description}</Text>
+            : description as any
+          }
+        </Accordion>
+        {renderAfterElement?.(option)}
+      </li>
+    )
+  }), [options, value])
 
-  return options.length ? <>
-    <FieldGroup fullWidth>
-      <Icon icon="Search" />
-      <Input type="search" value={controls.filter} onChange={controls.setFilter} />
-    </FieldGroup>
-    {controls.options.length ? <RadioGroup
-      options={controls.options}
-      value={controls.value}
-      onChange={controls.setValue}
-      renderKey={controls.renderKey}
-      className="option-list"
-      renderItem={(radio, o) => {
-        const { description, idOrSlug, name, image, listFavorites, onAddFavorite, onRemoveFavorite } = data(o)
-        return (
-          <Row className={controls.isUnfilteredButChecked(o) ? 'filtered-out' : ''}>
-            <Accordion
-              header={btn => <>
-                {radio}
-                {image && <ImageBox size="xs" style={{ fontSize: '16px' }}>{image}</ImageBox>}
-                <Text>{name}</Text>{btn}</>
-              }
-              appearance="card"
-              maxHeight={100}
-            >
-              {typeof description === 'string' ? <Text appearance="microtext1" color="light.700">{description}</Text> : description}
-            </Accordion>
-            {onAddFavorite && <ButtonFavorite favorite={{
-              idOrSlug: idOrSlug,
-              listFavorites,
-              onAddFavorite: async (...args) => {
-                const res = await onAddFavorite(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res
-              },
-              onRemoveFavorite: async (...args) => {
-                const res = await onRemoveFavorite?.(...args)
-                setOptions([...options]) // forces options re-rendering
-                return res ?? false
-              },
-            }} />}
-          </Row>
-        )
-      }}
-    /> : emptyResults}
-  </> : emptyDataset
+  return <RadioCheckBox style={style} className={className}>{items}</RadioCheckBox>
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 /* Attention: in order for the package "page" to work without linking the lib, we must export types separately, using the "type" keyword */
 
+export { ProgressBar } from './components/ProgressBar'
 export { QuickStartButton } from './components/QuickStartButton'
 export { AIWidgetProvider } from './context/AIWidgetProvider'
 export * from './context/hooks'
@@ -11,8 +12,8 @@ export type { ChatAction } from './state/ChatEntry'
 export { ChatState } from './state/ChatState'
 export type { MessageInterceptor } from './state/ChatState'
 export { ChatTabsController } from './state/ChatTabsController'
-export { acceptedFileTypes } from './state/constants'
 export { ObservableState } from './state/ObservableState'
 export type { Labeled, LabeledAgent, LabeledWithImage } from './state/types'
 export { WidgetState } from './state/WidgetState'
 export { defaultLanguage, languages } from './utils/programming-languages'
+export { acceptedFileTypes } from './state/constants'

package/src/layout.css

@@ -1,3 +1,29 @@
+@font-face {
+  font-family: "San Francisco";
+  font-weight: 400;
+  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
+}
+
+/* Scroll bars */
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+  height: 0.5rem;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--light-600);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent; 
+}
+
 /* Classes */
 
 .ai-chat-widget {

package/src/right-panel/DefaultPanel.tsx

@@ -1,4 +1,6 @@
-import { IconButton, Text } from '@stack-spot/citric-react'
+import { Text } from '@citric/core'
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { styled } from 'styled-components'
 import { WithChildren } from '../types'
@@ -49,9 +51,11 @@ export const DefaultPanel = ({ description, onClose, title, children }: Props) =
       <header>
         <div className="title">
           {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
-          {typeof description === 'string' ? <Text color="light.700">{description}</Text> : description}
+          {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
         </div>
-        <IconButton icon="Times" title={t.close} aria-label={t.close} onClick={onClose} />
+        <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
+          <Times />
+        </IconButton>
       </header>
       <article>{children}</article>
     </PanelBox>

package/src/state/ChatEntry.ts

@@ -1,5 +1,6 @@
+import { OneOfColorSchemes } from '@citric/core'
 import { ChatStep } from '@stack-spot/portal-network'
-import { ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme'
+import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
 import { LabeledAgent } from './types'
 
@@ -31,7 +32,7 @@ export interface ChatAction extends SerializableAction {
   /**
    * @default inverse
    */
-  colorScheme?: ColorSchemeName,
+  colorScheme?: OneOfColorSchemes,
   /**
    * @default false
    */
@@ -149,7 +150,7 @@ export interface TextChatEntry {
   /*
    * Options for radio, checkbox or button type.
    */
-  options?: { color?: ColorSchemeName, label: string, value?: string, hasInput?: boolean}[],
+  options?: { color?: OneOfColorSchemes, label: string, value?: string, hasInput?: boolean}[],
   /**
    * Name to be used in input type fields.
    */

package/src/state/constants.ts

@@ -1,10 +1,10 @@
 import { FileSize } from './types'
 
 export const acceptedFileTypes = [
-  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls', 'xlsx',*/ 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
+  'json', 'yaml', 'txt', 'md', 'json', 'yaml', 'pdf', /*'xls',*/ 'xlsx', 'csv', 'cbl', 'cpp', 'cxx', 'cc', 'c', 'hpp', 'hxx', 'hh', 'h',
   'cs', 'go', 'html', 'htm', 'kt', 'kts', 'md', 'php', 'proto', 'py', 'java', 'js', 'jsx', 'ts', 'tsx', 'rst', 'rb', 'rs', 'scala', 'swift',
   'sql', 'yaml', 'yml', 'tf', 'sh', 'ps1', 'psd1', 'psm1', 'bat', 'cmd', 'rego', 'f', 'for', 'r', 'pl', 'vb', 'dart', 'hs', 'lua',
-  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png',
+  'asm', 'groovy', 'gvy', 'gy', 'mat', 'clj', 'lisp', 'm', 'cls', 'css', 'scss', 'json', 'jpg', 'jpeg', 'png', 'docx', 'pptx',
 ]
 
 export const maxFileSize: FileSize = { value: 10, unit: 'MB' }

package/src/types.ts

@@ -1,4 +1,3 @@
-import { WithIcon } from '@stack-spot/citric-icons'
 import { WithStyle } from '@stack-spot/portal-theme'
 
 export interface WithChildren<T = React.ReactNode> {
@@ -7,13 +6,13 @@ export interface WithChildren<T = React.ReactNode> {
 
 export type PropsOf<T extends React.FunctionComponent> = T extends React.FunctionComponent<infer P> ? P : never
 
-export type ButtonAction = {
+export interface ButtonAction extends WithStyle {
+  icon?: React.ReactElement,
   color?: string,
   label?: string,
   ariaLabel?: string,
   onClick: () => any,
-} & WithStyle & Partial<WithIcon>
-
+}
 
 export interface MinimizedActions {
   /**

package/src/utils/tools.ts

@@ -1,9 +1,30 @@
 import { BuiltinToolkitResponse, BuiltinToolResponse } from '@stack-spot/portal-network/api/agent'
+import { CustomToolkitDto } from '@stack-spot/portal-network/api/agent-tools'
 import { keyBy } from 'lodash'
 
 export type ToolWithImage = BuiltinToolResponse & { id: string, image?: string }
 
-export function toolById(id: string, toolkits: BuiltinToolkitResponse[] | undefined): ToolWithImage | undefined {
-  const tools = toolkits?.map(({ image_url, tools }) => tools?.map((tool) => ({ ...tool, id: tool.id!, image: image_url! }))).flat()
+function isBuiltinToolkit(
+  toolkit: BuiltinToolkitResponse | CustomToolkitDto,
+): toolkit is BuiltinToolkitResponse {
+  return 'image_url' in toolkit
+}
+
+
+export function toolById(
+  id: string,
+  toolkits: (BuiltinToolkitResponse | CustomToolkitDto)[] | undefined,
+): ToolWithImage | undefined {
+  const tools = toolkits
+    ?.map((toolkit) =>
+      toolkit.tools?.map((tool) => ({
+        ...tool,
+        id: tool.id!,
+        image: isBuiltinToolkit(toolkit)
+          ? toolkit.image_url ?? undefined
+          : (toolkit as CustomToolkitDto).avatar ?? undefined,
+      })),
+    )
+    .flat()
   return keyBy(tools, 'id')[id]
 }

package/src/utils/upload/FileUpload.ts

@@ -2,7 +2,6 @@ import { dataIntegrationClient } from '@stack-spot/portal-network'
 import { FileUploadType } from '@stack-spot/portal-network/api/dataIntegration'
 import { pull } from 'lodash'
 import { FileUploadStatus } from './types'
-import { getFileId } from './utils'
 
 export type FileUploadChangeListener = (status: FileUploadStatus) => void
 
@@ -18,8 +17,8 @@ export class FileUpload {
 
   constructor(file: File, type: FileUploadType = 'CONTEXT') {
     this.file = file
-    this.id = getFileId(file)
     this.type = type
+    this.id = `${Date.now()}-${Math.random()}`
     this.upload()
   }