@stack-spot/ai-chat-widget 0.1.0 → 0.3.0

package/src/views/Chat/styled.ts

@@ -113,4 +113,28 @@ export const ChatList = styled.ul`
   .plain-text {
     margin: 0
   }
+
+  .ks-box {
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 8px;
+    border: 1px solid ${theme.color.light[500]};
+
+    > ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      gap: 6px;
+
+      > li button {
+        margin: 0;
+      }
+    }
+  }
 `

package/src/views/ChatHistory/ChatHistoryPanel.tsx

@@ -0,0 +1,28 @@
+import { aiClient } from '@stack-spot/portal-network'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import { HistoryList } from '../../components/HistoryList'
+import { MessageInterceptor } from '../../state/ChatState'
+import { HistoryItem } from './HistoryItem'
+
+export const ChatHistoryPanel = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+  const [chats, { fetchNextPage, hasNextPage }] = aiClient.chats.useInfiniteQuery({ size: 40 })
+  return (
+    <div id="chatHistoryList" style={{ height: '100%', overflow: 'auto' }}>
+      <InfiniteScroll
+        scrollableTarget="chatHistoryList"
+        dataLength={chats.length}
+        next={fetchNextPage}
+        hasMore={hasNextPage}
+        loader={<div></div>}
+      >
+        <HistoryList
+          items={chats}
+          getDate={c => new Date(c.updated || c.created || '')}
+          keygen={c => c.id}
+          renderItem={c => <HistoryItem item={c} interceptors={interceptors} />}
+          style={{ marginRight: '6px' }}
+        />
+      </InfiniteScroll>
+    </div>
+  )
+}

package/src/views/ChatHistory/HistoryItem.tsx

@@ -0,0 +1,127 @@
+import { IconBox, Input } from '@citric/core'
+import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
+import { aiClient } from '@stack-spot/portal-network'
+import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
+import { theme } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { OverlayMenu } from '../../components/OverlayMenu'
+import { useWidget } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { ChatState, MessageInterceptor } from '../../state/ChatState'
+import { ButtonAction } from '../../types'
+import { download } from '../../utils/download'
+import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
+import { useHistoryDictionary } from './dictionary'
+import { HistoryItemBox } from './styled'
+import { findStack, findWorkspace } from './utils'
+
+export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
+  const t = useHistoryDictionary()
+  const [isLoading, setLoading] = useState(false)
+  const [isRenaming, setRenaming] = useState(false)
+  const [renamed, setRenamed] = useState(item.title)
+  const [title, setTitle] = useState(item.title)
+  const [isDeleted, setDeleted] = useState(false)
+  const renameInput = useRef<HTMLInputElement>(null)
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (isRenaming) renameInput.current?.focus() 
+  }, [isRenaming])
+
+  const onRename = useCallback(() => {
+    setRenaming(true)
+  }, [])
+
+  async function onSubmitRename() {
+    setRenaming(false)
+    if (!renamed || renamed === item.title) return
+    try {
+      await aiClient.renameChat.mutate({ conversationId: item.id, conversationUpdateTitleRequest: { title: renamed } })
+      setTitle(renamed)
+      aiClient.chats.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      setRenaming(true)
+    }
+  }
+
+  const onDownload = useCallback(async () => {
+    setLoading(true)
+    try {
+      const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
+      download(`${title}.txt`, content)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+    setLoading(false)
+  }, [])
+
+  const onDelete = useCallback(async () => {
+    setDeleted(true)
+    try {
+      await aiClient.deleteChat.mutate({ conversationId: item.id })
+      aiClient.chats.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      setDeleted(false)
+    }
+  }, [])
+
+  const onSelect = useCallback(async () => {
+    const tab = widget.chatTabs.getAll().find(c => c.id === item.id)
+    if (tab) return widget.chatTabs.select(item.id)
+    setLoading(true)
+    try {
+      const chat = await aiClient.chat.query({ conversationId: item.id })
+      const [stack, workspace] = await Promise.all([findStack(chat.ai_stack_id), findWorkspace(chat.workspace_id)])
+      widget.chatTabs.add(new ChatState({
+        id: chat.id,
+        initial: { label: chat.title, stack, workspace },
+        interceptors,
+        entries: chat.history?.map(item => new ChatEntry({
+          agent: item.agent === 'USER' ? 'user' : 'bot',
+          content: item.content,
+          type: item.agent === 'USER' ? 'text' : 'md',
+          agentId: item.custom_agent?.id,
+          messageId: item.message_id,
+          knowledgeSources: genericSourcesToKnowledgeSources(item.sources),
+          updated: item.updated,
+        })),
+      }))
+      widget.chatTabs.select(chat.id)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+    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] },
+  ]
+
+  return isDeleted ? null : (
+    <HistoryItemBox className={isLoading ? 'loading' : ''}>
+      {isRenaming ? (
+        <>
+          <Input ref={renameInput} value={renamed} onChange={e => setRenamed(e.target.value)} />
+          <IconButton onClick={onSubmitRename}><Check /></IconButton>
+        </>
+      ) : (
+        <>
+          <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
+          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left">
+            <IconBox><EllipsisHorizontal /></IconBox>
+          </OverlayMenu>}
+        </>
+      )}
+    </HistoryItemBox>
+  )
+}

