fix height of chatplugin

airyhq · Jul 20, 2021 · c713c1c · c713c1c
1 parent 75cc751
commit c713c1c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/frontend/chat-plugin/image/BUILD b/frontend/chat-plugin/image/BUILD
@@ -26,6 +26,8 @@ web_library(
     module_deps = ["//frontend/chat-plugin/lib:chat-plugin"] + module_deps,
     output = {
         "libraryExport": "AiryWidget",
+        # Automatically detects script host and uses it for further loading
+        # https://webpack.js.org/guides/public-path/#automatic-publicpath
         "publicPath": "auto",
         "filename": "s.js",
     },

diff --git a/frontend/chat-plugin/image/index.tsx b/frontend/chat-plugin/image/index.tsx
@@ -10,6 +10,7 @@ anchor.style.cssText = `
 position: fixed;
 width: -webkit-fill-available;
 width: -moz-available;
+height: 100%;
 right: 0;
 bottom: 0;
 z-index: 9999;

diff --git a/frontend/chat-plugin/lib/src/AiryChatPlugin.tsx b/frontend/chat-plugin/lib/src/AiryChatPlugin.tsx
@@ -13,6 +13,7 @@ export const AiryChatPlugin = (props: AiryChatPluginProps) => {
 
   const customStyle = {
     background: 'transparent',
+    height: '100%',
     ...(config.config?.primaryColor && {
       '--color-airy-blue': config.config?.primaryColor,
     }),

diff --git a/frontend/chat-plugin/lib/src/airyRenderProps/AiryInputBar/index.module.scss b/frontend/chat-plugin/lib/src/airyRenderProps/AiryInputBar/index.module.scss
@@ -4,6 +4,7 @@
 .inputBar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 8px 0;
   margin: 0 8px;
   border-top: 1px solid var(--color-template-gray);
@@ -17,7 +18,7 @@
   min-height: 32px;
   width: 100%;
   padding: 4px 4px 0 8px;
-  margin-right: 8px;
+  margin: 0 8px 0 0;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
   letter-spacing: 0;
@@ -32,6 +33,7 @@
   width: 100%;
   justify-content: center;
   margin: 0 0 8px 0px;
+
   a {
     display: flex;
     color: var(--color-text-gray);
@@ -40,11 +42,13 @@
     font-family: 'Lato', sans-serif;
     font-size: 12px;
     align-items: center;
+
     svg {
       height: 20px;
       width: 20px;
       transform: scale(0.7);
       margin-top: 1px;
+
       path {
         fill: var(--color-text-gray);
       }
@@ -106,7 +110,7 @@
     max-height: 28px;
     width: auto;
     height: auto;
-    padding: 0px 1px 1px 0px;
+    padding: 0 1px 1px 0;
   }
 
   svg {
@@ -120,7 +124,6 @@
   justify-content: center;
   align-items: flex-end;
   height: 100%;
-  margin-bottom: 10px;
 }
 
 .emojiDrawer {
@@ -144,6 +147,7 @@
   svg {
     width: 22px;
     pointer-events: none;
+
     path {
       fill: #a0abb2;
     }
@@ -174,6 +178,7 @@
 .iconButton:hover {
   background-color: var(--color-background-blue);
   border-radius: 50%;
+
   svg {
     path {
       fill: #4bb3fd;

diff --git a/frontend/chat-plugin/lib/src/airyRenderProps/AiryInputBar/index.tsx b/frontend/chat-plugin/lib/src/airyRenderProps/AiryInputBar/index.tsx
@@ -134,7 +134,7 @@ const AiryInputBar = (props: AiryInputBarProps) => {
           ref={textInputRef}
           className={style.textArea}
           placeholder={'Start typing...'}
-          autoFocus={!config.showMode ? true : false}
+          autoFocus={!config.showMode}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           value={props.messageString}
@@ -143,7 +143,7 @@ const AiryInputBar = (props: AiryInputBarProps) => {
         <div className={style.buttonContainer}>
           <InputOptions />
           <button className={style.sendButton} type="submit" data-cy={dataCyButtonId}>
-            {config?.sendMessageIcon ? <img src={config.sendMessageIcon} /> : <Paperplane />}
+            {config?.sendMessageIcon ? <img src={config.sendMessageIcon} alt={'send message'} /> : <Paperplane />}
           </button>
         </div>
       </form>