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

package/src/components/FileDescription.tsx

@@ -0,0 +1,118 @@
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, ProgressCircular, Text } from '@stack-spot/citric-react'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { FileUploadStatus } from '../utils/upload/types'
+
+export interface FileDescriptionProps {
+  fileName: string,
+  icon?: React.ReactNode,
+  status?: FileUploadStatus,
+  onRemove?: () => void,
+  onRetry?: () => void,
+}
+
+const Styled = styled.div`
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  gap: 8px;
+  background-color: ${theme.color.light[600]};
+  box-sizing: border-box;
+  &.error {
+    border: 1px solid ${theme.color.danger[500]};
+  }
+  &.pending .status {
+    cursor: progress;
+  }
+  .image {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: ${theme.color.light[500]};
+    width: 28px;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    img {
+      width: 100%;
+    }
+    .status {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.5);
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      button {
+        padding: 2px;
+      }
+    }
+  }
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    small {
+      max-width: 100px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1;
+    }
+  }
+  button {
+    padding: 0;
+    margin: -2px -2px 0 0;
+  }
+`
+
+export const FileDescription = ({ fileName, icon, status, onRemove, onRetry }: FileDescriptionProps) => {
+  const t = useTranslate(dictionary)
+  const [, name, extension] = fileName.match(/(.+)\.([^.]+)$/) ?? ['', 'Unknown', 'Unknown']
+  return (
+    <Styled className={status} aria-busy={status === 'pending'}>
+      <div className="image">
+        {icon ?? <Icon icon="Document" />}
+        {status === 'pending' && <div className="status" aria-label={t.loading}>
+          <ProgressCircular size="xs" />
+        </div>}
+        {status === 'error' && <div className="status" aria-label={t.error}>
+          <IconButton icon="Sync" appearance="circle" color="danger" title={t.retry} aria-label={t.retry} onClick={onRetry} />
+        </div>}
+      </div>
+      <div className="details">
+        <Text appearance="microtext1" className="name" title={name}>{name}</Text>
+        <Text appearance="microtext1" color="light.700">{extension.toUpperCase()}</Text>
+      </div>
+      {onRemove && <IconButton
+        icon="TimesMini"
+        onClick={onRemove}
+        title={t.remove}
+        arial-label={`${t.remove} ${name}`}
+        style={{ alignSelf: 'start' }}
+        size="xs"
+      />}
+    </Styled>
+  )
+}
+
+const dictionary = {
+  en: {
+    loading: 'Uploading file',
+    retry: 'Retry failed upload',
+    remove: 'Remove',
+    error: 'Error while uploading file',
+  },
+  pt: {
+    loading: 'Carregando arquivo',
+    retry: 'Tentar subir novamente o arquivo com falha',
+    remove: 'Remover',
+    error: 'Erro ao carregar o arquivo',
+  },
+} satisfies Dictionary

package/src/components/HistoryList.tsx

@@ -1,18 +1,30 @@
-/* eslint-disable no-empty-pattern */
-import { Text } from '@citric/core'
+import { Text } from '@stack-spot/citric-react'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy, map } from 'lodash'
 import { useMemo } from 'react'
 import { styled } from 'styled-components'
+import { useMidnightUpdateView } from '../hooks/midnight-update-view'
 import { subtractDays } from '../utils/date'
 
 type HistorySectionName = 'today' | 'yesterday' | 'last7' | 'last30' | 'older'
 
 interface Props<T> extends WithStyle {
+  /**
+   * The items in the history.
+   */
   items: T[],
+  /**
+   * A function to render an item.
+   */
   renderItem: (item: T) => React.ReactNode,
+  /**
+   * A function that returns the date of the item.
+   */
   getDate: (item: T) => Date,
+  /**
+   * A function that returns a unique id for the item.
+   */
   keygen: (item: T) => React.Key,
 }
 
@@ -53,8 +65,13 @@ function dateToSectionName(date: Date): HistorySectionName {
   return date.getTime() >= last30Days.getTime() ? 'last30' : 'older'
 }
 
