@stack-spot/ai-chat-widget 0.11.0 → 1.1.0

package/src/views/MessageInput/styled.ts

@@ -82,6 +82,7 @@ export const MessageInputBox = styled.div`
 
   .action-box {
     display: flex;
+    position: relative;
     flex-direction: row;
     gap: 4px;
     align-items: end;
@@ -201,4 +202,140 @@ export const MessageInputBox = styled.div`
       box-shadow: none;
     }
   }
+
+  .quick-command-selector {
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[500]};
+    box-shadow: 0px 2px 16px 0px #0000005C;
+    display: flex;
+    flex-direction: column;
+    width: 480px;
+    bottom: 55px;
+
+    .loading, .error {
+      padding-bottom: 26px;
+      p {
+        width: 200px;
+        text-align: center;
+        line-height: 20px;
+      }
+    }
+
+    .empty {
+      padding-bottom: 26px;
+      width: 200px;
+      text-align: center;
+      line-height: 20px;
+      margin: auto;
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      padding: 8px;
+      font-family: 'San Francisco';
+      font-weight: 500;
+      font-size: 11px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    ul.tabs {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        display: flex;
+        flex-direction: column;
+      }
+
+      button {
+        box-sizing: border-box;
+        color: ${theme.color.light[700]};
+        text-align: left;
+        padding: 10px;
+        font-weight: 600;
+        font-size: 12px;
+        transition: background-color 0.3s;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        outline: none;
+
+        &:hover, &.active, &:focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        &.active {
+          border-left: 1px solid ${theme.color.light.contrastText};
+          color: ${theme.color.light.contrastText};
+        }
+      }
+    }
+
+    ul.command-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow-y: auto;
+      flex: 1;
+      max-height: 170px;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+
+        &:hover, &.focus {
+          background-color: ${theme.color.light[600]};
+        }
+
+        button.qc {
+          flex: 1;
+          border: none;
+          text-align: left;
+          background-color: transparent;
+          text-align: left;
+          outline: none;
+          overflow: hidden;
+          cursor: pointer;
+          
+          .qc-title {
+            font-size: 11px;
+            margin: 0 0 4px 0;
+            color: ${theme.color.light.contrastText};
+            text-transform: uppercase;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+          .qc-description {
+            color: ${theme.color.light[700]};
+            font-size: 12px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
 `

package/src/views/MinimizedHeader.tsx

@@ -47,6 +47,10 @@ const Header = styled.header`
   }
 `
 
+/**
+ * When the chat is minimized, there's no chat selection, i.e. the tabs are not rendered. In place of the tabs this header with the current
+ * chat name and buttons to collapse and close is rendered.
+ */
 export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
   const t = useTranslate(dictionary)
   const { active } = useChatTabs()

package/src/views/Stacks.tsx

@@ -11,6 +11,9 @@ import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Stacks = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')

package/src/views/Workspaces.tsx

@@ -11,6 +11,9 @@ import { RightPanelForm } from '../components/RightPanelForm'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 
+/**
+ * Renders the Workspace selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Workspaces = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')