@stack-spot/ai-chat-widget 1.37.0-beta.1 → 2.0.0-betacitric.2

package/src/views/Chat/ChatMessage.tsx

@@ -1,8 +1,7 @@
-import { Box, Button, Checkbox, Flex, IconBox, Input, Label, Radio, Text } from '@citric/core'
-import { Check, Cog, Copy, Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
-import { Badge, IconButton, Tooltip } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Badge, Button, CheckboxGroup, Column, IconButton, Input, RadioGroup, Row, Text, Tooltip } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
-import { listToClass } from '@stack-spot/portal-theme'
+import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { groupBy } from 'lodash'
 import { createElement, Dispatch, useCallback, useMemo, useRef, useState } from 'react'
@@ -58,49 +57,47 @@ interface RenderInputsEntryProps {
 
 const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }: RenderInputsEntryProps) => {
   const chat = useCurrentChat()
+  const [radioValue, setRadioValue] = useState<Required<TextChatEntry>['options'][number] | undefined>()
+  const [checkboxValue, setCheckboxValue] = useState<Required<TextChatEntry>['options']>([])
 
   const renderInputs = () => {
     if (entry.type === 'input-text') {
-      return <Input name={entry.name}
+      return <Input
+        name={entry.name}
         value={value[0] ?? ''}
-        sx={{ maxWidth: '500px' }}
+        style={{ maxWidth: '500px' }}
         autoFocus
-        {...entry.validations} onChange={(data) => setValue([data.target.value])} required={entry.required} />
+        {...entry.validations}
+        onChange={v => setValue([v])}
+        required={entry.required}
+      />
     }
 
     if (entry.type === 'input-radio') {
-      return <Flex className="radio-group">
-        {entry.options?.map((option) => (<Box w={6} key={option.value} className="radio-item">
-          <Flex alignItems="center">
-            <Label htmlFor={option.value} colorScheme="light.contrastText">
-              <Radio name={entry.name} id={option.value} onChange={(data) => {
-                if (data.target.checked) {
-                  setValue([option.label])
-                  option.value && setLabels([option.value])
-                } else {
-                  setValue([])
-                }
-              }} />
-              <Text ml={3}>{option.label}</Text>
-            </Label>
-            {option.hasInput && option.value && labels.findIndex((label) => label === option.value) !== -1 &&
-              <Box w={4} ml={2}>
-                <Input name={entry.name} onChange={(data) => setValue([data.target.value])} 
-                  required={true} sx={{ height: '30px' }} />
-              </Box>
-            }
-          </Flex>
-        </Box>
-        ))}
-      </Flex>
+      return <RadioGroup
+        value={radioValue}
+        onChange={(v) => {
+          setRadioValue(v)
+          setValue([v.label])
+          v.value && setLabels([v.value])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3} w="50%">
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value) !== -1 &&
+              <Input name={entry.name} onChange={v => setValue([v])} required style={{ height: '30px', width: '33%' }} />}
+          </Row>
+        )}
+      />  
     }
 
     if (entry.type === 'button-list') {
-      return <Flex className="button-group" style={{ gap: '8px' }}>
+      return <Row className="button-group" gap="8px">
         {entry.options?.map((item) => <Button
           key={item.label}
           colorScheme={item.color}
-          style={{ margin: 0 }}
           onClick={() => {
             item.value && chat.pushMessage(
               ChatEntry.createUserEntry(item.value, false, entry.name, item?.label ? [item?.label] : undefined),
@@ -108,46 +105,46 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
           }}
         >
           {item.label}
-        </Button>)
-        }</Flex>
+        </Button>)}
+      </Row>
     }
 
     if (entry.type === 'input-checkbox') {
-      return <Flex className="checkbox-group">
-        {entry.options?.map((option) => (<Flex as="label" w={6} key={option.label} alignItems="center" className="checkbox-item">
-          <Checkbox name={entry.name} key={option.label} onChange={(data) => {
-            if (data.target.checked) {
-              setValue([...value, option.label])
-              option.value && setLabels([...labels, option.value])
-            } else {
-              const newValue = value.filter(((item) => item !== option.label))
-              setValue([...newValue])
+      return <CheckboxGroup
+        value={checkboxValue}
+        onChange={(v) => {
+          setCheckboxValue(v)
+          setValue(v.map(i => i.label))
+          setLabels(v.map(i => i.value).filter(i => !!i) as string[])
+        }}
+        options={entry.options ?? []}
+        renderKey={o => `${o.value}_${o.label}`}
+        renderLabel={o => (
+          <Row gap={3}>
+            <Text>{o.label}</Text>
+            {o.hasInput && o.value && labels.findIndex((label) => label === o.value)!== -1 &&
+              <div style={{ width: '33%' }}>
+                <Input
+                  name={entry.name}
+                  {...entry.validations}
+                  onChange={(v) => {
+                    const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
+                    if (customIndex === -1) {
+                      setValue([...value, v])
+                    } else {
+                      const newValue = [...value]
+                      newValue[customIndex] = v
+                      setValue(newValue)
+                    } 
+                  }}
+                  required={true}
+                  style={{ height: '30px' }}
+                />
+              </div>
             }
-          }}/>
-          <Text ml={3}>{option.label}</Text>
-          {option.hasInput && option.value && labels.findIndex((label) => label === option.value)!== -1 &&
-            <Box w={4} ml={2}>
-              <Input
-                name={entry.name}
-                {...entry.validations}
-                onChange={(data) => {
-                  const customIndex = value.findIndex(v => !entry.options?.map(o => o.label).includes(v))
-                  if (customIndex === -1) {
-                    setValue([...value, data.target.value])
-                  } else {
-                    const newValue = [...value]
-                    newValue[customIndex] = data.target.value
-                    setValue(newValue)
-                  } 
-                }}
-                required={true}
-                sx={{ height: '30px' }}
-              />
-            </Box>
-          }
-        </Flex>
-        ))}
-      </Flex>
+          </Row>
+        )}
+      />
     }
 
     if (entry.type === 'input-phone') {
@@ -162,17 +159,17 @@ const RenderInputsEntry = ({ isLast, entry, value, setValue, labels, setLabels }
     return <p className="plain-text">{entry.content}</p>
   }
 
-  return <Flex flexDirection="column">
-    <Text appearance="body2" mb={4}>{entry.content}</Text>
+  return <Column gap={4}>
+    <Text appearance="body2">{entry.content}</Text>
     {isLast && renderInputs()}
-  </Flex>
+  </Column>
 }
 
 const UserInfo = ({ entry }: { entry: TextChatEntry }) => {
   switch (entry.agentType) {
     case 'user': return
     case 'bot': return <AgentInfo agent={entry.agent} />
-    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Cog />} />
+    case 'system': return <AgentInfo agent={{ id: 'system', label: 'System' }} icon={<Icon icon="Cog" />} />
   }
 }
 
