@stack-spot/ai-chat-widget 0.10.0 → 1.0.0-dev.1768314799914

package/src/components/ProgressBar.tsx

@@ -1,153 +0,0 @@
-import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
-
-interface Props extends WithStyle {
-  visible?: boolean,
-  shimmer?: boolean,
-  foregroundColor?: string | string[],
-  backgroundColor?: string | string[],
-  shimmerColor?: string | string[],
-}
-
-function gradientFromColorArray(colors: string[]) {
-  if (colors.length === 1) return colors[0]
-  const step = 100 / (colors.length - 1)
-  const partials: string[] = []
-  let current = 0
-  for (const color of colors) {
-    partials.push(`${color} ${Math.ceil(current)}%`)
-    current += step
-  }
-  return `linear-gradient(to right, ${partials.join(', ')})`
-}
-
-const SHIMMER_PADDING = '10px'
-
-const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
-  margin: 7px 0;
-  opacity: 0;
-  transition: opacity 0.5s;
-
-  &.visible {
-    opacity: 1;
-  }
-
-  .shimmer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 10px;
-    position: relative;
-    padding: 0 ${SHIMMER_PADDING};
-    margin: 3px 0;
-
-    .progress-glow {
-      filter: blur(2px);
-      position: absolute;
-      top: 0;
-      left: ${SHIMMER_PADDING};
-      bottom: 0;
-      right: ${SHIMMER_PADDING};
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        height: 3px;
-        display: block;
-        width: 33%;
-        display: block;
-        animation: slide 3s infinite forwards;
-        background: ${({ $fg }) => gradientFromColorArray($fg)};
-      }
-    }
-
-    .colors {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      overflow: hidden;
-      filter: blur(10px);
-
-      ${({ $shimmer }) => `
-        &:before {
-          content: '';
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          width: ${$shimmer.length * 100}%;
-          background: ${gradientFromColorArray($shimmer)};
-          ${$shimmer.length > 2 ? `animation: shimmer-slide ${$shimmer.length}s ease-in infinite alternate;` : ''}
-        }
-          
-        @keyframes shimmer-slide {
-          from {
-            left: 0;
-          }
-          to {
-            left: -${($shimmer.length - 1) * 100}%;
-          }
-        }
-      `}
-    }
-  }
-
-  .progress-bar {
-    height: 2px;
-    width: 100%;
-    background: ${({ $bg }) => gradientFromColorArray($bg)};
-    position: relative;
-    overflow-x: clip;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 33%;
-      height: 100%;
-      background: ${({ $fg }) => gradientFromColorArray($fg)};
-      animation: slide 3s infinite forwards;
-    }
-
-    @keyframes slide {
-      from {
-        margin-left: -33%;
-      }
-      to {
-        margin-left: 100%;
-      }
-    }
-  }
-`
-
-export const ProgressBar = ({
-  visible = true,
-  shimmer,
-  backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500],
-  foregroundColor = shimmer ? ['#FFF0', '#FFF', '#FFF0'] : theme.color.primary[500],
-  shimmerColor = ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4'],
-  className,
-  style,
-}: Props) => {
-  const $bg = Array.isArray(backgroundColor) ? backgroundColor : [backgroundColor]
-  const $fg = Array.isArray(foregroundColor) ? foregroundColor : [...$bg, foregroundColor, ...$bg]
-  const $shimmer = Array.isArray(shimmerColor) ? shimmerColor : [shimmerColor]
-  const progress = <div className="progress-bar"></div>
-  const result = shimmer 
-    ? (
-      <div className="shimmer">
-        <div className="colors"></div>
-        <div className="progress-glow"></div>
-        {progress}
-      </div>
-    )
-    : progress
-  return (
-    <Styled className={listToClass([className, visible && 'visible'])} style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer}>
-      {result}
-    </Styled>
-  )
-}

package/src/components/Tooltip/Tooltip.tsx

@@ -1,36 +0,0 @@
-import { Text } from '@citric/core'
-import { WithStyle } from '@stack-spot/portal-theme'
-import { WithChildren } from '../../types'
-import { useTooltip } from './context'
-import { DefaultTooltip } from './style'
-import { TooltipPosition } from './types'
-
-interface Props extends WithChildren, WithStyle {
-  content: React.ReactNode,
-  position?: TooltipPosition,
-  triggeredBy?: 'click' | 'hover',
-  custom?: boolean,
-}
-
-export const Tooltip = ({ content, custom, position, triggeredBy = 'hover', children, className, style }: Props) => {
-  const api = useTooltip()
-
-  function show(e: React.MouseEvent<HTMLDivElement, MouseEvent>, hideOnClickOutside?: boolean) {
-    api.show({
-      content: custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
-      anchor: e.target as HTMLElement,
-      position,
-      hideOnClickOutside,
-    })
-  }
-  return (
-    <div
-      {...(triggeredBy === 'hover' ? { onMouseEnter: show, onMouseLeave: () => api.hide() } : { onClick: (e) => show(e, true) })}
-      className={className}
-      style={style}
-      tabIndex={triggeredBy === 'click' ? 0 : undefined}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/Tooltip/TooltipAPI.ts

@@ -1,84 +0,0 @@
-import { animationTimeMS } from './style'
-import { ShowOptions } from './types'
-
-const MARGIN_TO_CORNERS_PX = 10
-
-function isRelative(element: HTMLElement) {
-  return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '')
-}
-
-export class TooltipAPI {
-  private 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
-    }
-  }
-
-  show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions): void {
-    window.clearTimeout(this.hideTimeoutId)
-    this.hideTimeoutId = undefined
-    if (this.clickListener) document.removeEventListener('click', this.clickListener)
-    this.setContent(content)
-    setTimeout(() => {
-      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)
-      }
-    }, 10)
-  }
-
-  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

@@ -1,24 +0,0 @@
-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

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

package/src/components/Tooltip/style.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,15 +0,0 @@
-export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
-
-export interface BoxPosition {
-  x1: number,
-  x2: number,
-  y1: number,
-  y2: number,
-}
-
-export interface ShowOptions {
-  content: React.ReactNode,
-  anchor: HTMLElement,
-  position?: TooltipPosition,
-  hideOnClickOutside?: boolean,
-}

package/src/views/Agents.tsx

@@ -1,200 +0,0 @@
-import { Button, Text } from '@citric/core'
-import { Search } from '@citric/icons'
-import { Badge } from '@citric/ui'
-import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { agentClient } from '@stack-spot/portal-network'
-import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useState } from 'react'
-import { styled } from 'styled-components'
-import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
-import { IconInput } from '../components/IconInput'
-import { RightPanelTabs } from '../components/RightPanelTabs'
-import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
-import { useRightPanel } from '../right-panel/hooks'
-
-const AgentLabel = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 6px;
-
-  img, svg {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-`
-
-const AgentDescription = styled.div`
-  color: ${theme.color.light[700]};
-  line-height: 18px;
-
-  section {
-    border-bottom: 1px solid ${theme.color.light[600]};
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-
-    &:last-child {
-      padding-bottom: 0;
-      margin-bottom: 0;
-      border-bottom: none;
-    }
-
-    .title {
-      display: block;
-      margin-bottom: 6px;
-    }
-  }
-  
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    white-space: nowrap;
-    gap: 6px;
-
-    li {
-      margin: 3px 0;
-    }
-  }
-`
-
-export const Agents = () => {
-  const t = useTranslate(dictionary)
-  const panel = useWidgetState('panel')
-  const { open } = useRightPanel()
-  const widget = useWidget()
-
-  useEffect(() => {
-    if (panel === 'agent') open(
-      <AgentsPanel />,
-      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
-    )
-  }, [panel, t])
-
-  return null
-}
-
-const AgentsPanel = () => {
-  const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
-  
-  return <RightPanelTabs key={chat.id} tabs={[
-    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
-    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
-    { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" /> },
-    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" /> },
-  ]} />
-}
-
-const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
-  const t = useTranslate(dictionary)
-  const { close } = useRightPanel()
-  const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
-  const defaultAgent = useMemo(() => ({
-    name: 'Stackspot AI',
-    description: t.defaultAgentDescription,
-    llm_config: { model_slug: 'gpt4o' },
-  } as AgentResponse), [])
-  const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility })
-  const [value, setValue] = useState<AgentResponse | undefined>(agents.find(a => a.id === chat.get('agent')?.id) ?? defaultAgent)
-  const filtered = useMemo(
-    () => {
-      const ags = visibility === 'BUILT-IN' ? [defaultAgent as AgentResponse, ...agents] : agents
-      return filter ? ags.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : ags
-    },
-    [agents, filter, value],
-  )
-
-  function submit() {
-    if (value) {
-      chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined)
-    }
-    close()
-  }
-
-  return (
-    <>
-      <div className="content">
-        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
-        {!!filtered.length && <DescribedRadioGroup
-          options={filtered}
-          keygen={a => a.id}
-          value={value}
-          onChange={setValue}
-          renderLabel={({ name, avatar, id }) => (
-            <AgentLabel>
-              {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
-              <Text>{name}</Text>
-            </AgentLabel>
-          )}
-          renderDescription={({ description, llm_config: llmc, knowledge_sources_config: ksc }) => (
-            <AgentDescription>
-              {description && <section>
-                <Text appearance="microtext1" className="title">Description</Text>
-                <Text>{description}</Text>
-              </section>}
-              {!!ksc?.knowledge_sources?.length && <section>
-                <Text appearance="microtext1" className="title">Knowledge sources</Text>
-                <ul>
-                  {ksc.knowledge_sources.map((ks, index) => <li key={index}><Badge palette="teal" appearance="square">{ks}</Badge></li>)}
-                </ul>
-              </section>}
-              {llmc?.model_slug && <section>
-                <Text appearance="microtext1" className="title">LLM</Text>
-                <Badge palette="orange" appearance="square">{llmc.model_slug}</Badge>
-              </section>}
-            </AgentDescription>
-          )}
-          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!agents.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
-        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
-      </div>
-      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
-    </>
-  )
-}
-
-const dictionary = {
-  en: {
-    title: 'Agents',
-    description: 'By selecting an Agent, it will be consulted to generate the answers.',
-    personal: 'Personal',
-    builtin: 'Built-in',
-    shared: 'Shared',
-    account: 'Account',
-    apply: 'Apply',
-    noSearchResults: "Your search didn't yield results.",
-    noSearchResultsDescription: 'Please, try another search term.',
-    noData: 'There are no agents in this category yet.',
-    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
-    defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
-  },
-  pt: {
-    title: 'Agentes',
-    description: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
-    personal: 'Pessoal',
-    builtin: 'Embutido',
-    shared: 'Compartilhado',
-    account: 'Conta',
-    apply: 'Aplicar',
-    noSearchResults: 'Sua busca não produziu resultados.',
-    noSearchResultsDescription: 'Por favor, tente outra busca.',
-    noData: 'Ainda não há agentes nesta categoria.',
-    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
-    defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
-  },
-} satisfies Dictionary

package/src/views/Home.tsx

@@ -1,109 +0,0 @@
-import { FaceSmile, KnowledgeSource, QuickCommand } from '@citric/icons'
-import { MiniLogo } from '@stack-spot/portal-components/svg'
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { styled } from 'styled-components'
-import { QuickStartButton } from '../components/QuickStartButton'
-import { useCurrentChat } from '../context/hooks'
-import { ChatEntry } from '../state/ChatEntry'
-
-interface Props {
-  username: string,
-}
-
-const HomeBox = styled.div`
-  margin: auto;
-
-  .title, .subtitle {
-    font-family: 'San Francisco';
-    font-size: 26px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  .title {
-    display: inline-block;
-    background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
-    background-clip: text;
-    margin-bottom: 10px;
-    color: transparent;
-  }
-
-  .subtitle {
-    color: #A0A0A0;
-    margin-bottom: 20px;
-  }
-
-  .shortcuts {
-    display: flex;
-    flex-direction: row;
-    gap: 15px;
-    li {
-      flex: 1;
-    }
-  }
-`
-
-export const Home = ({ username }: Props) => {
-  const t = useTranslate(dictionary)
-  const chat = useCurrentChat()
-
-  function send(message: string) {
-    chat.pushMessage(ChatEntry.createUserEntry(message))
-  }
-
-  return (
-    <HomeBox className="home-page">
-      <h2 className="title">{t.hello}, {username}</h2>
-      <h3 className="subtitle">{t.subtitle}</h3>
-      <div className="shortcuts">
-        <QuickStartButton
-          label={t['question.meta']}
-          onClick={() => send(t['question.meta'])}
-          icon={<MiniLogo />}
-          background={theme.color.orange[50]}
-        />
-        <QuickStartButton
-          label={t['question.ks']}
-          onClick={() => send(t['question.ks'])}
-          icon={<KnowledgeSource />}
-          background={theme.color.cyan[50]}
-          color={theme.color.cyan[600]}
-        />
-        <QuickStartButton
-          label={t['question.agents']}
-          onClick={() => send(t['question.agents'])}
-          icon={<FaceSmile />}
-          background={theme.color.pink[50]}
-          color={theme.color.pink[600]}
-        />
-        <QuickStartButton
-          label={t['question.qc']}
-          onClick={() => send(t['question.qc'])}
-          icon={<QuickCommand />}
-          background={theme.color.purple[50]}
-          color={theme.color.purple[600]}
-        />
-      </div>
-    </HomeBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    hello: 'Hello',
-    subtitle: "Let's innovate and streamline your coding journey together. Want to lead the change? Just ask!",
-    'question.meta': 'What is StackSpot AI?',
-    'question.ks': 'What are Knowledge Sources?',
-    'question.agents': 'How do Agents work?',
-    'question.qc': 'What is a Quick Command?',
-  },
-  pt: {
-    hello: 'Olá',
-    subtitle: 'Vamos inovar e simplificar sua jornada de programação juntos. Quer liderar a mudança? É só perguntar!',
-    'question.meta': 'O que é a StackSpot AI?',
-    'question.ks': 'O que são Knowledge Sources?',
-    'question.agents': 'Como funcionam os agentes?',
-    'question.qc': 'O que é um Quick Command?',
-  },
-} satisfies Dictionary