package/src/views/ChatHistory/dictionary.ts

@@ -0,0 +1,20 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    title: 'History',
+    description: 'Manage or continue previous conversations.',
+    rename: 'Rename',
+    download: 'Download',
+    delete: 'Delete',
+  },
+  pt: {
+    title: 'Histórico',
+    description: 'Gerencie ou retome conversas anteriores.',
+    rename: 'Renomear',
+    download: 'Download',
+    delete: 'Remover',
+  },
+} satisfies Dictionary
+
+export const useHistoryDictionary = () => useTranslate(dictionary)

package/src/views/ChatHistory/index.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { MessageInterceptor } from '../../state/ChatState'
+import { ChatHistoryPanel } from './ChatHistoryPanel'
+import { useHistoryDictionary } from './dictionary'
+
+export const ChatHistory = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+  const t = useHistoryDictionary()
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'history') open(
+      <FallbackBoundary><ChatHistoryPanel interceptors={interceptors} /></FallbackBoundary>,
+      {
+        title: t.title,
+        description: t.description,
+        onClose: () => widget.set('panel', undefined),
+      },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+
+
+

package/src/views/ChatHistory/styled.ts

@@ -0,0 +1,60 @@
+import { IconBox } from '@citric/core'
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const HistoryItemBox = styled.div`
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  gap: 20px;
+
+  &:hover:not(.loading) {
+    background-color: ${theme.color.light[600]};
+  }
+
+  &.loading {
+    cursor: progress;
+
+    > svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  button.label {
+    opacity: 0.8;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    color: ${theme.color.light.contrastText};
+    flex: 1;
+    display: flex;
+    cursor: pointer;
+    text-align: left;
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+
+  ${IconBox}, ${IconButton} {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    width: auto;
+    height: auto;
+
+    svg {
+      width: 12px;
+    }
+  }
+
+  ${IconButton} svg {
+    width: 16px;
+  }
+`

package/src/views/ChatHistory/utils.ts

@@ -0,0 +1,26 @@
+import { aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { ChatProperties } from '../../state/ChatState'
+
+export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
+  if (!id) return
+  try {
+    const stacks = await aiClient.aiStacks.query({})
+    return { id, label: stacks.find(s => s.id === id)?.name || id }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return { id, label: id }
+  }
+}
+
+export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
+  if (!id) return
+  try {
+    const ws = await workspaceClient.workspace.query({ workspaceId: id })
+    return { id, label: ws.name }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return { id, label: id }
+  }
+}

package/src/views/ChatTabSelection.tsx

@@ -35,7 +35,7 @@ export const ChatTabSelection = ({ history, interceptors }: Props) => {
           label: t.openHistory,
           className: 'test',
           style: { marginLeft: 'auto' },
-          onClick: () => { /* todo */ },
+          onClick: () => widget.set('panel', 'history'),
         })
       }
       return actions

package/src/views/KSDocument.tsx