@@ -301,9 +298,9 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
 
     return <form>
       <RenderInputsEntry entry={entry} isLast={isLast} value={value} setValue={setValue} setLabels={setLabels} labels={labels} />
-      <Box mt="4">
+      <div style={{ marginTop: theme.spacing[4] }}>
         {renderActions()}
-      </Box>
+      </div>
     </form>
   }
 
@@ -324,7 +321,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {(entry.content || entry.steps || entry.upload?.length) && (
             <div className={listToClass(['message-content', entry.card && 'card', entry.type])}>
               {!!entry.badges?.length && <div className="badges">
-                {entry.badges.map((b, index) => <Badge key={index} palette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
+                {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
               {renderContent()}
             
@@ -334,7 +331,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           
           {entry.error && (
             <div className="error">
-              <IconBox size="xs"><TimesCircle /></IconBox>
+              <Icon icon="TimesCircle" size="xs" />
               <Text appearance="microtext1">{entry.error}</Text>
             </div>
           )}
@@ -349,12 +346,13 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           label={t.tools}
           images={entry.tools.slice(0, 3).map((id) => {
             const tool = toolById(id, toolKits)
-            return { key: id, name: tool?.name || id, icon: <Cog />, url: tool?.image }
+            return { key: id, name: tool?.name || id, icon: <Icon icon="Cog" />, url: tool?.image }
           })}
           onClick={openToolsPanel}
+          style={{ marginTop: '12px', width: 'fit-content' }}
         />}
         {!!entry.knowledgeSources?.length && <div className="ks-box">
-          <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
+          <Text appearance="microtext1" color="light.700">Knowledge Sources:</Text>
           <ul>{entry.knowledgeSources.map((ks, index) => (
             <li key={index}>
               <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
@@ -365,38 +363,35 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
         {shouldShowFooter && <div className="message-footer">
           {entry.agentType === 'bot' && !entry.error && <div className="message-actions">
             {entry.type === 'md' && (
-              copied ? (
-                <Tooltip text={t.copied} position={'right'}>
-                  <IconButton
-                    appearance="square"
-                    colorBg="light"
-                    title={t.copied}
-                    aria-label={t.copied}
-                    onClick={handleCopy}
-                  >
-                    <Check />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                <IconButton
-                  appearance="square"
-                  color="light"
-                  title={t.copy}
-                  aria-label={t.copy}
-                  onClick={handleCopy}
-                >
-                  <Copy />
-                </IconButton>
-              )
+              <IconButton
+                icon="Copy"
+                className="copy-btn"
+                appearance="square"
+                title={t.copy}
+                aria-label={t.copy}
+                feedback={t.copied}
+                onClick={handleCopy}
+              />
             )}
             {entry.messageId && (
               <>
-                <IconButton appearance="square" color="light" title={t.like} aria-label={t.like} onClick={like}>
-                  {liked === true ? <LikeFill /> : <Like />}
-                </IconButton>
-                <IconButton appearance="square" color="light" title={t.dislike} aria-label={t.dislike} onClick={dislike}>
-                  {liked === false ? <DislikeFill /> : <Dislike />}
-                </IconButton>
+                <IconButton
+                  group={liked === true ? 'fill' : 'outline'}
+                  icon="Like"
+                  appearance="square"
+                  title={t.like}
+                  aria-label={t.like}
+                  onClick={like}
+                />
+                <IconButton
+                  group={liked === false ? 'fill' : 'outline'}
+                  icon="Dislike"
+                  appearance="square"
+                  color="light"
+                  title={t.dislike}
+                  aria-label={t.dislike}
+                  onClick={dislike}
+                />
               </>
             )}
           </div>}
@@ -404,37 +399,33 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage }: Pr
           {entry.agentType === 'user' && (
             <div className="message-actions">
               {copied ? (
-                <Tooltip text={t.copied} position={'left'}>
+                <Tooltip content={t.copied} position={'left'}>
                   <IconButton
+                    icon="Check"
                     appearance="square"
-                    colorBg="light"
                     title={t.copied}
                     aria-label={t.copied}
                     size="sm"
-                  >
-                    <Check />
-                  </IconButton>
+                  />
                 </Tooltip>
               ) : (
                 showUserButtonCopy && (
                   <div className="action-bar">
                     <IconButton
+                      icon="Copy"
                       appearance="square"
-                      color="light"
                       title={t.copy}
                       aria-label={t.copy}
                       onClick={handleCopy}
                       size="sm"
-                    >
-                      <Copy className="copy-btn"/>
-                    </IconButton>
+                    />
                   </div>
                 )
               )}
             </div>
           )}
 
-          <Text as="label" appearance="microtext1" className="chat-date">
+          <Text appearance="microtext1" className="chat-date">
             {dateFormatter.formatForChatMessage(date)}
           </Text>
         </div>}

package/src/views/Chat/StepsList.tsx

@@ -1,13 +1,12 @@
-import { Button, IconBox, Text } from '@citric/core'
-import { CheckCircleFill, PlayFill, Spaces, TimesCircleFill } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
+import { Icon } from '@stack-spot/citric-icons'
+import { Button, ProgressCircular, Text } from '@stack-spot/citric-react'
 import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
 import { ChatStep, StepChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { findLastIndex } from 'lodash'
 import { useState } from 'react'
 import { useWidget } from '../../context/hooks'
-import { PropsOf } from '../../types'
 
 interface Props {
   steps: ChatStep[],
@@ -23,12 +22,12 @@ interface StepProps {
 }
 
 function getStatusIcon(status: ChatStep['status']) {
-  const iconBoxProps: PropsOf<typeof IconBox> = { colorIcon: 'light.700', size: 'xs' }
+  const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
   switch (status) {
-    case 'error': return <IconBox {...iconBoxProps}><TimesCircleFill /></IconBox>
-    case 'success': return <IconBox {...iconBoxProps}><CheckCircleFill /></IconBox>
-    case 'pending': return <IconBox {...iconBoxProps}><Spaces /></IconBox>
-    case 'running': return <LoadingCircular className="loading" colorScheme="inverse" size="xs" />
+    case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
+    case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
+    case 'pending': return <Icon icon="Spaces" {...iconProps} />
+    case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
   }
 }
 
@@ -37,7 +36,7 @@ const Step = ({ step, index, total, onClick }: StepProps) => {
   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">
+      <Text className="step-title" appearance="microtext1" color="light.700">
         {t.step} {index}/{total}: {step.input}
       </Text>
     </li>
@@ -74,7 +73,7 @@ export const StepsList = ({ steps, chatId, messageId }: Props) => {
         {isExpanded && <div className="step-actions">
           <Button colorScheme="light" size="sm" onClick={() => setExpanded(false)}>{t.hideSteps}</Button>
           <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
-            <IconBox size="xs"><PlayFill /></IconBox>
+            <Icon group="fill" icon="Play" size="xs" />
             {t.detailed}
           </Button>
         </div>}

package/src/views/Chat/styled.ts

@@ -25,9 +25,9 @@ export const ChatList: IStyledComponentBase<
     border-radius: 8px;
     align-self: start;
 
-    svg {
+    /* svg {
       fill: ${theme.color.danger.contrastText};
-    }
+    } */
 
     small {
       margin-top: 1px;
@@ -78,6 +78,12 @@ export const ChatList: IStyledComponentBase<
       opacity: 0.6;
       margin-left: auto;
     }
+
+    // prevents the feedback from being cut by the overflow rules of the parent elements. 
+    .copy-btn:after {
+      left: 0;
+      margin-top: -20px;
+    }
   }
 
   > li {

package/src/views/ChatHistory/HistoryItem.tsx

@@ -1,18 +1,14 @@
-import { IconBox, Input } from '@citric/core'
-import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
-import { IconButton, LoadingCircular } from '@citric/ui'
-import { focusNextIgnoringChildren } from '@stack-spot/portal-components'
+import { Icon } from '@stack-spot/citric-icons'
+import { IconButton, Input, MenuItem, MenuOverlay, ProgressCircular } from '@stack-spot/citric-react'
 import { agentToolsClient, aiClient } from '@stack-spot/portal-network'
 import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
 import { theme } from '@stack-spot/portal-theme'
 import { last } from 'lodash'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { OverlayMenu } from '../../components/OverlayMenu'
 import { useWidget } from '../../context/hooks'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ChatState } from '../../state/ChatState'
 import { LabeledAgent } from '../../state/types'
-import { ButtonAction } from '../../types'
 import { download } from '../../utils/download'
 import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
 import { useHistoryDictionary } from './dictionary'
@@ -31,7 +27,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   const [isDeleted, setDeleted] = useState(false)
   const renameInput = useRef<HTMLInputElement>(null)
   const widget = useWidget()
-  const overlayRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (isRenaming) renameInput.current?.focus() 
@@ -58,7 +53,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
   }
 
   const onDownload = useCallback(async () => {
-    setTimeout(() => focusNextIgnoringChildren(overlayRef.current), 10)
     setLoading(true)
     try {
       const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
@@ -72,7 +66,6 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
 
   const onDelete = useCallback(async () => {
     setDeleted(true)
-    setTimeout(() => overlayRef.current?.focus(), 10)
     try {
       await aiClient.deleteChat.mutate({ conversationId: item.id })
       aiClient.chats.invalidate()
@@ -123,10 +116,10 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
     setLoading(false)
   }, [])
 
-  const actions: ButtonAction[] = [
-    { label: t.rename, onClick: onRename, icon: <Pencil /> },
-    { label: t.download, onClick: onDownload, icon: <Download /> },
-    { label: t.delete, onClick: onDelete, icon: <Trash />, color: theme.color.danger[500] },
+  const actions: MenuItem[] = [
+    { label: t.rename, onClick: onRename, icon: <Icon icon="Pencil" /> },
+    { label: t.download, onClick: onDownload, icon: <Icon icon="Download" /> },
+    { label: t.delete, onClick: onDelete, icon: <Icon icon="Trash" />, style: { color: theme.color.danger[500] } },
   ]
 
   return isDeleted ? null : (
@@ -136,22 +129,22 @@ export const HistoryItem = ({ item }: { item: ConversationResponse }) => {
           <Input
             ref={renameInput}
             value={renamed}
-            onChange={e => setRenamed(e.target.value)}
+            onChange={setRenamed}
+            style={{ flex: 1 }}
             onKeyDown={(e) => {
               if (['Enter', 'Escape'].includes(e.key)) {
                 e.key === 'Enter' ? onSubmitRename() : setRenaming(false)
-                setTimeout(() => overlayRef.current?.focus(), 10)
               }
             }}
           />
-          <IconButton onClick={onSubmitRename}><Check /></IconButton>
+          <IconButton icon="Check" onClick={onSubmitRename} />
         </>
       ) : (
         <>
           <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
-          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left" ref={overlayRef}>
-            <IconBox><EllipsisHorizontal /></IconBox>
-          </OverlayMenu>}
+          {isLoading ? <ProgressCircular size="xs" /> : <MenuOverlay items={actions} position="left">
+            <Icon icon="EllipsisHorizontal" size="xs" />
+          </MenuOverlay>}
         </>
       )}
     </HistoryItemBox>

package/src/views/ChatHistory/index.tsx

@@ -1,5 +1,5 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
 import { useEffect } from 'react'
-import { FallbackBoundary } from '../../components/FallbackBoundary'
 import { useWidget, useWidgetState } from '../../context/hooks'
 import { useRightPanel } from '../../right-panel/hooks'
 import { ChatHistoryPanel } from './ChatHistoryPanel'

package/src/views/ChatHistory/styled.ts

@@ -1,5 +1,3 @@
-import { IconBox } from '@citric/core'
-import { IconButton } from '@citric/ui'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -42,7 +40,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  ${IconBox}, ${IconButton} {
+  /* $ {IconBox}, $ {IconButton} {
     padding: 0;
     border: none;
     background-color: transparent;
@@ -54,7 +52,7 @@ export const HistoryItemBox = styled.div`
     }
   }
 
-  ${IconButton} svg {
+  $ {IconButton} svg {
     width: 16px;
-  }
+  } */
 `

package/src/views/ChatTabSelection.tsx

@@ -1,4 +1,3 @@
-import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
@@ -7,6 +6,10 @@ import { useRightPanel } from '../right-panel/hooks'
 import { ChatState } from '../state/ChatState'
 import { ButtonAction } from '../types'
 
+interface Props {
+  buttons?: ButtonAction[],
+}
+
 const TabLabel = ({ id }: { id: string }) => {
   const label = useChatState(id, 'label')
   return <div title={label}>{label}</div>
@@ -15,7 +18,7 @@ const TabLabel = ({ id }: { id: string }) => {
 /**
  * This renders the top-most part of the layout, which includes the chat selection through tabs.
  */
-export const ChatTabSelection = () => {
+export const ChatTabSelection = ({ buttons: extraButtons = [] }: Props) => {
   const t = useTranslate(dictionary)
   const widget = useWidget()
   const { chatHistory } = useWidgetState('features') ?? {}
@@ -39,18 +42,23 @@ export const ChatTabSelection = () => {
 
   const buttons = useMemo<ButtonAction[]>(
     () => {
-      const actions: ButtonAction[] = [{
-        icon: <Plus />,
-        ariaLabel: t.newChat,
-        onClick: create,
-      }]
+      if (extraButtons.length) extraButtons[0].style = { ...extraButtons[0].style, marginLeft: 'auto' }
+      const actions: ButtonAction[] = [
+        {
+          icon: 'Plus',
+          ariaLabel: t.newChat,
+          onClick: create,
+          appearance: 'text',
+        },
+        ...extraButtons,
+      ]
       if (chatHistory) {
         actions.push({
-          icon: <Clock />,
+          icon: 'Clock',
           label: t.history,
           ariaLabel: t.openHistory,
           className: 'test',
-          style: { marginLeft: 'auto' },
+          style: extraButtons.length ? undefined : { marginLeft: 'auto' },
           onClick: () => widget.set('panel', 'history'),
         })
       }

package/src/views/Editor.tsx

@@ -1,8 +1,6 @@
-import { Text } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
+import { ProgressCircular, Select, Text } from '@stack-spot/citric-react'
 import { delay } from '@stack-spot/portal-components'
-import { Select } from '@stack-spot/portal-components/Select'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { debounce } from 'lodash'
@@ -29,17 +27,13 @@ const TitleBox = styled.div`
   position: relative;
   
   .language-selector {
-    width: 150px;
+    height: 28px;
     position: absolute;
     top: -4px;
     right: 0;
 
-    .options {
-      max-height: 250px;
-    }
-
-    .current-value {
-      padding: 2px 8px;
+    .search-bar {
+      display: none;
     }
   }
 `
@@ -78,11 +72,12 @@ const Title = () => {
       <Text appearance="h5">Editor</Text>
       <Select
         options={languages}
-        renderLabel={l => l.label}
-        renderValue={l => l.value}
+        renderLabel={l => l?.label ?? defaultLanguage}
+        renderKey={l => l?.value}
         value={language}
-        onChange={l => chat.set('codeLanguage', l.value)}
+        onChange={l => chat.set('codeLanguage', l?.value ?? defaultLanguage)}
         className="language-selector"
+        searchable
       />
     </TitleBox>
   )
@@ -125,7 +120,7 @@ const EditorPanel = () => {
         options={{ minimap: { enabled: false } }}
         value={value}
         onChange={v => chat.set('code', v)}
-        loading={<LoadingCircular />}
+        loading={<ProgressCircular />}
         onMount={setup}
       />
     </EditorBox>