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

package/src/views/Tools/index.tsx

@@ -0,0 +1,37 @@
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { lazy, Suspense, useEffect } from 'react'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { useToolsDictionary } from './dictionary'
+
+const LazyToolsPanel = lazy(() =>  import('./ToolsPanel'))
+
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const Tools = () => {
+  const t = useToolsDictionary()
+  const panel = useWidgetState('panel')
+  const message = useWidgetState('currentMessageInToolsPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'tools' && message) open(
+      <Suspense fallback={<Flex alignItems="center" justifyContent="center" flex={1}><LoadingCircular /></Flex>}>
+        <LazyToolsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
+      </Suspense>,
+      {
+        title: t.tools,
+        description: t.toolsDescription,
+        onClose: () => {
+          widget.set('panel', undefined)
+          widget.set('currentMessageInToolsPanel', undefined)
+        },
+      },
+    )
+  }, [panel, t, message])
+
+  return null
+}

package/src/views/Tools/utils.tsx

@@ -0,0 +1,34 @@
+import { IconBox } from '@citric/core'
+import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { ChatEntryStep } from '../../state/ChatEntry'
+
+export function getStatusIcon(status: ChatEntryStep['status']) {
+  switch (status) {
+    case 'success': return <IconBox colorIcon="success.500"><CheckCircleFill /></IconBox>
+    case 'error': return <IconBox colorIcon="danger.500"><TimesCircleFill /></IconBox>
+    case 'running': return <LoadingCircular colorScheme="inverse" size="xs" />
+    default: return null
+  }
+}
+
+export function getTypeIcon(type: ChatEntryStep['type']) {
+  switch (type) {
+    case 'planning': return <ListUnordered />
+    default: return <PlayFill />
+  }
+}
+
+export function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatEntryStep | undefined, index: number) {
+  if (!step) return ''
+  switch (step.type) {
+    case 'planning': return translation.planning
+    case 'step': return `${translation.step} ${index}`
+    case 'answer': return translation.answer
+  }
+}
+
+export function toPrecision(n: number, precisionDigits = 1) {
+  const factor = Math.pow(10, precisionDigits)
+  return Math.round(n * factor) / factor
+}