@@ -0,0 +1,58 @@
+import { Flex, IconBox, Text } from '@citric/core'
+import { Score } from '@citric/icons'
+import { aiClient } from '@stack-spot/portal-network'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect } from 'react'
+import { Code } from '../components/Code'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { extractCodeFromKSDocument } from '../utils/knowledge-source'
+
+export const KSDocument = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const ks = useWidgetState('currentKSInPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'ks-details' && ks) open(
+      <KSDocumentPanel documentId={ks.documentId} slug={ks.slug} />,
+      {
+        title: (
+          <Flex flexDirection="row" alignItems="center" flex="1">
+            <Text appearance="h5" style={{ flex: 1 }}>{ks.name}</Text>
+            <Flex flexDirection="row" alignItems="center" style={{ gap: '5px' }} title="Score" aria-label="Score">
+              <IconBox><Score /></IconBox>
+              <Text>{ks.score.toFixed(2)}</Text>
+            </Flex>
+          </Flex>
+        ),
+        description: t.description,
+        onClose: () => widget.set('panel', undefined),
+      },
+    )
+  }, [panel, ks, t])
+
+  return null
+}
+
+const KSDocumentPanel = ({ slug, documentId }: { slug: string, documentId: string }) => {
+  const document = aiClient.knowledgeSourceDocument.useQuery({ slug, customId: documentId })
+  const { snippet, language, text } = extractCodeFromKSDocument(document)
+  return (
+    <>
+      {text && <Text>{text}</Text>}
+      <Code language={language}>{snippet}</Code>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    description: 'Knowledge Source details',
+  },
+  pt: {
+    description: 'Detalhes do Knowledge Source',
+  },
+} satisfies Dictionary

package/src/views/KnowledgeSources.tsx

@@ -4,49 +4,66 @@ import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient } from '@stack-spot/portal-network'
 import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useState } from 'react'
+import { difference, uniqBy } from 'lodash'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
+import { ChatProperties } from '../state/ChatState'
+
+interface TabProps {
+  visibility: VisibilityLevelEnum,
+  onSubmit: () => void,
+  allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
+}
 
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
-  const isKnowledgeSourceSelectionOpen = useWidgetState('isKnowledgeSourceSelectionOpen')
+  const panel = useWidgetState('panel')
   const { open } = useRightPanel()
   const widget = useWidget()
 
   useEffect(() => {
-    if (isKnowledgeSourceSelectionOpen) open(
+    if (panel === 'ks') open(
       <KnowledgeSourcesPanel />,
-      { title: t.title, description: t.description, onClose: () => widget.set('isKnowledgeSourceSelectionOpen', false) },
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
-  }, [isKnowledgeSourceSelectionOpen, t])
+  }, [panel, t])
 
   return null
 }
 
 const KnowledgeSourcesPanel = () => {
   const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+  const allKS = useRef(chat.get('knowledgeSources') ?? [])
+  const { close } = useRightPanel()
+
+  const onSubmit = useCallback(() => {
+    chat.set('knowledgeSources', allKS.current)
+    close()
+  }, [chat])
+
+  useEffect(() => {
+    allKS.current = chat.get('knowledgeSources') ?? []
+  }, [chat])
   
-  return <RightPanelTabs tabs={[
-    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" /> },
-    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" /> },
-    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" /> },
+  return <RightPanelTabs key={chat.id} tabs={[
+    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
   ]} />
 }
 
-const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
+const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
   const t = useTranslate(dictionary)
-  const { close } = useRightPanel()
-  const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
   const knowledgeSources = aiClient.knowledgeSources.useQuery({ visibility, order: 'a-to-z' })
-  const [hasChanged, setChanged] = useState(false)
   const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
-    const currentlySelected = chat.get('knowledgeSources')?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.id))
+    const currentlySelected = allKS.current?.map(ks => ks.id)
+    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
   })())
   const filtered = useMemo(
     () => filter
@@ -55,10 +72,15 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
     [knowledgeSources, filter, value],
   )
 
