@quidgest/chatbot 0.5.1 → 0.5.3

package/dist/style.css

@@ -1 +1 @@
-.markdown-renderer pre,.markdown-renderer code{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;overflow-x:auto}.markdown-renderer pre{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.markdown-renderer code{padding:.2rem .4rem;border-radius:4px;font-size:.875rem}.q-field-preview{position:relative;display:flex;flex-direction:column;margin:1rem .25rem}.q-field-preview__toolbar{z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.1rem .2rem}.q-field-preview__content{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.q-field-preview__footer{display:flex;flex-direction:row;margin-top:.25rem}.q-field-preview:first-child{margin:0 1rem .25rem .25rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:.25rem}.generating-text{font-size:.9rem;color:var(--q-theme-primary)}.dots-container{display:flex;align-items:center;gap:.1rem}.dot{font-size:16px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}.q-chatbot{width:100%;display:flex;flex-direction:column;height:100%}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;gap:.75rem;flex-direction:column;overflow:hidden}.q-chatbot__footer-container{padding:.8rem 0 0}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot__image-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;width:fit-content}.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__image-preview img:hover+.q-chatbot__remove-image,.q-chatbot__image-preview img:focus+.q-chatbot__remove-image{opacity:1;pointer-events:auto}.q-chatbot__image-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot .q-button.q-chatbot__remove-image{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:12px;border:none;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.q-chatbot .q-button.q-chatbot__remove-image:hover,.q-chatbot .q-button.q-chatbot__remove-image:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/.25);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/.25);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:space-between;max-width:100%;padding:.25rem .5rem}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{padding:.3rem .5rem;background-color:#eaebec;width:fit-content;min-height:2rem;white-space:normal;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem;white-space:normal}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}.hidden-input{display:none}
+.markdown-renderer pre,.markdown-renderer code{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}.markdown-renderer pre{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.markdown-renderer code{padding:.2rem .4rem;border-radius:4px;font-size:.875rem}.q-field-preview{position:relative;display:flex;flex-direction:column;margin:1rem .25rem}.q-field-preview__toolbar{z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.1rem .2rem}.q-field-preview__content{position:relative;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;padding:.75rem 1rem;font-size:.875rem}.q-field-preview__footer{display:flex;flex-direction:row;margin-top:.25rem}.q-field-preview:first-child{margin:0 1rem .25rem .25rem}.pulsing-dots{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:.25rem}.generating-text{font-size:.9rem;color:var(--q-theme-primary)}.dots-container{display:flex;align-items:center;gap:.1rem}.dot{font-size:16px;line-height:1;animation:pulse 1s infinite;color:var(--q-theme-primary)}@keyframes pulse{0%,to{transform:scale(.8);opacity:.6}50%{transform:scale(1);opacity:1}}.q-chatbot__file-preview img,.q-chatbot__image-preview img{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:.25rem;border:1px solid #eaebec;overflow:hidden}.q-chatbot__file-preview{display:inline-flex;align-items:center;position:relative;margin-top:.5rem;gap:.25rem;width:fit-content}.q-chatbot__file-preview img:focus{outline:solid rgb(var(--q-theme-info-rgb)/50%)}.q-chatbot__file-preview-container{display:flex;border-radius:.5rem;padding:.25rem .5rem;max-width:320px;align-items:center;justify-content:center;border:1px solid var(--q-theme-primary-light)}.q-chatbot__file-icon-container{display:flex;align-items:center;justify-content:center;border-radius:8px;width:36px;height:36px;flex-shrink:0;margin-right:10px;background:var(--q-theme-primary-light)}.q-chatbot__file-icon-container .q-icon{width:20px;height:20px}.q-chatbot__file-info{display:flex;flex-direction:column;overflow:hidden}.q-chatbot__file-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-chatbot__file-extension{font-size:10px}.q-chatbot{width:100%;height:100%;display:flex;flex-direction:column}.q-chatbot input{line-height:1.5rem}.q-chatbot .q-input-group .i-text__field{border-radius:0;flex:1}.q-chatbot__remove-file{position:absolute;top:-8px;right:-8px}.q-chatbot__text p{margin:0}.q-chatbot__content{background-color:#fff;border:1px solid #eaebec;height:100%;width:100%;display:flex;flex-direction:column;gap:.75rem;overflow:hidden}.q-chatbot__footer-container{padding:.8rem 0 0}.q-chatbot__input-wrapper{display:flex;flex-direction:column;position:relative}.q-chatbot .q-button.q-chatbot__remove-file{position:absolute;top:-5px;right:-5px;background-color:#00000080;color:#fff;border-radius:50%;padding:5px;font-size:10px;border:none}.q-chatbot .q-button.q-chatbot__remove-file:hover,.q-chatbot .q-button.q-chatbot__remove-file:focus{opacity:1;pointer-events:auto}.q-chatbot__send-container{padding-bottom:.25rem;display:flex;justify-content:space-between;width:100%}.q-chatbot__send-container .q-chatbot__send,.q-chatbot__send-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__send-container .spacer{flex-grow:1}.q-chatbot__footer{position:sticky;padding:0 .5rem;border:1px solid #eaebec;border-radius:.25rem;bottom:0;width:100%;display:flex;flex-direction:column;gap:.25rem}.q-chatbot__footer-disabled{background-color:rgb(var(--q-theme-neutral-light-rgb)/25%);cursor:not-allowed}.q-chatbot__footer.drag-over{border:2px dashed rgb(var(--q-theme-primary-rgb)/25%);background-color:#018bd20d}.q-chatbot__footer .q-chatbot__input{min-height:50px;max-height:100px;border-bottom:1px solid #eaebec;overflow-y:auto}.q-chatbot__footer .q-text-area{max-height:100%;overflow-y:auto}.q-chatbot__footer .q-text-area .q-field__control{border:none}.q-chatbot__upload-container{display:flex;justify-content:flex-start;padding:.25rem 0}.q-chatbot__upload-container .q-chatbot__upload{border-radius:1rem}.q-chatbot__messages-container{display:flex;flex-direction:column;flex-grow:1;padding:0 1rem 2rem;gap:1.5rem;overflow-y:auto}.q-chatbot__messages-wrapper{display:flex;max-width:100%;gap:.2rem}.q-chatbot__tools{display:flex;flex-direction:row;justify-content:space-between;max-width:100%;padding:.25rem .5rem}.q-chatbot__message-wrapper{display:flex;flex-direction:column;gap:.2rem}.q-chatbot__message-container{display:flex;flex-direction:column;gap:.25rem}.q-chatbot__messages-wrapper_right{justify-content:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-container{align-items:flex-end}.q-chatbot__messages-wrapper_right .q-chatbot__message-wrapper{display:flex;align-items:flex-end}.q-chatbot__profile.q-icon__img{border-radius:50%;height:2rem;width:2rem}.q-chatbot__message{padding:.3rem .5rem;background-color:#eaebec;width:fit-content;min-height:2rem;white-space:normal;border-radius:0 .5rem .5rem}.q-chatbot__messages-wrapper_right .q-chatbot__message{background-color:#018bd233;border-radius:.5rem 0 .5rem .5rem;white-space:normal}.q-chatbot__sender{white-space:nowrap;color:#7c858d;font-size:.7rem}.q-chatbot__retry-button{align-items:center;display:flex}.q-chatbot__dialog-title{margin:.5rem 0}.hidden-input{display:none}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/__tests__/parseFieldValue.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@quidgest/chatbot",
     "private": false,
-    "version": "0.5.1",
+    "version": "0.5.3",
     "type": "module",
     "license": "UNLICENSED",
     "main": "dist/index.cjs",
@@ -26,10 +26,13 @@
     "scripts": {
         "build": "rimraf ./dist && vite build",
         "build-types": "vue-tsc --emitDeclarationOnly --declaration -p tsconfig.json",
-        "lint": "pnpm lint:eslint && pnpm lint:prettier",
-        "lint:eslint": "eslint .",
-        "lint:prettier": "prettier src --check",
-        "lint:fix": "eslint . --fix && prettier --write --list-different src"
+        "format": "prettier --check --cache .",
+        "format:fix": "prettier --write --cache .",
+        "lint": "eslint --cache .",
+        "lint:fix": "pnpm lint --fix",
+        "lint:style": "stylelint \"**/*.scss\"",
+        "test": "vitest",
+        "test:coverage": "vitest run --coverage"
     },
     "dependencies": {
         "axios": "^1.9.0",
@@ -37,21 +40,40 @@
         "uuid": "^11.1.0"
     },
     "devDependencies": {
+        "@testing-library/user-event": "^14.6.1",
+        "@testing-library/vue": "^8.1.0",
         "@types/markdown-it": "^14.1.2",
         "@types/node": "^20.11.13",
         "@vitejs/plugin-vue": "^4.5.2",
+        "@vitest/coverage-v8": "^3.2.4",
+        "@vitest/eslint-plugin": "^1.3.7",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/eslint-config-typescript": "^14.6.0",
+        "@vue/test-utils": "^2.4.6",
         "eslint": "^9.9.0",
         "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-vue": "^10.4.0",
+        "happy-dom": "^18.0.1",
         "prettier": "^3.3.3",
         "rimraf": "^5.0.10",
         "sass": "^1.77.8",
+        "semver": "^7.7.2",
+        "stylelint": "^16.23.1",
+        "stylelint-config-standard-scss": "^15.0.1",
         "typescript": "^5.5.4",
         "vite": "^5.4.2",
         "vite-plugin-dts": "^3.9.1",
+        "vitest": "^3.2.4",
         "vue-tsc": "^1.8.27"
     },
     "peerDependencies": {
         "@quidgest/ui": "0.16.12",
         "vue": "3.5.17"
+    },
+    "engines": {
+        "node": ">=22.0.0",
+        "pnpm": ">=9.15.0",
+        "npm": "please-use-pnpm",
+        "yarn": "please-use-pnpm"
     }
 }

package/src/assets/styles/preview-file.scss

@@ -0,0 +1,70 @@
+.q-chatbot__file-preview img,
+.q-chatbot__image-preview img {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-right: 0.25rem;
+  border: 1px solid #eaebec;
+  overflow: hidden;
+}
+
+.q-chatbot__file {
+  &-preview {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    margin-top: 0.5rem;
+    gap: 0.25rem;
+    width: fit-content;
+
+    img:focus {
+      outline: solid rgb(var(--q-theme-info-rgb) / 50%);
+    }
+
+    &-container {
+      display: flex;
+      border-radius: 0.5rem;
+      padding: 0.25rem 0.5rem;
+      max-width: 320px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--q-theme-primary-light);
+    }
+  }
+
+  &-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    margin-right: 10px;
+    background: var(--q-theme-primary-light);
+
+    .q-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &-info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-name {
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-extension {
+    font-size: 10px;
+  }
+}

package/src/assets/styles/styles.scss

@@ -1,258 +1,226 @@
-@import '../../components/MarkdownRender/markdown-render.scss';
-@import '../../components/FieldPreview/field-preview.scss';
-@import '../../components/PulseDots/pulse-dots.scss';
+@import '../../components/MarkdownRender/markdown-render';
+@import '../../components/FieldPreview/field-preview';
+@import '../../components/PulseDots/pulse-dots';
+@import '../styles/preview-file';
 
 .q-chatbot {
-    width: 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  input {
+    line-height: 1.5rem;
+  }
+
+  & .q-input-group .i-text__field {
+    border-radius: 0;
+    flex: 1;
+  }
+
+  &__remove-file {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+
+  &__text {
+    p {
+      margin: 0;
+    }
+  }
+
+  &__content {
+    background-color: white;
+    border: 1px solid #eaebec;
     height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    height: 100%;
-
-    input {
-        line-height: 1.5rem;
-    }
-
-    & .q-input-group .i-text__field {
-        border-radius: 0;
-        flex: 1;
-    }
-
-    &__text {
-        p {
-            margin: 0;
-        }
-    }
-
-    &__content {
-        background-color: white;
-        border: 1px solid #eaebec;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    &__footer-container {
-        padding: .8rem 0 0 0;
-    }
+    gap: 0.75rem;
+    overflow: hidden;
+  }
 
-    &__input-wrapper {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
+  &__footer-container {
+    padding: 0.8rem 0 0;
+  }
 
-    &__image-preview {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-        margin-top: 0.5rem;
-        width: fit-content;
-
-        img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            border-radius: 4px;
-            margin-right: 0.25rem;
-            border: 1px solid #eaebec;
-            overflow: hidden;
-
-            &:hover,
-            &:focus {
-                & + .q-chatbot__remove-image {
-                    opacity: 1;
-                    pointer-events: auto;
-                }
-            }
-
-            &:focus {
-                outline: solid rgb(var(--q-theme-info-rgb) / 50%);
-            }
-        }
-    }
+  &__input-wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .q-button.q-chatbot__remove-file {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background-color: rgb(0 0 0 / 50%);
+    color: white;
+    border-radius: 50%;
+    padding: 5px;
+    font-size: 10px;
+    border: none;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &__send-container {
+    padding-bottom: 0.25rem;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
 
-    .q-button.q-chatbot__remove-image {
-        position: absolute;
-        top: -5px;
-        right: -5px;
-        background-color: rgba(0, 0, 0, 0.5);
-        color: white;
-        border-radius: 50%;
-        padding: 5px;
-        font-size: 12px;
-        border: none;
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s ease-in-out;
-
-        &:hover,
-        &:focus {
-            opacity: 1;
-            pointer-events: auto;
-        }
+    & .q-chatbot__send {
+      border-radius: 1rem;
     }
 
-    &__send-container {
-        padding-bottom: 0.25rem;
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-
-        & .q-chatbot__send {
-            border-radius: 1rem;
-        }
-
-        & .q-chatbot__upload {
-            border-radius: 1rem;
-        }
-
-        & .spacer {
-            flex-grow: 1;
-        }
+    & .q-chatbot__upload {
+      border-radius: 1rem;
     }
 
-    &__footer {
-        position: sticky;
-        padding: 0 0.5rem;
-        border: 1px solid #eaebec;
-        border-radius: 0.25rem;
-        bottom: 0;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-
-        &-disabled {
-            background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
-            cursor: not-allowed;
-        }
-
-        &.drag-over {
-            border: 2px dashed rgb(var(--q-theme-primary-rgb) / 0.25);
-            background-color: rgba(1, 139, 210, 0.05);
-        }
-
-        & .q-chatbot__input {
-            min-height: 50px;
-            max-height: 100px;
-            border-bottom: 1px solid #eaebec;
-            overflow-y: auto;
-        }
-
-        & .q-text-area {
-            max-height: 100%;
-            overflow-y: auto;
-
-            & .q-field__control {
-                border: none;
-            }
-        }
+    & .spacer {
+      flex-grow: 1;
     }
+  }
 
-    &__upload-container {
-        display: flex;
-        justify-content: flex-start;
-        padding: 0.25rem 0;
-
-        & .q-chatbot__upload {
-            border-radius: 1rem;
-        }
-    }
+  &__footer {
+    position: sticky;
+    padding: 0 0.5rem;
+    border: 1px solid #eaebec;
+    border-radius: 0.25rem;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 
-    &__messages-container {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        padding: 0 1rem 2rem 1rem;
-        gap: 1.5rem;
-        overflow-y: auto;
+    &-disabled {
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
+      cursor: not-allowed;
     }
 
-    &__messages-wrapper {
-        display: flex;
-        max-width: 100%;
-        gap: 0.2rem;
-
-        &_right {
-            justify-content: flex-end;
-        }
+    &.drag-over {
+      border: 2px dashed rgb(var(--q-theme-primary-rgb) / 25%);
+      background-color: rgb(1 139 210 / 5%);
     }
 
-    &__tools {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        max-width: 100%;
-        padding: 0.25rem 0.5rem;
+    & .q-chatbot__input {
+      min-height: 50px;
+      max-height: 100px;
+      border-bottom: 1px solid #eaebec;
+      overflow-y: auto;
     }
 
-    &__message-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 0.2rem;
-    }
+    & .q-text-area {
+      max-height: 100%;
+      overflow-y: auto;
 
-    &__message-container {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
+      & .q-field__control {
+        border: none;
+      }
     }
+  }
 
-    &__messages-wrapper_right {
-        justify-content: flex-end;
-
-        .q-chatbot__message-container {
-            align-items: flex-end;
-        }
+  &__upload-container {
+    display: flex;
+    justify-content: flex-start;
+    padding: 0.25rem 0;
 
-        .q-chatbot__message-wrapper {
-            display: flex;
-            align-items: flex-end;
-        }
+    & .q-chatbot__upload {
+      border-radius: 1rem;
     }
+  }
 
-    &__profile.q-icon__img {
-        border-radius: 50%;
-        height: 2rem;
-        width: 2rem;
-    }
+  &__messages-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 0 1rem 2rem;
+    gap: 1.5rem;
+    overflow-y: auto;
+  }
 
-    &__message {
-        padding: 0.3rem 0.5rem;
-        background-color: #eaebec;
-        width: fit-content;
-        min-height: 2rem;
-        white-space: normal;
-        border-radius: 0 0.5rem 0.5rem 0.5rem;
-    }
+  &__messages-wrapper {
+    display: flex;
+    max-width: 100%;
+    gap: 0.2rem;
+  }
 
-    &__messages-wrapper_right .q-chatbot__message {
-        background-color: rgba(#018bd2, 20%);
-        border-radius: 0.5rem 0 0.5rem 0.5rem;
-        white-space: normal;
-    }
+  &__tools {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 100%;
+    padding: 0.25rem 0.5rem;
+  }
 
-    &__sender {
-        white-space: nowrap;
-        color: #7c858d;
-        font-size: 0.7rem;
-    }
+  &__message-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
 
-    &__retry-button {
-        align-items: center;
-        display: flex;
-    }
+  &__message-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__messages-wrapper_right {
+    justify-content: flex-end;
+
+    .q-chatbot__message-container {
+      align-items: flex-end;
+    }
+
+    .q-chatbot__message-wrapper {
+      display: flex;
+      align-items: flex-end;
+    }
+  }
+
+  &__profile.q-icon__img {
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+  }
+
+  &__message {
+    padding: 0.3rem 0.5rem;
+    background-color: #eaebec;
+    width: fit-content;
+    min-height: 2rem;
+    white-space: normal;
+    border-radius: 0 0.5rem 0.5rem;
+  }
+
+  &__messages-wrapper_right .q-chatbot__message {
+    background-color: rgba(#018bd2, 20%);
+    border-radius: 0.5rem 0 0.5rem 0.5rem;
+    white-space: normal;
+  }
+
+  &__sender {
+    white-space: nowrap;
+    color: #7c858d;
+    font-size: 0.7rem;
+  }
+
+  &__retry-button {
+    align-items: center;
+    display: flex;
+  }
 
-    &__dialog-title {
-        margin: 0.5rem 0;
-    }
+  &__dialog-title {
+    margin: 0.5rem 0;
+  }
 }
 
 .hidden-input {
-    display: none;
+  display: none;
 }