@stack-spot/ai-chat-widget 0.10.0 → 1.0.0

package/src/views/MessageInput/index.tsx

@@ -1,14 +1,15 @@
 import { listToClass } from '@stack-spot/portal-theme'
-import { last } from 'lodash'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
 import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
 import { MessageInputFeatures } from '../../features'
+import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
+import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
 interface Props {
@@ -24,13 +25,14 @@ export const MessageInput = ({ features }: Props) => {
   const isLoading = useCurrentChatState('isLoading') ?? false
   const value = useCurrentChatState('nextMessage') ?? ''
   const isMinimized = useWidgetState('isMinimized')
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
 
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
     const code = chat.get('codeSelection')
     const language = chat.get('codeLanguage')
-    const prompt = code ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
+    const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
     chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
     chat.set('nextMessage', '')
     setFocused(false)
@@ -43,12 +45,18 @@ export const MessageInput = ({ features }: Props) => {
     }
   }, [onSend])
 
+  useEffect(() => {
+    if (!isLoading) textAreaRef.current?.focus()
+  }, [isLoading])
+
   return (
     <MessageInputBox aria-busy={isLoading} className="message-input">
       <ProgressBar visible={isLoading} shimmer />
       <InfoBar />
       <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
+        <QuickCommandSelector inputRef={textAreaRef} />
         <AdaptiveTextArea
+          ref={textAreaRef}
           disabled={isLoading}
           placeholder={t.placeholder}
           onChange={e => chat.set('nextMessage', e.target.value)}
@@ -63,7 +71,7 @@ export const MessageInput = ({ features }: Props) => {
         <ButtonGroup
           features={features}
           onSend={onSend}
-          onCancel={() => last(chat.getMessages())?.abort()}
+          onCancel={() => chat.abort()}
           expanded={expanded}
           isLoading={isLoading}
           setExpanded={(value) => {

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/dist/components/Editor.d.ts

@@ -1,9 +0,0 @@
-import { WithStyle } from '@stack-spot/portal-theme';
-interface Props extends WithStyle {
-    value: string;
-    onChange: (value: string) => void;
-    language: string;
-}
-export declare const Editor: ({}: Props) => null;
-export {};
-//# sourceMappingURL=Editor.d.ts.map

package/dist/components/Editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD,UAAU,KAAM,SAAQ,SAAS;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,MAAM,OAAQ,KAAK,SAAS,CAAA"}

package/dist/components/Editor.js

@@ -1,2 +0,0 @@
-export const Editor = ({}) => null;
-//# sourceMappingURL=Editor.js.map

package/dist/components/Editor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAS,EAAE,EAAE,CAAC,IAAI,CAAA"}

package/src/components/Editor.tsx

@@ -1,12 +0,0 @@
-/* eslint-disable no-empty-pattern */
-/* Copiar do portal AI? */
-import { WithStyle } from '@stack-spot/portal-theme'
-
-
-interface Props extends WithStyle {
-  value: string,
-  onChange: (value: string) => void,
-  language: string,
-}
-
-export const Editor = ({}: Props) => null