feat: update chat prompt UI

abelflopes · Jun 23, 2024 · 86f9287 · 86f9287
1 parent f4f2d4a
commit 86f9287
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 21 deletions.
diff --git a/packages/components/_provisional/src/chat/ChatPrompt/index.module.scss b/packages/components/_provisional/src/chat/ChatPrompt/index.module.scss
@@ -3,22 +3,26 @@
 
 .root {
   display: flex;
+  align-items: center;
   padding: get-spacing(1);
-  background: get-color(neutral-light-2);
+  border-radius: get-spacing(1);
   gap: get-spacing(1);
+  border: solid get-css-var(spacing, border) get-color(highlight-primary-light);
 }
 
 .field {
   flex-grow: 1;
   flex-shrink: 1;
 }
 
-.error {
+.description {
   @include text-base;
   @include text-variation(smallest);
 
-  padding: get-spacing(0.25) get-spacing(1);
-  margin: 0;
-  background-color: get-color(status-negative);
-  color: get-color(neutral-light-1);
+  color: get-color(neutral-dark-1);
+  margin: 0 0 get-spacing(0.3);
+
+  &.error {
+    color: get-color(status-negative);
+  }
 }
diff --git a/packages/components/_provisional/src/chat/ChatPrompt/index.tsx b/packages/components/_provisional/src/chat/ChatPrompt/index.tsx
@@ -1,14 +1,13 @@
-// React
 import React, { useCallback } from "react";
-// Styles
+import classNames from "classnames";
 import styles from "./index.module.scss";
-// Icons - https://react-icons.github.io/react-icons
-import { LuSendHorizonal } from "react-icons/lu";
-// Components
 import { Button } from "@react-ck/button";
 import { Input } from "@react-ck/input";
 import { Icon } from "@react-ck/icon";
-import classNames from "classnames";
+import { IconLightning } from "@react-ck/icon/icons/IconLightning";
+import { IconAttach } from "@react-ck/icon/icons/IconAttach";
+import { IconDocument } from "@react-ck/icon/icons/IconDocument";
+import { IconArrowRightCircle } from "@react-ck/icon/icons/IconArrowRightCircle";
 
 export interface ChatPromptProps {
   placeholder: string;
@@ -41,27 +40,54 @@ export const ChatPrompt = ({
   return (
     <>
       {status ? (
-        <p className={classNames(status.type === "error" && styles.error)}>{status.description}</p>
+        <p className={classNames(styles.description, status.type === "error" && styles.error)}>
+          {status.description}
+        </p>
       ) : null}
       <form className={styles.root} onSubmit={onSubmit}>
+        <Icon size="m">
+          <IconLightning />
+        </Icon>
         <Input
           className={styles.field}
           autoComplete="off"
           name="message"
           type="text"
+          skin="ghost"
           placeholder={placeholder}
           // eslint-disable-next-line jsx-a11y/no-autofocus -- Exception case
           autoFocus
           required
         />
-        <Button
-          icon={
-            <Icon>
-              <LuSendHorizonal />
-            </Icon>
-          }>
-          Send
-        </Button>
+        <div>
+          <Button
+            size="s"
+            skin="ghost"
+            icon={
+              <Icon>
+                <IconDocument />
+              </Icon>
+            }
+          />
+          <Button
+            size="s"
+            skin="ghost"
+            icon={
+              <Icon>
+                <IconAttach />
+              </Icon>
+            }
+          />
+          <Button
+            size="s"
+            skin="ghost"
+            icon={
+              <Icon>
+                <IconArrowRightCircle />
+              </Icon>
+            }
+          />
+        </div>
       </form>
     </>
   );