@stack-spot/ai-chat-widget 1.9.0 → 1.10.0

package/src/StackspotAIWidget.tsx

@@ -17,6 +17,7 @@ import { KSDocument } from './views/KSDocument'
 import { MessageInput } from './views/MessageInput'
 import { MinimizedHeader } from './views/MinimizedHeader'
 import { Stacks } from './views/Stacks'
+import { Tools } from './views/Tools'
 import { Workspaces } from './views/Workspaces'
 
 export interface AIWidgetProps extends WithStyle {
@@ -75,6 +76,7 @@ export const StackspotAIWidget = ({ username, minimizedActions = {}, children, c
           <Agents />
           <Editor />
           <ChatHistory />
+          <Tools />
           <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
         </div>
       </RightPanelProvider>

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.9.0",
-  "date": "Tue Mar 25 2025 13:24:25 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.10.0",
+  "date": "Tue Mar 25 2025 17:02:17 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -99,6 +99,10 @@
       "name": "@citric/ui",
       "version": "6.7.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
     },
+    {
+      "name": "@dagrejs/dagre",
+      "version": "1.1.4"
+    },
     {
       "name": "@monaco-editor/react",
       "version": "4.7.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
@@ -109,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.48.0(@stack-spot/auth@5.3.3)(@stack-spot/opa@2.6.1(@stack-spot/auth@5.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.69.0(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.102.0(@stack-spot/auth@5.3.3)(@stack-spot/opa@2.6.1(@stack-spot/auth@5.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.69.0(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",
@@ -119,6 +123,10 @@
       "name": "@stack-spot/portal-translate",
       "version": "1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
+    {
+      "name": "@xyflow/react",
+      "version": "12.4.4(@types/react@18.3.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+    },
     {
       "name": "lodash",
       "version": "4.17.21"

package/src/chat-interceptors/send-message.ts

@@ -1,9 +1,10 @@
-import { aiClient, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 import { LabeledWithImage } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
+import { treatHTMLInErrorMessage } from '../utils/error'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
 
 /**
@@ -15,7 +16,7 @@ import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
  * @returns the TextChatEntry to build a ChatEntry.
  */
 function createEntryValueFromChatResponse(
-  response: Partial<ChatResponse3>,
+  response: Partial<ChatResponseWithSteps>,
   knowledgeSources: KnowledgeSource[] | undefined,
   agent: LabeledWithImage | undefined,
   includeDate = false,
@@ -28,6 +29,7 @@ function createEntryValueFromChatResponse(
     knowledgeSources,
     agent: agent,
     updated: includeDate ? new Date().toISOString() : undefined,
+    steps: response.steps,
   }
 }
 
@@ -72,7 +74,10 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     } else {
       botEntry.setValue({
         ...botEntry.getValue(),
-        error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+        error: treatHTMLInErrorMessage(
+          error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+          error.status ?? 500,
+        ),
       })
     }
   }

package/src/components/AnimatedOpacity.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable react/display-name */
+import { listToClass } from '@stack-spot/portal-theme'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+
+interface Props {
+  children: React.ReactNode | React.ReactNode[],
+  durationMs?: number,
+  visible: boolean,
+}
+
+const Styled = styled.div<{ $durationMs: number }>`
+  opacity: 0;
+  transition: opacity ${({ $durationMs }) => $durationMs / 1000}s;
+  &.visible {
+    opacity: 1;
+  }
+`
+
+export const AnimatedOpacity = forwardRef<HTMLDivElement, Props>(({ children, visible, durationMs = 300 }, ref) => {
+  const [content, setContent] = useState(visible ? children : null)
+  const animation = useRef<number | undefined>()
+  const previousVisible = useRef<boolean | undefined>()
+
+  useEffect(() => {
+    const isFirstRender = previousVisible === undefined
+    const isChangingVisibility = visible !== previousVisible.current
+    previousVisible.current = visible
+    if (isFirstRender) return
+    if (isChangingVisibility) {
+      if (animation.current) {
+        window.clearTimeout(animation.current)
+        animation.current = undefined
+        return setContent(visible ? children : null)
+      }
+      if (visible) setContent(children)
+      animation.current = window.setTimeout(() => {
+        if (!visible) setContent(null)
+        animation.current = undefined
+      }, durationMs)
+    } else if (visible || !animation.current) {
+      setContent(visible ? children : null)
+    }
+
+    return () => {
+      window.clearTimeout(animation.current)
+    }
+  }, [visible, children])
+
+  return (
+    <Styled ref={ref} $durationMs={durationMs} className={listToClass(['fade-animation', visible && 'visible'])}>
+      {content}
+    </Styled>
+  )
+})

package/src/components/Code.tsx

@@ -29,6 +29,7 @@ export interface Props extends WithChildren {
   onNewFile?: CodeAction,
   onCopyCode?: CodeAction,
   language?: string,
+  showLineNumbers?: boolean,
 }
 
 const CodeBox = styled.code`
@@ -98,11 +99,12 @@ 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()
@@ -124,7 +126,7 @@ export const Code = ({
   }
 
   if (children === undefined) return <></>
-  if (!(/language-(\w+)/.exec(className || ''))) {
+  if (computedLanguage === 'txt') {
     return (
       <code {...props} className={className}>
         {children}
@@ -133,7 +135,7 @@ 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

package/src/components/Modal.tsx

@@ -0,0 +1,87 @@
+import { Text } from '@citric/core'
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+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 aria-label={t.close} title={t.close} appearance="circle" onClick={onClose}><Times /></IconButton>
+      </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/layout.css

@@ -129,6 +129,27 @@
   }
 }
 
+.chat-modal {
+  position: absolute;
+  top: 90px;
+  bottom: 20px;
+  right: 20px;
+  width: 20%;
+  min-width: 400px;
+  border-radius: 6px;
+  background-color: var(--light-400);
+  border: 1px solid var(--light-600);
+  overflow: auto;
+
+  > header {
+    padding: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+  }
+}
+
 /* fixes placeholder description */
 .no-data-placeholder {
   > div > p {

package/src/state/ChatEntry.ts

@@ -1,6 +1,6 @@
+import { OneOfColorSchemes } from '@citric/core'
 import { ColorPaletteName } from '@stack-spot/portal-theme'
 import { pull } from 'lodash'
-import { OneOfColorSchemes } from '@citric/core'
 import { LabeledWithImage } from './types'
 
 export interface ActionDataClick {
@@ -53,6 +53,26 @@ export interface KnowledgeSource {
   documentId: string,
 }
 
+export interface AgentTool {
+  id: string,
+  name: string,
+  description?: string,
+  image?: string,
+  duration?: number,
+  input?: string,
+  output?: string,
+}
+
+export interface ChatEntryStep {
+  id: string,
+  type: 'planning' | 'step' | 'answer',
+  input?: string,
+  output?: string,
+  status: 'pending' | 'running' | 'success' | 'error',
+  duration?: number,
+  tools?: AgentTool[],
+}
+
 export interface TextChatEntry {
   /**
    * "text" for simple unformatted paragraphs. "md" for markdown. 
@@ -105,6 +125,10 @@ export interface TextChatEntry {
    */
   card?: boolean,
   /**
+   * This entry may contain steps. If so, specify them in this array.
+   */
+  steps?: ChatEntryStep[],
+  /*
    * Options for radio or button type.
    */
   options?: { color?: OneOfColorSchemes, label: string, value?: string}[],

package/src/state/WidgetState.ts

@@ -13,11 +13,15 @@ export interface WidgetProperties {
   /**
    * Current content of the right panel. Undefined for closed right panel.
    */
-  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details',
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details' | 'tools',
   /**
    * KS to use when the right panel "ks-details" is open.
    */
   currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
+  /**
+   * The message to show in the tools panel.
+   */
+  currentMessageInToolsPanel?: { chatId: string, messageId: number },
   /**
    * Whether or not the widget is in its minimized version.
    */

package/src/utils/error.ts

@@ -0,0 +1,56 @@
+import { getLanguage } from '@stack-spot/portal-translate'
+
+const httpErrors: Record<'en' | 'pt', Record<number, string>> = {
+  en: {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    413: 'Payload Too Large',
+    414: 'URI Too Long',
+    415: 'Unsupported Media Type',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+  },
+  pt: {
+    400: 'Requisição Inválida',
+    401: 'Não Autorizado',
+    403: 'Proibido',
+    404: 'Não Encontrado',
+    405: 'Método Não Permitido',
+    406: 'Não Aceitável',
+    408: 'Tempo de Requisição Esgotado',
+    409: 'Conflito',
+    410: 'Indisponível',
+    411: 'Comprimento Necessário',
+    413: 'Carga Muito Grande',
+    414: 'URI Muito Longa',
+    415: 'Tipo de Mídia Não Suportado',
+    429: 'Muitas Requisições',
+    500: 'Erro Interno do Servidor',
+    501: 'Não Implementado',
+    502: 'Gateway Inválido',
+    503: 'Serviço Indisponível',
+    504: 'Tempo de Gateway Esgotado',
+    505: 'Versão HTTP Não Suportada',
+  },
+}
+
+function getGenericErrorBasedOnStatus(status: number) {
+  return httpErrors[getLanguage()][status] ?? `Unknown error. Status code: ${status}.`
+}
+
+export function treatHTMLInErrorMessage(text: string, status: number) {
+  return (!text.includes('<html>')) ? text : getGenericErrorBasedOnStatus(status)
+}

package/src/views/Chat/ChatMessage.tsx

@@ -13,6 +13,7 @@ import { useDateFormatter } from '../../utils/date'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
+import { StepsList } from './StepsList'
 
 interface Props {
   /**
@@ -185,12 +186,12 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
     return <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
   }
 
-  return (entry.content || entry.error) && (
+  return (entry.content || entry.error || !!entry.steps?.length) && (
     <li className={entry.agentType} ref={ref}>
       <div className="chat-message" ref={chatRef} onKeyDown={handleKeyDown} tabIndex={0}>
         <div className="user-info">{userInfo}</div>
-        {entry.content && <div className={listToClass(['message-content', entry.card && 'card'])}>
-          {entry.badges?.length && <div className="badges">
+        {(entry.content || entry.steps) && <div className={listToClass(['message-content', entry.card && 'card'])}>
+          {!!entry.badges?.length && <div className="badges">
             {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
           </div>}
           {renderContent()}
@@ -212,6 +213,7 @@ export const ChatMessage = ({ message, username, isLast }: Props) => {
               )}
             </div>
           )}
+          {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
         </div>}
       </div>
       {entry.error && (

package/src/views/Chat/StepsList.tsx

@@ -0,0 +1,97 @@
+import { Button, IconBox, Text } from '@citric/core'
+import { CheckCircleFill, Circle, PlayFill, TimesCircleFill } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { findLastIndex } from 'lodash'
+import { useState } from 'react'
+import { useWidget } from '../../context/hooks'
+import { ChatEntryStep } from '../../state/ChatEntry'
+import { PropsOf } from '../../types'
+
+interface Props {
+  steps: ChatEntryStep[],
+  messageId: number,
+  chatId: string,
+}
+
+interface StepProps {
+  step: ChatEntryStep,
+  index: number,
+  total: number,
+  onClick?: () => void,
+}
+
+function getStatusIcon(status: ChatEntryStep['status']) {
+  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
+  switch (status) {
+    case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
+    case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
+    case 'pending': return <IconBox {...iconBoxProps}><Circle /></IconBox>
+    case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
+  }
+}
+
+const Step = ({ step, index, total, onClick }: StepProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
+      <div className="step-status-icon">{getStatusIcon(step.status)}</div>
+      <Text className="step-title" appearance="microtext1" colorScheme="light.700">
+        {t.step} {index}/{total}: {step.input}
+      </Text>
+    </li>
+  )
+}
+
+export const StepsList = ({ steps, chatId, messageId }: Props) => {
+  const t = useTranslate(dictionary)
+  const [isExpanded, setExpanded] = useState(false)
+  const actualSteps = steps.filter(s => s.type === 'step')
+  let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
+  if (currentStepIndex === -1) currentStepIndex = 0
+  const widget = useWidget()
+
+  function openToolsPanel() {
+    widget.set('currentMessageInToolsPanel', { chatId, messageId })
+    widget.set('panel', 'tools')
+  }
+  
+  return (
+    <AnimatedHeight>
+      <div className="steps">
+        <ul>
+          {isExpanded
+            ? actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} total={actualSteps.length} />)
+            : <Step
+              step={actualSteps[currentStepIndex]}
+              index={currentStepIndex + 1}
+              total={actualSteps.length}
+              onClick={() => setExpanded(true)}
+            />
+          }
+        </ul>
+        {isExpanded && <div className="step-actions">
+          <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
+          <Button colorScheme="light" size="sm" className="icon-button" onClick={openToolsPanel}>
+            <IconBox size="xs"><PlayFill /></IconBox>
+            {t.detailed}
+          </Button>
+        </div>}
+      </div>
+    </AnimatedHeight>
+  )
+}
+
+const dictionary = {
+  en: {
+    step: 'Step',
+    hideSteps: 'Hide steps',
+    detailed: 'View detailed mode',
+  },
+  pt: {
+    step: 'Passo',
+    hideSteps: 'Esconder passos',
+    detailed: 'Ver modo detalhado',
+  },
+} satisfies Dictionary

package/src/views/Chat/styled.ts

@@ -1,7 +1,12 @@
 import { theme } from '@stack-spot/portal-theme'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
 import { styled } from 'styled-components'
+import { FastOmit, IStyledComponentBase } from 'styled-components/dist/types'
 
-export const ChatList = styled.ul`
+export const ChatList: IStyledComponentBase<
+  'web',
+  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>
+> = styled.ul`
   display: flex;
   flex-direction: column;
   justify-content: end;
@@ -183,4 +188,60 @@ export const ChatList = styled.ul`
       }
     }
   }
+
+  .steps {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+        align-items: center;
+
+        &[role="button"] {
+          cursor: pointer;
+        }
+
+        .loading {
+          width: 12px;
+          height: 12px;
+        }
+
+        .step-status-icon {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .step-title {
+          line-height: 0.75rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical; 
+        }
+      }
+    }
+
+    .step-actions {
+      margin-top: 8px;
+      display: flex;
+      gap: 6px;
+
+      .icon-button {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+    }
+  }
 `

package/src/views/Stacks.tsx

@@ -46,6 +46,7 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
   const { close } = useRightPanel()
   const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
+  // @ts-ignore type in backend (openapi) is incorrect. fixme.
   const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
   const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === chat.get('stack')?.id))
   const filtered = useMemo(

package/src/views/Tools/FlowChart/HandleGroup.tsx

@@ -0,0 +1,12 @@
+import { Handle, Position } from '@xyflow/react'
+
+interface Props {
+  renderSource?: boolean,
+  renderTarget?: boolean,
+}
+export const HandleGroup = ({ renderSource = true, renderTarget = true }: Props) => (
+  <>
+    {renderTarget && <Handle type="target" position={Position.Left} isConnectable className="target-handle" />}
+    {renderSource && <Handle type="source" position={Position.Right} isConnectable className="source-handle" />}
+  </>
+)