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

package/src/components/RightPanelTabs.tsx

@@ -1,15 +1,43 @@
-import { Tab, Tabs } from '@stack-spot/citric-react'
-import { useMemo } from 'react'
+import { Tabs, TabsItem } from '@citric/ui'
+import { useMemo, useState } from 'react'
+import styled from 'styled-components'
 import { RightPanelForm } from './RightPanelForm'
 
+interface Tab {
+  title: string,
+  content: React.ReactNode,
+}
+
 interface Props {
   tabs: Tab[],
 }
 
+const StyledTabs = styled(Tabs)`
+  > button {
+    flex: 1;
+    padding: 8px 0;
+  }
+`
+
+const StyledTabsItem = styled(TabsItem)`
+  flex: 1;
+  overflow: hidden;
+`
+
 /**
  * Tabs for the right panel content.
  */
 export const RightPanelTabs = ({ tabs }: Props) => {
-  const tabItems = useMemo(() => tabs.map(t => ({ ...t, content: <RightPanelForm>{t.content}</RightPanelForm> })), [tabs])
-  return <Tabs tabs={tabItems} />
+  const [currentTab, setCurrentTab] = useState(0)
+  const tabItems = useMemo(() => tabs.map(({ content, title }) => (
+    <StyledTabsItem key={title} title={title}>
+      <RightPanelForm>{content}</RightPanelForm>
+    </StyledTabsItem>
+  )), [tabs])
+
+  return (
+    <StyledTabs activeIndex={currentTab} onChange={setCurrentTab}>
+      {tabItems}
+    </StyledTabs>
+  )
 }

package/src/components/Selector/index.tsx

