improve css and fix couple bugs

Couchbase-Ecosystem · Dec 22, 2023 · 29eab8f · 29eab8f
1 parent b0c46d7
commit 29eab8f
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,9 +85,10 @@
   "dependencies": {
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@fortawesome/fontawesome-free": "^5.12.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.5.2",
     "@popperjs/core": "^2.11.8",
     "@types/decompress": "^4.2.4",

diff --git a/src/commands/iq/chat/iqChatHandler.ts b/src/commands/iq/chat/iqChatHandler.ts
@@ -121,7 +121,6 @@ const getFinalResponse = async (message: string, additionalContext: IAdditionalC
 export const iqChatHandler = async (iqPayload: any, cacheService: CacheService, allMessages: IStoredMessages[], webview: WebviewView) => {
     const newMessage: string = iqPayload.newMessage, orgId: string = iqPayload.orgId, chatId: string = iqPayload.chatId, qaId: string = iqPayload.qaId;
     const userChats = iqPayload.userChats || [];
-
     const jwtToken = Memory.state.get<string>("vscode-couchbase.iq.jwtToken");
     if (jwtToken === undefined) {
         return {

diff --git a/src/reactViews/iq/chatscope/src/components/Buttons/AttachmentButton.jsx b/src/reactViews/iq/chatscope/src/components/Buttons/AttachmentButton.jsx
@@ -6,14 +6,15 @@ import Button from "./Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPaperclip } from "@fortawesome/free-solid-svg-icons/faPaperclip";
 
-export const AttachmentButton = ({ className, children, ...rest }) => {
+export const AttachmentButton = ({ className, children, icon={faPaperclip}, ...rest }) => {
   const cName = `${prefix}-button--attachment`;
 
   return (
     <Button
       {...rest}
       className={classNames(cName, className)}
-      icon={<FontAwesomeIcon icon={faPaperclip} />}
+      icon={<FontAwesomeIcon icon={icon} />}
+
     >
       {children}
     </Button>

diff --git a/src/reactViews/iq/chatscope/src/components/MessageInput/MessageInput.d.ts b/src/reactViews/iq/chatscope/src/components/MessageInput/MessageInput.d.ts
@@ -1,5 +1,6 @@
 import type {MouseEvent, ReactElement} from "react";
 import type {ChatComponentPropsRef} from "../../types";
+import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 
 export interface MessageInputProps {
   value?: string;
@@ -16,6 +17,7 @@ export interface MessageInputProps {
   attachButton?: boolean;
   attachDisabled?: boolean;
   onAttachClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
+  attachIcon?: IconDefinition;
 }
 
 export declare const MessageInput: (props: ChatComponentPropsRef<MessageInputProps, "div">) => ReactElement;

diff --git a/src/reactViews/iq/chatscope/src/components/MessageInput/MessageInput.jsx b/src/reactViews/iq/chatscope/src/components/MessageInput/MessageInput.jsx
@@ -82,6 +82,7 @@ function MessageInputInner(
     sendButton,
     attachButton,
     onAttachClick,
+    attachIcon,
     ...rest
   },
   ref
@@ -160,7 +161,7 @@ function MessageInputInner(
   };
 
   const handleChange = (innerHTML, textContent, innerText) => {
-    setStateValue(innerHTML);
+    setStateValue(innerText);
     if (typeof sendDisabled === "undefined") {
       setStateSendDisabled(textContent.length === 0);
     }
@@ -174,6 +175,7 @@ function MessageInputInner(
     onChange(innerHTML, textContent, innerText, content[2]);
   };
 
+
   const cName = `${prefix}-message-input`,
     ph = typeof placeholder === "string" ? placeholder : "";
 
@@ -191,6 +193,7 @@ function MessageInputInner(
           <AttachmentButton
             onClick={onAttachClick}
             disabled={disabled === true || attachDisabled === true}
+            icon={attachIcon}
           />
         </div>
       )}
@@ -208,6 +211,7 @@ function MessageInputInner(
             placeholder={ph}
             onKeyPress={handleKeyPress}
             onChange={handleChange}
+
             activateAfterChange={activateAfterChange}
             value={stateValue}
           />

diff --git a/src/reactViews/iq/pages/chatscreen/IqChat.scss b/src/reactViews/iq/pages/chatscreen/IqChat.scss
@@ -64,6 +64,7 @@
   cursor: pointer;
   margin: 0 5px;
   font-size: 1.5rem; 
+  background: transparent !important;
 }
 
 .likeButton:hover, .dislikeButton:hover {