fix(vue): styling and other issues with searchbox and AIAnswer

appbaseio · Aug 10, 2023 · 41f1c1f · 41f1c1f
1 parent eabf864
commit 41f1c1f
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 15 deletions.
diff --git a/packages/vue-playground b/packages/vue-playground
diff --git a/packages/vue/src/components/search/AIAnswer.jsx b/packages/vue/src/components/search/AIAnswer.jsx
@@ -195,8 +195,12 @@ const AIAnswer = defineComponent({
 				// pushing message history so far
 				if (messagesHistory && Array.isArray(messagesHistory)) {
 					finalMessages.push(
-						...messagesHistory.filter((msg) => msg.role !== AI_ROLES.SYSTEM).slice(1),
+						...messagesHistory.filter((msg) => msg.role !== AI_ROLES.SYSTEM),
 					);
+
+					if (finalMessages[0].role === AI_ROLES.USER) {
+						finalMessages.shift();
+					}
 				} else if (response && response.answer && response.answer.text) {
 					finalMessages.push({ role: AI_ROLES.ASSISTANT, content: response.answer.text });
 					if (!this.AISessionId)

diff --git a/packages/vue/src/styles/AIAnswer.js b/packages/vue/src/styles/AIAnswer.js
@@ -390,17 +390,6 @@ export const MessageInput = styled(TextArea)`
 			? props.theme.colors.titleColor
 			: props.theme.colors.textColor};
 
-	::placeholder {
-		color: ${(props) => props.theme.colors.textColor};
-	}
-
-	:-ms-input-placeholder {
-		color: ${(props) => props.theme.colors.textColor};
-	}
-
-	::-ms-input-placeholder {
-		color: ${(props) => props.theme.colors.textColor};
-	}
 	${({ enterButton }) =>
 		enterButton
 		&& `

diff --git a/packages/vue/src/styles/Input.js b/packages/vue/src/styles/Input.js
@@ -326,6 +326,8 @@ const TextArea = styled('textarea')`
 	height: 42px;
 	padding-left: 0;
 	padding-right: 0;
+	border-color: transparent;
+
 `;
 
 const Actions = styled('div')`

diff --git a/packages/vue/src/styles/InputAddon.js b/packages/vue/src/styles/InputAddon.js
@@ -5,8 +5,8 @@ const InputAddon = styled('span')`
   align-items: center;
   justify-content: center;
   background-color: #fafafa;
-  border: 1px solid #ccc;
-  border-radius: 2px;
+  border: 1px solid transparent;
+  border-radius: 6px;
   color: rgba(0, 0, 0, 0.85);
   font-size: 14px;
   font-weight: 400;