@@ -1,4 +1,6 @@
-import { FallbackBoundary, IconLink, Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
+import { ExternalLink } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { AgentVisibilityLevel } from '@stack-spot/portal-network'
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
@@ -7,6 +9,7 @@ import { useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { getUrlToStackSpotAI } from '../../utils/url'
 import { ButtonFavorite } from '../ButtonFavorite'
 import { Fading } from '../Fading'
+import { FallbackBoundary } from '../FallbackBoundary'
 import { SelectorBox } from './styled'
 
 type SectionVisibility =  AgentVisibilityLevel
@@ -97,17 +100,10 @@ const ListItem = <T extends Item>({ item, selectorConfig, onSelect, favorite }:
       >
         {renderComponentItem(item)}
       </button>
-      <IconLink
-        icon="ExternalLink"
-        title={linkTitle}
-        aria-label={linkTitle}
-        href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`}
-        target="_blank"
-      />
-      <ButtonFavorite
-        appearance="text"
-        favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }}
-      />
+      <IconButton as="a" title={linkTitle} aria-label={linkTitle} href={`${getUrlToStackSpotAI()}${urlBuilder(item)}`} target="_blank">
+        <ExternalLink />
+      </IconButton>
+      <ButtonFavorite favorite={{ ...favorite, idOrSlug: favorite?.favoriteIsSlug ? item.slug : item?.id, listFavorites }} isIconButton />
     </li>
   )
 }
@@ -132,9 +128,9 @@ const List = <T extends Item>({ selectorConfig, filter, visibility, onSelect, fa
   }, [filter, items, visibility, favorites])
 
 
-  if (!items.length) return <Text className="empty" color="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
+  if (!items.length) return <Text className="empty" colorScheme="light.700">{interpolate(t.noData, selectorConfig.resourceName)}</Text>
   if (!filtered?.length)
-    <Text className="empty" color="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
+    <Text className="empty" colorScheme="light.700">{interpolate(t.noResults, selectorConfig.resourceName)}</Text>
 
   return (
     <ul className="selector-list">
@@ -184,8 +180,8 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
   return (
     <div ref={ref}>
       <header>
-        {icon}
-        <Text tag="h3">{resourceName}</Text>
+        <IconBox>{icon}</IconBox>
+        <Text as="h3" className="uppercase"> {resourceName} </Text>
       </header>
       <div className="body">
         {isGroupResourcesByScope && (
@@ -194,7 +190,7 @@ const SelectorContent = ({ filter, onClose, selectorConfig, favorite }: ContentP
             {sections.map(createSectionItem)}
           </ul>
         )}
-        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)}>
+        <FallbackBoundary message={interpolate(t.error, selectorConfig.resourceName)} mini>
           <List filter={filter} visibility={visibility} selectorConfig={selectorConfig} onSelect={onSelectItem} favorite={favorite} />
         </FallbackBoundary>
       </div>

package/src/components/Selector/styled.ts

@@ -40,16 +40,13 @@ export const SelectorBox = styled.div<{ $tabsCount: number }>`
       flex-direction: row;
       gap: 8px;
       align-items: center;
-      padding: 0 8px;
+      padding: 8px;
       margin-bottom: 4px;
+      font-family: 'San Francisco';
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: 11px;
       background-color: ${theme.color.light[500]};
-      height: 40px;
-      h3 {
-        text-transform: uppercase;
-        font-weight: 500;
-        font-size: 12px;
-        margin: 0;
-      }
     }
 
     .body {

package/src/components/StackedBadge.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@stack-spot/citric-react'
+import { IconBox, Text } from '@citric/core'
 import { theme } from '@stack-spot/portal-theme'
 import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
@@ -46,9 +46,9 @@ const Styled = styled.div`
       }
     }
 
-    .citric-icon {
-      margin: 1px;
-      font-size: 10px;
+    i {
+      width: 12px;
+      height: 12px;
     }
 
     img, svg {
@@ -67,7 +67,7 @@ export const StackedBadge = ({ label, images, ...props }: Props) => (
           <li key={key || i}>
             {url
               ? <img alt={name} aria-label={name} title={name} src={url} />
-              : <span aria-label={name} title={name}>{icon}</span>
+              : <IconBox size="xs" aria-label={name} title={name}>{icon}</IconBox>
             }
           </li>
         ),

package/src/components/TabManager.tsx

@@ -1,6 +1,8 @@
 /* Tabs to select chat and add new chats */
 
-import { Button, IconBox, IconButton } from '@stack-spot/citric-react'
+import { Button, IconBox } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { last } from 'lodash'
@@ -69,6 +71,14 @@ const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
     }
   }
 
+  ${IconButton} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+  }
+
   .list-overflow {
     max-width: ${({ $numberOfExtraButtons }) => `calc(100% - ${$numberOfExtraButtons * (EXTRA_BTN_SIZE + EXTRA_BTN_MARGIN * 2)}px)`};
   }
@@ -135,6 +145,21 @@ const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
           mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
         }
       }
+
+      ${IconButton} {
+        padding: 0;
+        width: 18px;
+        height: 18px;
+        transition: background-color 0.3s;
+
+        svg {
+          height: 14px;
+        }
+
+        &:hover {
+          background-color: ${theme.color.light[600]};
+        }
+      }
     }
   }
 `
@@ -160,33 +185,36 @@ export function TabManager<T, Key extends React.Key>(
   const tabItems = useMemo(() => tabs.map((tab) => (
     <li key={keygen(tab)} className={keygen(tab) === active ? 'active' : undefined} onClick={onClickTab}>
       <button className="label" onClick={() => onSelect(tab)}><FadingOverflow>{renderLabel(tab)}</FadingOverflow></button>
-      {tabs.length > 1 && <IconButton icon="TimesMini" aria-label={t.close} title={t.close} onClick={() => onRemove(tab)} />}
+      {tabs.length > 1 && <IconButton aria-label={t.close} title={t.close} onClick={() => onRemove(tab)}><TimesMini /></IconButton>}
     </li>
   )), [tabs, active])
 
-  const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, group, icon, className, style }) => (
+  const extras = useMemo(() => buttons.map(({ ariaLabel, label, onClick, icon, className, style }) => (
     <>
       {label ? 
         <Button 
-          style={{ ...style, paddingLeft: 0, marginRight: '4px', fontWeight: '400' }}
+          sx={{ paddingLeft: 0, marginRight: '4px', fontWeight: '400' }}
           colorScheme="light"
           size="md"
           key={ariaLabel} 
           title={label} 
+          style={style} 
           onClick={onClick}>
-          <IconBox group={group} icon={icon as any} size="sm" style={{ width: '32px', height: '16px', paddingInline: '8px' }} />
+          <IconBox size="sm" sx={{ width: '32px', height: '16px', paddingInline: '8px' }} >
+            {icon} 
+          </IconBox>
           {label} 
         </Button> : 
         <IconButton
           key={ariaLabel}
-          group={group}
-          icon={icon as any}
           aria-label={ariaLabel}
           title={label}
           className={listToClass([className, 'extra'])}
           style={style}
           onClick={onClick}
-        />}
+        >
+          {icon}
+        </IconButton>}
     </>)), [buttons])
 
   // when a new tab is added, we should scroll to it if there are more tabs that we can show.

package/src/components/ToolBadge.tsx

@@ -1,58 +1,148 @@
-import { Icon } from '@stack-spot/citric-icons'
-import { Accordion, Card, ImageBox, ImageWithFallback, Text } from '@stack-spot/citric-react'
-import { theme } from '@stack-spot/portal-theme'
+import { IconBox, Text } from '@citric/core'
+import { ChevronDown, Cog } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ColorSchemeKey, listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { get } from 'lodash'
+import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
 import { styled } from 'styled-components'
+import { FastOmit } from 'styled-components/dist/types'
 import { toPrecision } from '../views/Steps/utils'
 
-type Props = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & {
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
   name: string,
   duration?: number,
   image?: string,
   description?: string,
+  appearance?: 'round' | 'square',
+  backgroundColor?: ColorSchemeKey,
 }
 
-const Styled = styled.div`
-  [data-citric="card"] {
-    flex-direction: row;
-    gap: 8px;
-    border-radius: ${theme.radius.xl};
-    border: none;
-    align-items: center;
-    padding: 4px 16px 4px 4px;
+const Styled = styled.div<{ $backgroundColor: ColorSchemeKey }>`
+ .tool-header-wrapper {
+    background-color: ${({ $backgroundColor }) => get(theme.color, $backgroundColor)};
+    border-radius: 8px;
   }
+ 
+  .tool-header {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    position: relative;
 
-  [data-citric="accordion"] {
-    background-color: ${theme.color.light[500]};
-    > header > label {
-      padding: 6px 10px 6px 6px;
-      font: ${theme.font.body2};
-      input:before {
-        font-size: 12px !important;
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .tool-image {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .btn-expand {
+      display: none;
+    }
+
+    .duration {
+      opacity: 0.7;
+      text-align: right;
+    }
+  }
+
+  &.with-description {
+    .tool-header {
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .btn-expand {
+        display: flex;
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &.round {
+    .tool-header-wrapper {
+      border-radius: 30px;
+    }
+    &:not(.with-description) {
+      .tool-header-wrapper {
+        padding-right: 10px;
       }
     }
   }
 `
 
 export const ToolBadge = (
-  { name, duration, image, description, ...props }: Props,
+  { name, duration, image, description, appearance = 'square', backgroundColor = 'light.300', className, ...props }: Props,
 ) => {
-  const header = <>
-    <ImageBox><ImageWithFallback src={image} fallback={<Icon icon="Cog" className="tool-image" />} /></ImageBox>
-    <Text color="light.700" className="name" style={{ flex: 1 }}>{name}</Text>
-    {duration !== undefined && <Text color="light.700" className="duration">
-      {toPrecision(duration)}s
-    </Text>}
-  </>
-    
-  return <Styled>
-    {description ? (
-      <Accordion
-        appearance="card"
-        header={header}
-        {...props}
-      >
-        <Text className="description" color="light.700">{description}</Text>
-      </Accordion>
-    ) : <Card {...props}>{header}</Card>}
-  </Styled>
+  const t = useTranslate(dictionary)
+  const [showDescription, setShowDescription] = useState(false)
+  const rootClass = listToClass([className, appearance, description && 'with-description'])
+  const wrapperClass = 'tool-header-wrapper'
+
+  const content = (
+    <div className="tool-header">
+      <div className="title">
+        {image ? <img src={image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
+        <Text colorScheme="light.700" className="name">{name}</Text>
+        {duration !== undefined && <Text colorScheme="light.700" className="duration">
+          {toPrecision(duration)}s
+        </Text>}
+        <IconButton
+          size="xs"
+          className={listToClass(['btn-expand', showDescription && 'open'])}
+          onClick={() => setShowDescription(v => !v)}
+          aria-label={showDescription ? t.close : t.open}
+        >
+          <ChevronDown />
+        </IconButton>
+      </div>
+      {showDescription && <Text className="description" colorScheme="light.700">{description}</Text>}
+    </div>
+  )
+
+  return (
+    <Styled {...props} $backgroundColor={backgroundColor} className={rootClass}>
+      {description ? <AnimatedHeight className={wrapperClass}>{content}</AnimatedHeight> : <div className={wrapperClass}>{content}</div>}
+    </Styled>
+  )
 }
+
+const dictionary = {
+  en: {
+    open: 'Open',
+    close: 'Close',
+  },
+  pt: {
+    open: 'Abrir',
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react/display-name */
+import { Text } from '@citric/core'
+import { WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef } from 'react'
+import { WithChildren } from '../../types'
+import { useTooltip } from './context'
+import { DefaultTooltip } from './style'
+import { TooltipPosition } from './types'
+
+interface Props extends WithChildren, WithStyle {
+  /**
+   * The content of the tooltip. Can be either a string or a Rect Element.
+   */
+  content: React.ReactNode,
+  /**
+   * Where to position the tooltip relative to the element that triggered it.
+   */
+  position?: TooltipPosition,
+  /**
+   * A tooltip can be triggered either by hovering an element or by clicking it.
+   * @default 'hover'
+   */
+  triggeredBy?: 'click' | 'hover',
+  /**
+   * If true, no style is applied to the tooltip, letting you customize it however you want to.
+   */
+  custom?: boolean,
+  /**
+   * Function to run whenever the tooltip is shown.
+   */
+  onShow?: () => void,
+  /**
+   * Function to run whenever the tooltip is hidden.
+   */
+  onHide?: () => void,
+}
+
+/**
+ * Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
+ * hidden overflows in the children and its ascendants.
+ */
+export const Tooltip = forwardRef<HTMLDivElement, Props>((
+  { content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style },
+  ref,
+) => {
+  const api = useTooltip()
+
+  async function show(e: React.UIEvent, hideOnClickOutside?: boolean) {
+    await api.show({
+      content: custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
+      anchor: e.target as HTMLElement,
+      position,
+      hideOnClickOutside,
+    })
+    onShow?.()
+  }
+
+  function hide() {
+    api.hide()
+    onHide?.()
+  }
+
+  return (
+    <div
+      {...(triggeredBy === 'hover'
+        ? { onMouseEnter: show, onMouseLeave: hide }
+        : { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }
+      )}
+      className={className}
+      style={style}
+      tabIndex={triggeredBy === 'click' ? 0 : undefined}
+      role={triggeredBy === 'click' ? 'button' : undefined}
+      ref={ref}
+    >
+      {children}
+    </div>
+  )
+})

package/src/components/Tooltip/TooltipAPI.ts

@@ -0,0 +1,101 @@
+import { delay } from '@stack-spot/portal-components'
+import { animationTimeMS } from './style'
+import { ShowOptions } from './types'
+
+// the maximum amount of pixels a tooltip can get close to the screen edges.
+const MARGIN_TO_CORNERS_PX = 10
+
+function isRelative(element: HTMLElement) {
+  return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '')
+}
+
+/**
+ * Allows interaction with the tooltip element.
+ * 
+ * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
+ * 
+ * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
+ */
+export class TooltipAPI {
+  /**
+   * A reference to the tooltip element in the HTML tree.
+   */
+  tooltipRef: React.RefObject<HTMLDivElement>
+  private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
+  private hideTimeoutId: number | undefined
+  private clickListener: ((e: MouseEvent) => void) | undefined
+  private relativeTo: HTMLElement | undefined
+
+  constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>) {
+    this.tooltipRef = tooltipRef
+    this.setContent = setContent
+  }
+
+  private computeRelativeTo() {
+    if (this.relativeTo) return
+    this.relativeTo = this.tooltipRef.current?.parentElement as HTMLElement
+    while (this.relativeTo && this.relativeTo !== document.body && !isRelative(this.relativeTo)) {
+      this.relativeTo = this.relativeTo.parentElement as HTMLElement
+    }
+  }
+
+  /**
+   * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
+   */
+  async show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions) {
+    window.clearTimeout(this.hideTimeoutId)
+    this.hideTimeoutId = undefined
+    if (this.clickListener) document.removeEventListener('click', this.clickListener)
+    this.setContent(content)
+    await delay(10)
+    if (!this.tooltipRef.current) return
+    const anchorRect = anchor.getClientRects()[0]
+    this.tooltipRef.current.classList.add('visible')
+    const tooltipWidth = this.tooltipRef.current.clientWidth
+    const tooltipHeight = this.tooltipRef.current.clientHeight
+    let top = 0
+    let left = 0
+    if (position === 'left' || position === 'right') {
+      top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
+      if (position === 'left') left = anchorRect.left - tooltipWidth
+      else left = anchorRect.left + anchorRect.width
+    } else {
+      left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
+      if (position === 'top') top = anchorRect.top - tooltipHeight
+      else top = anchorRect.top + anchorRect.height
+    }
+    // takes the parent the tooltip is positioned relative to into consideration
+    this.computeRelativeTo()
+    const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
+    top -= relativeRect.top
+    left -= relativeRect.left
+    // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+    if (top <= 0) top += MARGIN_TO_CORNERS_PX
+    else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+      top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
+    }
+    if (left <= 0) left += MARGIN_TO_CORNERS_PX
+    else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+      left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
+    }
+    this.tooltipRef.current.style.top = `${top}px`
+    this.tooltipRef.current.style.left = `${left}px`
+    if (hideOnClickOutside) {
+      this.clickListener = (e: MouseEvent) => {
+        if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
+        this.hide()
+      }
+      document.addEventListener('click', this.clickListener)
+    }
+  }
+
+  /**
+   * Hides the tooltip. After the animation, the content is removed.
+   */
+  hide(): void {
+    if (!this.tooltipRef.current) return
+    this.tooltipRef.current.classList.remove('visible')
+    this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS)
+    if (this.clickListener) document.removeEventListener('click', this.clickListener)
+  }
+}

package/src/components/Tooltip/context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo, useRef, useState } from 'react'
+import { WithChildren } from '../../types'
+import { TooltipBox } from './style'
+import { TooltipAPI } from './TooltipAPI'
+
+const Context = createContext<TooltipAPI | undefined>(undefined)
+
+export const TooltipProvider = ({ children }: Required<WithChildren>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [content, setContent] = useState<React.ReactNode>()
+  const api = useMemo(() => new TooltipAPI(ref, setContent), [])
+  return (
+    <Context.Provider value={api}>
+      {children}
+      <TooltipBox ref={ref}>{content}</TooltipBox>
+    </Context.Provider>
+  )
+}
+
+export function useTooltip() {
+  const api = useContext(Context)
+  if (!api) throw new Error('In order to use tooltips, you must wrap your content in a <TooltipProvider>.')
+  return api
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { TooltipProvider } from './context'
+export { Tooltip } from './Tooltip'