-  function submit() {
-    if (value) chat.set('knowledgeSources', value.map(({ id, name }) => ({ id, label: name })))
-    close()
-  }
+  const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
+    setValue((current) => {
+      const added = difference(newValue, current)
+      const removed = difference(current, newValue)
+      allKS.current = allKS.current?.filter(ks => !removed.some(r => r.slug === ks.id)) ?? []
+      allKS.current = uniqBy([...allKS.current, ...added.map(ks => ({ id: ks.slug, label: ks.name }))], 'id')
+      return newValue
+    })
+  }, [])
 
   return (
     <>
@@ -68,13 +90,13 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
           options={filtered}
           keygen={ks => ks.id}
           value={value}
-          onChange={(value) => {
-            setValue(value)
-            setChanged(true)
-          }}
+          onChange={onChange}
           renderLabel={ks => ks.name}
           renderDescription={ks => ks.description}
-          optionClassName={ks => (filter && !ks.name.includes(filter) && value.includes(ks)) ? 'filtered-out' : ''}
+          optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
+            ? 'filtered-out'
+            : ''
+          }
           className="option-list"
         />}
         {!!knowledgeSources.length && !filtered.length && (
@@ -82,7 +104,7 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
         )}
         {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      <Button onClick={submit} disabled={!hasChanged}>{t.apply}</Button>
+      <Button onClick={onSubmit}>{t.apply}</Button>
     </>
   )
 }

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,8 +1,9 @@
-import { ChevronRight, FaceSmile, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
+import { ChevronRight, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
 import { IconButton } from '@citric/ui'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
-import { useWidget } from '../../context/hooks'
+import { useCurrentChatState, useWidget } from '../../context/hooks'
 import { MessageInputFeatures } from '../../features'
 import { useMessageInputDictionary } from './dictionary'
 
@@ -20,6 +21,7 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
   const widget = useWidget()
   const featureButtonsWidth = useRef<number | undefined>()
   const featureButtons = useRef<HTMLDivElement>(null)
+  const agent = useCurrentChatState('agent')
   const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack
 
   useEffect(() => {
@@ -37,12 +39,12 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
           {features.agent && (
-            <IconButton aria-label={t.agent} title={t.agent} onClick={() => widget.set('isAgentSelectionOpen', true)}>
-              <FaceSmile />
+            <IconButton aria-label={t.agent} title={t.agent} className="agent" onClick={() => widget.set('panel', 'agent')}>
+              {agent?.image ? <img src={agent.image} /> : <MiniLogo />}
             </IconButton>
           )}
           {features.workspace && (
-            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('isWorkspaceSelectionOpen', true)}>
+            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
               <Workspace />
             </IconButton>
           )}
@@ -50,13 +52,13 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
             <IconButton
               aria-label={t.knowledgeSource}
               title={t.knowledgeSource}
-              onClick={() => widget.set('isKnowledgeSourceSelectionOpen', true)}
+              onClick={() => widget.set('panel', 'ks')}
             >
               <KnowledgeSource />
             </IconButton>
           )}
           {features.stack && (
-            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('isStackSelectionOpen', true)}>
+            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'stack')}>
               <Stack />
             </IconButton>
           )}

package/src/views/MessageInput/index.tsx

@@ -9,15 +9,12 @@ import { ChatEntry } from '../../state/ChatEntry'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
-import { MessageInputBox } from './styled'
+import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
 interface Props {
   features: MessageInputFeatures,
 }
 
-const MAX_INPUT_HEIGHT = 300
-const MAX_INPUT_HEIGHT_MINIMIZED = 30
-
 export const MessageInput = ({ features }: Props) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
@@ -58,7 +55,7 @@ export const MessageInput = ({ features }: Props) => {
           onKeyDown={onKeyDown}
           onIncreaseSize={() => setExpanded(false)}
           onResetSize={() => !expansionLocked.current && setExpanded(true)}
-          maxHeight={isMinimized ? MAX_INPUT_HEIGHT_MINIMIZED : MAX_INPUT_HEIGHT}
+          maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
         />
         <ButtonGroup
           features={features}

package/src/views/MessageInput/styled.ts

@@ -4,6 +4,8 @@ import { styled } from 'styled-components'
 
 const INFO_BAR_HEIGHT = 42
 const INFO_BAR_DISPLACEMENT = 4
+export const MAX_INPUT_HEIGHT = 300
+export const MIN_INPUT_HEIGHT = 24
 
 export const MessageInputBox = styled.div`
   display: flex;
@@ -103,7 +105,7 @@ export const MessageInputBox = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 4px;
-    margin-bottom: 3px;
+    margin-bottom: 1px;
 
     button {
       border: none;
@@ -144,6 +146,12 @@ export const MessageInputBox = styled.div`
           transform: rotate(180deg);
         }
       }
+
+      &.agent img {
+        width: 80%;
+        height: 80%;
+        border-radius: 50%;
+      }
     }
 
     .feature-buttons {
@@ -185,8 +193,8 @@ export const MessageInputBox = styled.div`
     border: none;
     flex: 1;
     padding: 0;
-    height: 30px;
-    padding: 2px 0;
+    height: ${MIN_INPUT_HEIGHT}px;
+    padding: 0;
     transition: height 0.3s;
     background-color: transparent;
     &:focus {