@stack-spot/ai-chat-widget 3.0.0-beta.1 → 3.0.1-beta.1

package/src/views/MessageInput/styled.ts

@@ -1,3 +1,4 @@
+import { Flex } from '@citric/core'
 import { theme } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
@@ -302,3 +303,39 @@ export const MessageInputBox = styled.div`
     }
   }
 `
+
+export const stylesModelSwitcher = {
+  selection: {
+    minHeight: '300px',
+    position: 'absolute',
+    bottom: 'calc(100% + 10px)',
+    right: '0',
+    margin: '0',
+  },
+}
+
+export const RowWrapperStyled = styled(Flex)`
+  width: 100%;
+  justify-content: end;
+  margin-right: 4px;
+  ul {
+    margin: 0;
+  }
+  .button-select-model {
+    border-radius: 15px !important;
+  }
+  #menuModelSwitcher {
+    background-color: ${theme.color.light[500]};
+  }
+
+  .selection-list-content {
+    .action :hover {
+      cursor: pointer;
+      background-color: ${theme.color.light[600]};
+    }
+    ul :hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`

package/src/views/Resources.tsx

@@ -1,4 +1,4 @@
-import { Accordion, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
+import { Accordion, Column, Icon, ImageBox, ImageWithFallback, Row, Text } from '@stack-spot/citric-react'
 import { agentToolsClient } from '@stack-spot/portal-network'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -27,9 +27,16 @@ export const Resources = () => {
 }
 
 const StyledAccordion = styled(Accordion)`
+  padding: 8px;
+  margin: 8px;
   &[data-citric="accordion"] {
     background-color: ${theme.color.light[400]};
   }
+  label {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 `
 
 const ResourcesPanel = () => {
@@ -39,7 +46,6 @@ const ResourcesPanel = () => {
     const chat = widget.chatTabs.getAll().find(c => c.id === chatId)
     return chat?.getMessages().find(m => m.id === messageId)?.getValue()
   }, [messageId])
-
   const [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
   const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
     { enabled: !!message?.agent?.id })
@@ -51,11 +57,11 @@ const ResourcesPanel = () => {
   const hasAgentTool = useMemo(() => message?.tools?.some(id => agentsTools?.find((agent) => agent.id === id)), [messageId, toolKits])
 
   const header = (image?: string, label?: string) => (
-    <Row gap="10px">
-      <ImageBox>
+    <Row>
+      <ImageBox >
         <ImageWithFallback src={image} fallback={<Icon icon="Agent" />} aria-label={label} title={label} />
       </ImageBox>
-      <Text>{label}</Text>
+      <Text style={{ marginLeft: '8px' }}>{label}</Text>
     </Row>
   )
   
@@ -65,23 +71,25 @@ const ResourcesPanel = () => {
         {[...(tools || []), ...(customTools || [])].map(
           (tool) =>
             tool && (
-              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card">
+              <StyledAccordion key={tool.id} header={header(tool?.image, tool?.name)} appearance="card" maxHeight={120}>
                 {tool?.description}
               </StyledAccordion>
             ))}
       </>
       {
         hasAgentTool && 
-        <>
+        <Column>
           {message?.tools?.map((id) => {
             const agentTool = agentsTools?.find((agent) => agent.id === id)
             return (
-              <StyledAccordion key={id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
-                <AgentDescription  agentId={id} />
+              <StyledAccordion key={agentTool?.id} header={header(agentTool?.avatar || undefined, agentTool?.name)}>
+                <Row>
+                  <AgentDescription  agentId={id} />
+                </Row>
               </StyledAccordion>
             )},
           )}
-        </>
+        </Column>
       }
     </>
   )