@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/components/ButtonFavorite.tsx

@@ -0,0 +1,78 @@
+import { BaseFavoriteProps, Favorite } from '@stack-spot/citric-react'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useState } from 'react'
+import { dictionaryFavorites } from './form/dictionary'
+
+export interface ItemFavorite {
+  id?: string,
+  slug?: string,
+}
+
+export interface Favorite<T extends ItemFavorite> {
+  /**
+   * id or slug to be used on functions
+   */
+  idOrSlug: string,
+  /**
+   * Array containing the list of favorite items.
+   */
+  listFavorites?: T[], 
+  /**
+   * Function to add an item to the list of favorites.
+   * @param idOrSlug - The ID or slug of the content to be added to the favorites list.
+   * @returns void
+   */
+  onAddFavorite?: (idOrSlug: string) => Promise<boolean>, 
+  /**
+   * Function to remove an item from the list of favorites.
+   * @param idOrSlug - The ID or slug of the content to be removed from the favorites list.
+   * @returns void
+   */
+  onRemoveFavorite?: (idOrSlug: string) => Promise<boolean>, 
+}
+
+interface Props<T extends ItemFavorite> {
+  /**
+   * An object containing favorite items and related operations.
+  */
+ favorite: Favorite<T>,
+ /**
+  * @default 'square'
+  */
+ appearance?: BaseFavoriteProps['appearance'],
+}
+
+export const ButtonFavorite = <T extends ItemFavorite>({ favorite, appearance = 'square' }: Props<T>) => {
+  const [isFavorite, setIsFavorite] = useState(false)
+  const { idOrSlug, listFavorites } = favorite || {}
+
+  useEffect(() => {
+    setIsFavorite(!!listFavorites?.some((fav) => fav.slug === idOrSlug || fav.id === idOrSlug))
+  }, [listFavorites])
+
+  return (
+    <ButtonWrapper isFavorite={isFavorite} favorite={favorite} appearance={appearance} />
+  )
+}
+
+const ButtonWrapper = <T extends ItemFavorite>({ isFavorite, favorite, appearance }: 
+  { isFavorite: boolean, favorite: Favorite<T>, appearance: BaseFavoriteProps['appearance'] }) => {
+  const t = useTranslate(dictionaryFavorites)
+  const { idOrSlug, onAddFavorite, onRemoveFavorite } = favorite
+  const [loading, setLoading] = useState(false)
+
+  const handleAction = async (idOrSlug: string, action?: (idOrSlug: string) => Promise<boolean>) => {
+    setLoading(true)
+    await action?.(idOrSlug)
+    setLoading(false)    
+  }
+
+  return <Favorite
+    loading={loading}
+    appearance={appearance}
+    aria-label={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    title={`${t[isFavorite ? 'remove' : 'become']} ${t.favorite}`}
+    value={isFavorite}
+    onChange={checked => handleAction(idOrSlug, checked ? onAddFavorite : onRemoveFavorite)}
+  />
+}

package/src/components/Code.tsx

@@ -2,8 +2,7 @@
  * Copied from the extension's webview.
  */
 
-import { AddCode, ChevronDoubleDown, Collapse, Copy } from '@citric/icons'
-import { IconButton } from '@citric/ui'
+import { IconButton, Text } from '@stack-spot/citric-react'
 import { theme, useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { CSSProperties, useState } from 'react'
@@ -12,6 +11,8 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'
 import { WithChildren } from '../types'
+import { copyTextToClipboardWithFallback } from '../utils/copy-to-clipboard'
+import { languages } from '../utils/programming-languages'
 
 export type CodeAction = (
   code: string,
@@ -29,6 +30,7 @@ export interface Props extends WithChildren {
   onNewFile?: CodeAction,
   onCopyCode?: CodeAction,
   language?: string,
+  showLineNumbers?: boolean,
 }
 
 const CodeBox = styled.code`
@@ -52,23 +54,34 @@ const CodeBox = styled.code`
     }
   }
 
-  .action-bar {
+  .header-code {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     background: ${theme.color.light[600]};
     padding: 4px 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 
-    button {
-      background: transparent;
-      border: none;
-      opacity: 0.75;
-      transition: opacity 0.2s;
+    .action-bar {
+      display: flex;
+      flex-direction: row;
+     
+      button {
+        background: transparent;
+        border: none;
+        opacity: 0.75;
+        transition: opacity 0.2s;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
 
-      &:hover {
-        opacity: 1;
+      .copy-btn {
+        &:after {
+          left: -30px; // prevents scrolling in the horizontal axis.
+        }
       }
     }
   }
@@ -98,14 +111,16 @@ export const Code = ({
   language,
   children,
   showActionBar,
+  showLineNumbers = true,
   ...props
 }: Pick<CodeProps, 'className' | 'messageId'> & Props) => {
   const t = useTranslate(dictionary)
   const themeKind = useThemeKind()
-  const [showLines, setShowLines] = useState(true)
+  const [showLines, setShowLines] = useState(showLineNumbers)
   const match = /language-(\w+)/.exec(className || '')
   const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
   const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
+  const languageExtension = languages.find(l => l.value === computedLanguage)?.extensions?.[0] ?? '.txt'
 
   function onClickInsert() {
     onInsertCode?.(content, computedLanguage)
@@ -117,14 +132,11 @@ export const Code = ({
 
   function onClickCopy() {
     onCopyCode?.(content, computedLanguage)
-    // try-catch because the client may not support `navigator.clipboard`. Example: Chromium Embedded Browser (CEF).
-    try {
-      navigator.clipboard.writeText(content)
-    } catch { /* empty */ }
+    copyTextToClipboardWithFallback(content)
   }
 
   if (children === undefined) return <></>
-  if (!(/language-(\w+)/.exec(className || ''))) {
+  if (computedLanguage === 'txt') {
     return (
       <code {...props} className={className}>
         {children}
@@ -133,49 +145,66 @@ export const Code = ({
   }
 
   return (
-    <CodeBox className={['code-box', themeKind].join(' ')}>
+    <CodeBox className={['code-box', themeKind, className].join(' ')}>
       {showActionBar && (
-        <div className="action-bar" role="toolbar">
-          <IconButton
-            aria-label={showLines ? t.hideLines : t.showLines}
-            title={showLines ? t.hideLines : t.showLines}
-            onClick={() => setShowLines(v => !v)}
-            style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
-          >
-            <Collapse />
-          </IconButton>
-          <IconButton
-            aria-label={t.copy}
-            title={t.copy}
-            onClick={onClickCopy}
-            style={{ position: 'relative' }}
-          >
-            <Copy />
-          </IconButton>
-          {onInsertCode
-            ? (
-              <IconButton
-                aria-label={t.insert}
-                title={t.insert}
-                onClick={onClickInsert}
-                style={{ position: 'relative' }}
-              >
-                <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
-              </IconButton>
-            )
-            : null}
-          {onNewFile
-            ? (
-              <IconButton
-                aria-label={t.newFile}
-                title={t.newFile}
-                onClick={onClickNewFile}
-                style={{ position: 'relative' }}
-              >
-                <AddCode />
-              </IconButton>
-            )
-            : null}
+        <div className="header-code">
+          <div>
+            <Text appearance="code2">{computedLanguage ?? ''}</Text>
+          </div>
+          <div className="action-bar" role="toolbar">
+            <IconButton
+              icon="Collapse"
+              aria-label={showLines ? t.hideLines : t.showLines}
+              title={showLines ? t.hideLines : t.showLines}
+              onClick={() => setShowLines(v => !v)}
+              style={{ position: 'relative', transform: showLines ? undefined : 'rotate(180deg)', transition: 'transform 0.2s' }}
+            />
+            <IconButton
+              icon="Download"
+              aria-label={t.downloadCode}
+              title={t.downloadCode}
+              onClick={() => {
+                try {
+                  const extension = languageExtension
+                  const filename = `download${extension}`
+                  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+                  const link = document.createElement('a')
+                  link.href = URL.createObjectURL(blob)
+                  link.download = filename
+                  document.body.appendChild(link)
+                  link.click()
+                  document.body.removeChild(link)
+                  URL.revokeObjectURL(link.href)
+                } catch (e) {
+                  // eslint-disable-next-line no-console
+                  console.error(t.downloadError, e)
+                }
+              }}
+            />
+            <IconButton
+              icon="Copy"
+              aria-label={t.copy}
+              title={t.copy}
+              onClick={onClickCopy}
+              style={{ position: 'relative' }}
+              feedback={t.copied}
+              className="copy-btn"
+            />
+            {onInsertCode ? <IconButton
+              icon="ChevronDoubleDown"
+              aria-label={t.insert}
+              title={t.insert}
+              onClick={onClickInsert}
+              style={{ position: 'relative', transform: 'rotate(90deg)' }}
+            /> : null}
+            {onNewFile ? <IconButton
+              icon="AddCode"
+              aria-label={t.newFile}
+              title={t.newFile}
+              onClick={onClickNewFile}
+              style={{ position: 'relative' }}
+            /> : null}
+          </div>
         </div>
       )}
       <div>
@@ -199,16 +228,22 @@ export const Code = ({
 const dictionary = {
   en: {
     copy: 'Copy code to the clipboard',
+    copied: 'Copied',
     insert: 'Inject code into editor',
     newFile: 'Creates a new file with this code as its content',
     hideLines: 'Hide line numbers',
     showLines: 'Show line numbers',
+    downloadCode: 'Download the code',
+    downloadError: 'Error downloading code',
   },
   pt: {
     copy: 'Copiar código para a área de transferência',
+    copied: 'Copiado',
     insert: 'Inserir código no editor',
     newFile: 'Criar um novo arquivo com este código como conteúdo',
     hideLines: 'Esconder números das linhas',
     showLines: 'Mostrar números das linhas',
+    downloadCode: 'Fazer download do código',
+    downloadError: 'Erro ao fazer download do código',
   },
 } satisfies Dictionary

package/src/components/ComponentNavigator.tsx

@@ -0,0 +1,99 @@
+import { IconButton, Row } from '@stack-spot/citric-react'
+import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+
+/**
+ * Map of string keys to React components.
+ */
+export type NavigationMap = Record<string, React.ComponentType<any>>
+
+/**
+ * Navigation component describing which component to render and its props.
+ */
+export type NavigationComponent<T extends NavigationMap, K extends keyof T = keyof T> = {
+  /** Component key to render. */
+  component: K,
+
+  /** Props for the component. */
+  props?: T[K] extends React.ComponentType<infer P> ? P : never,
+
+  /** Render in fullscreen mode. */
+  fullScreen?: boolean,
+}
+
+export interface NavigationContextType<T extends NavigationMap> {
+  /** Navigate to a new component. */
+  navigate: <K extends keyof T>(item: NavigationComponent<T, K>) => Promise<void>,
+
+  /** Go back to previous component. */
+  goBack: () => void,
+
+  /** True if can go back. */
+  canGoBack: boolean,
+
+  /** Current component. */
+  currentItem: NavigationComponent<T>,
+}
+
+export interface ComponentNavigatorProps<T extends NavigationMap, K extends keyof T> {
+  /** Initial component to render. */
+  initialItem: NavigationComponent<T, K>,
+  
+   /** Map of available components. */
+  components: T,
+
+  /** Optional title renderer. */
+  renderTitle?: (item: NavigationComponent<T, keyof T>) => React.ReactNode,
+  
+   /** Optional CSS class. */
+  className?: string,
+}
+
+const NavigationContext = createContext<NavigationContextType<NavigationMap> | null>(null)
+
+export function ComponentNavigator<T extends NavigationMap, K extends keyof T>({
+  initialItem,
+  components,
+  renderTitle,
+  className,
+}: ComponentNavigatorProps<T, K>) {
+  const [navigationStack, setNavigationStack] = useState<NavigationComponent<T>[]>([initialItem])
+  const currentItem = navigationStack[navigationStack.length - 1]
+
+  const navigate = useCallback((item: NavigationComponent<T>) => { setNavigationStack((prev) => [...prev, item]) }, [])
+  const canGoBack = navigationStack.length > 1
+  const goBack = useCallback(() => {
+    if (canGoBack) {
+      setNavigationStack((prev) => prev.slice(0, -1))
+    }
+  }, [canGoBack])
+
+  const navigationContext = useMemo(() => ({ navigate, goBack, canGoBack, currentItem }), [navigate, goBack, canGoBack, currentItem])
+  const Component = components[currentItem.component]
+  const isFullScreen = currentItem.fullScreen
+
+  if (!Component) {
+    // eslint-disable-next-line no-console
+    console.error(`Componente not found: ${String(currentItem.component)}`)
+  }
+
+  return (<NavigationContext.Provider value={navigationContext as NavigationContextType<NavigationMap>}>
+    <div className={`content-navigator ${className || isFullScreen ? 'full' : ''}`} role="navigation">
+      {canGoBack && (
+        <Row gap="12px" style={{ alignSelf: 'stretch' }}>
+          <IconButton icon="ArrowLeft" onClick={goBack} className="back-button" aria-label="Back" />
+          {renderTitle?.(currentItem)}
+        </Row>
+      )}
+      <Component {...(currentItem.props as any)} />
+    </div>
+  </NavigationContext.Provider>
+  )
+}
+
+export function useComponentNavigation<T extends NavigationMap>(): NavigationContextType<T> {
+  const context = useContext(NavigationContext)
+  if (!context) {
+    throw new Error('useComponentNavigation should be used inside ComponentNavigator')
+  }
+  return context
+}

package/src/components/Fading.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/display-name */
+import { WithStyle } from '@stack-spot/portal-theme'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import { WithChildren } from '../types'
+
+interface Props extends WithChildren, WithStyle {
+  /**
+   * Whether or not the content is visible.
+   */
+  visible: boolean,
+  /**
+   * Duration of the animation in ms.
+   * @default 300
+   */
+  duration?: number,
+  /**
+   * Function to run right before animation to show the content starts.
+   */
+  beforeFadeIn?: () => void,
+  /**
+   * Function to run right before animation to hide the content starts.
+   */
+  beforeFadeOut?: () => void,
+  /**
+   * Function to run right after the animation to show the content ends.
+   */
+  afterFadeIn?: () => void,
+  /**
+   * Function to run right after the animation to hide the content ends.
+   */
+  afterFadeOut?: () => void,
+}
+
+export const Fading = forwardRef<HTMLDivElement, Props>((
+  { visible, children, duration = 300, afterFadeIn, afterFadeOut, beforeFadeIn, beforeFadeOut, className, style },
+  ref,
+) => {
+  const [isOpaque, setOpaque] = useState(visible)
+  const [isRendered, setRendered] = useState(visible)
+  const previous = useRef(visible)
+  const timeout = useRef<number[]>([])
+  const opacity: React.CSSProperties = { transition: `opacity ${duration / 1000}s`, opacity: isOpaque ? 1 : 0 }
+
+  useEffect(() => {
+    if (previous.current === visible) return
+    timeout.current.forEach(window.clearTimeout)
+    timeout.current = []
+    if (visible) {
+      setRendered(true)
+      if (afterFadeIn) timeout.current.push(window.setTimeout(afterFadeIn, duration))
+      beforeFadeIn?.()
+      timeout.current.push(window.setTimeout(() => setOpaque(true), 0))
+      
+    } else {
+      setOpaque(false)
+      beforeFadeOut?.()
+      timeout.current.push(window.setTimeout(() => {
+        setRendered(false)
+        afterFadeOut?.()
+      }, duration))
+    }
+    previous.current = visible
+  }, [visible])
+
+  return isRendered ? <div ref={ref} className={className} style={{ ...style, ...opacity }}>{children}</div> : null
+})

package/src/components/FadingOverflow.tsx

@@ -1,5 +1,4 @@
-import { IconBox } from '@citric/core'
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@citric/icons'
+import { Icon } from '@stack-spot/citric-icons'
 import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { debounce } from 'lodash'
 import { useEffect, useRef } from 'react'
@@ -10,17 +9,43 @@ type Side = 'top' | 'right' | 'left' | 'bottom'
 type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
 
 interface Props extends WithChildren, WithStyle {
+  /**
+   * How to scroll the content.
+   * - none: overflow is hidden. No scrolling.
+   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+   * There are no scrollbars in this scenario.
+   * @default 'none'
+   */
   scroll?: ScrollType,
+  /**
+   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+   * @default false
+   */
   enableHorizontalScrollWithVerticalWheel?: boolean,
+  /**
+   * Which sides to fade when the content overflows.
+   * 
+   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+   * believed combining linear gradients would work, but it doesn't.
+   */
   sides?: Side[],
 }
 
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
 const MIN_CHECK_INTERVAL_MS = 20
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4
+// Fade masks
 const masks = {
   right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
   left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  top: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
-  bottom: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  top: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
+  bottom: 'linear-gradient(to bottom, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
   horizontal: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
   vertical: 'linear-gradient(to top, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgb(0, 0, 0) max(70%, calc(100% - 100px)), rgba(0, 0, 0, 0) 100%)',
 }
@@ -54,7 +79,7 @@ const OverflowBox = styled.div`
     pointer-events: none;
     transition: opacity 0.3s;
 
-    ${IconBox} {
+    .citric-icon {
       background-color: ${theme.color.light[300]};
       border-radius: 50%;
       width: 16px;
@@ -95,9 +120,11 @@ const OverflowBox = styled.div`
   }
 `
 
-const SCROLL_INTERVAL_MS = 20
-const SCROLL_PX = 4
-
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ * 
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
 export const FadingOverflow = (
   { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
 ) => {
@@ -225,10 +252,10 @@ export const FadingOverflow = (
   return scroll === 'arrows' ? (
     <OverflowBox {...props} className={listToClass(['scroll-arrows', className])}>
       <div className="content" ref={ref}>{children}</div>
-      <div className="scroll-to-left" aria-hidden><IconBox size="xs"><ChevronLeft /></IconBox></div>
-      <div className="scroll-to-right" aria-hidden><IconBox size="xs"><ChevronRight /></IconBox></div>
-      <div className="scroll-to-top" aria-hidden><IconBox size="xs"><ChevronUp /></IconBox></div>
-      <div className="scroll-to-bottom" aria-hidden><IconBox size="xs"><ChevronDown /></IconBox></div>
+      <div className="scroll-to-left" aria-hidden><Icon icon="ChevronLeft" size="xs" /></div>
+      <div className="scroll-to-right" aria-hidden><Icon icon="ChevronRight" size="xs" /></div>
+      <div className="scroll-to-top" aria-hidden><Icon icon="ChevronUp" size="xs" /></div>
+      <div className="scroll-to-bottom" aria-hidden><Icon icon="ChevronDown" size="xs" /></div>
     </OverflowBox>
   ) : <OverflowBox {...props} className={className} ref={ref}>{children}</OverflowBox>
 }