+/**
+ * Renders a history list, where the items are combined into sections according to their dates.
+ */
 export function HistoryList<T>({ getDate, items, keygen, className, style, renderItem }: Props<T>) {
   const t = useTranslate(dictionary)
+  useMidnightUpdateView()
+  
   const sections = useMemo(() => {
     const byDate = groupBy(items, item => dateToSectionName(getDate(item)))
     return map(byDate, (value: T[], key: HistorySectionName) => (

package/src/components/ListResource.tsx

@@ -0,0 +1,60 @@
+import { Row, Text } from '@stack-spot/citric-react'
+import { WithStyle } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+
+/**
+ *
+ * @template T Type of list item.
+ */
+interface ListGroupProps<T> extends WithStyle {
+
+  /** Items to show. */
+  list: T[],
+  
+  /** Render the label for an item. */
+  renderLabel: (item: T) => React.ReactNode,
+
+  /** Optional: element before label. */
+  renderBeforeElement?: (item: T) => React.ReactNode,
+
+  /** Optional: element after label. */
+  renderAfterElement?: (item: T) => React.ReactNode,
+
+  /** Optional: custom class name per item. */
+  optionClassName?: (item: T) => string | undefined,
+
+  /** Optional: custom style per item. */
+  optionStyle?: (item: T) => React.CSSProperties | undefined,
+
+  /** Unique key for each item. */
+  keygen: (item: T) => React.Key,
+}
+
+/**
+ * Renders a customizable list of items.
+ *
+ * @template T Type of list item.
+ */
+export function ListResource<T>({ list, renderLabel, renderBeforeElement, renderAfterElement, className, keygen, style }
+  : ListGroupProps<T>) {
+  const items = useMemo(() =>
+    list.map((listItem) => {
+      const label = renderLabel(listItem)
+      const content = typeof label === 'string' ? <Text>{label}</Text> : label
+      return (
+        <li key={keygen(listItem)}>
+          <Row>
+            {renderBeforeElement?.(listItem)}
+            {content}
+            {renderAfterElement?.(listItem)}
+          </Row>
+        </li>
+      )
+    }), [list])
+    
+  return (
+    <ul style={{ margin: 0, padding: 0, width: '100%', ...style }} className={className}>
+      {items}
+    </ul>
+  )
+}

package/src/components/Markdown.tsx

@@ -32,9 +32,10 @@ export const Markdown = (
 ) => (
   <>
     <ReactMarkdown
+      className="markdown apply-citric"
       remarkPlugins={[[remarkGfm]]}
       components={{
-        a: props => <a target="_blank" rel="noopener noreferrer" {...props} />,
+        a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,
         code: props =>
           <Code
             {...props}

package/src/components/Modal.tsx

@@ -0,0 +1,85 @@
+import { IconButton, Text } from '@stack-spot/citric-react'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { AnimatedOpacity } from './AnimatedOpacity'
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[],
+  title: React.ReactNode,
+  open: boolean,
+  onClose?: () => void,
+}
+
+const ModalContent = ({ title, children, onClose }: Omit<Props, 'open'>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <div className="chat-modal">
+      <header>
+        {typeof title === 'string' ? <Text appearance="h6">{title}</Text> : title}
+        <IconButton icon="Times" aria-label={t.close} title={t.close} onClick={onClose} />
+      </header>
+      <article>{children}</article>
+    </div>
+  )
+}
+
+export const Modal = ({ title, onClose, open, children }: Props) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [closestChat, setClosestChat] = useState<HTMLDivElement | undefined>()
+
+  useEffect(() => {
+    if (!closestChat) {
+      const chat = ref.current?.closest('.ai-chat-widget')
+      if (!chat) throw new Error('Could not find the chat widget (.ai-chat-widget) in the HTML tree.')
+      return setClosestChat(chat as HTMLDivElement)
+    }
+    if (!open) return
+    const chatWindow = closestChat?.querySelector('.chat-window')
+    const rightPanel = closestChat?.querySelector('.chat-right-panel')
+
+    function closeOnClickOutside(event: Event) {
+      const modal = closestChat?.querySelector('.chat-modal')
+      if (modal?.contains(event.target as Node)) return
+      onClose?.()
+    }
+
+    function onPressEsc(event: KeyboardEvent) {
+      if (event.key === 'Escape') onClose?.()
+    }
+
+    chatWindow?.setAttribute('inert', '')
+    rightPanel?.setAttribute('inert', '')
+    closestChat?.addEventListener('click', closeOnClickOutside)
+    document.addEventListener('keydown', onPressEsc)
+
+    return () => {
+      chatWindow?.removeAttribute('inert')
+      rightPanel?.removeAttribute('inert')
+      closestChat?.removeEventListener('click', closeOnClickOutside)
+      document.removeEventListener('keydown', onPressEsc)
+    }
+  }, [open])
+
+  return (
+    <div ref={ref}>
+      {closestChat && createPortal(
+        <AnimatedOpacity visible={open}>
+          <ModalContent title={title} onClose={onClose}>
+            {children}
+          </ModalContent>
+        </AnimatedOpacity>,
+        closestChat,
+      )}
+    </div>
+  )
+}
+
+const dictionary = {
+  en: {
+    close: 'Close',
+  },
+  pt: {
+    close: 'Fechar',
+  },
+} satisfies Dictionary

package/src/components/QuickStartButton.tsx

@@ -1,51 +1,19 @@
-import { IconBox, Text } from '@citric/core'
-import { theme, WithStyle } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, Text } from '@stack-spot/citric-react'
+import { WithStyle } from '@stack-spot/portal-theme'
 import { ButtonAction } from '../types'
 
-interface Props extends ButtonAction, WithStyle {
-  background?: string,
-}
-
-const QuickButton = styled.button<{ $color?: string, $bg?: string }>`
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-  background-color: ${theme.color.light[500]};
-  border: none;
-  color: inherit;
-  flex: 1;
-  border-radius: 4px;
-  border: 2px solid;
-  border-color: ${theme.color.light[500]};
-  transition: border-color 0.3s;
-  cursor: pointer;
-  text-align: left;
+type Props = ButtonAction & WithStyle
 
-  &:hover {
-    border-color: ${theme.color.light[600]};
-  }
-  
-  i {
-    border-radius: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${({ $bg }) => $bg || 'transparent'};
-    ${({ $color }) => $color
-    ? `
-      svg {
-        fill: ${$color};
-      }`
-    : ''
-};
-  }
-`
+export const QuickStartButton = ({ label, onClick, className, group, icon, style }: Props) => {
+  const content = <>
+    {icon && <Icon group={group} icon={icon} aria-hidden />}
+    <Text nowrapEllipsis>{label}</Text>
+  </>
 
-export const QuickStartButton = ({ label, onClick, background, className, color, icon, style }: Props) => (
-  <QuickButton className={className} style={style} onClick={onClick} $color={color} $bg={background}>
-    <IconBox aria-hidden>{icon}</IconBox>
-    <Text>{label}</Text>
-  </QuickButton>
-)
+  return (
+    <Button colorScheme="light" size="md" className={className} style={style} onClick={onClick}>
+      {content}
+    </Button>
+  )
+}

package/src/components/RightPanelContentList.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react'
+import { RightPanelForm } from './RightPanelForm'
+
+interface Props {
+  children: ReactElement,
+}
+
+/**
+ * List content for the right panel.
+ */
+export const RightPanelContentList = ({ children }: Props) => (
+  <RightPanelForm>
+    {children}
+  </RightPanelForm>
+)

package/src/components/RightPanelForm.tsx

@@ -1,7 +1,9 @@
-import { Card } from '@citric/ui'
+import { FallbackBoundary } from '@stack-spot/citric-react'
+import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
+import { panelAnimationTime } from '../right-panel/constants'
 import { PropsOf } from '../types'
-import { FallbackBoundary } from './FallbackBoundary'
+import { AutoFocus } from './AutoFocus'
 
 const Form = styled.form`
   display: flex;
@@ -11,45 +13,85 @@ const Form = styled.form`
   flex: 1;
   gap: 20px;
 
-  > .content {
+  > .content, .content-navigator > .content, .content-navigator:not(.full) {
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
     overflow: hidden;
+    width: 100%;
   }
 
-  > button {
-    margin-right: auto;
+  .content-navigator {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    ul {
+      list-style: none;
+    }
   }
-
-  .search {
-    margin-bottom: 8px;
+  
+  .content-navigator.full  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 25px;
+    gap: 16px;
+    width: calc(100% - 50px);
+    height: calc(100% - 100px);
+    background: ${theme.color.light[300]};
+    
+    ~ .workspace-submit {
+      position: absolute;
+      left: 25px;
+      bottom: 25px;
+    }
   }
 
+  > button {
+    margin-right: auto;
+  }
+  
   .option-list {
     overflow: auto;
+    > .row {
+      gap: 6px;
+      align-items: start;
+    }
+    [data-citric="accordion"] {
+      background-color: ${theme.color.light[400]};
+      flex: 1;
+      > header {
+        min-height: 24px;
+        padding: 8px 10px;
+        align-items: center;
+        p {
+          flex: 1;
+        }
+      }
+    }
   }
 
-  li.filtered-out {
+  .filtered-out {
     opacity: 0.5;
   }
-
-  ${Card} svg {
-    fill: transparent;
-  }
 `
 
+/**
+ * A form that goes into a right panel. This controls style, errors, loading focus and form submission.
+ */
 export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
   <FallbackBoundary>
-    <Form
-      {...props}
-      onSubmit={(e) => {
-        e.preventDefault()
-        onSubmit?.(e)
-      }}
-    >
-      {children}
-    </Form>
+    <AutoFocus delay={panelAnimationTime}>
+      <Form
+        {...props}
+        onSubmit={(e) => {
+          e.preventDefault()
+          onSubmit?.(e)
+        }}
+      >
+        {children}
+      </Form>
+    </AutoFocus>
   </FallbackBoundary>
 )

package/src/components/RightPanelTabs.tsx

@@ -1,40 +1,15 @@
-import { Tabs, TabsItem } from '@citric/ui'
-import { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { Tab, Tabs } from '@stack-spot/citric-react'
+import { useMemo } from 'react'
 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 [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>
-  )
+  const tabItems = useMemo(() => tabs.map(t => ({ ...t, content: <RightPanelForm>{t.content}</RightPanelForm> })), [tabs])
+  return <Tabs tabs={tabItems} equallySized />
 }