feat(chat): make it responsive

src/App.vue

@@ -8,11 +8,13 @@ import AppLayout from '@/components/AppLayout.vue';
 import SmallScreenPage from '@/views/SmallScreenPage.vue';
 import ModalComponent from '@/components/WelcomeModal.vue';
 import { useSourcesStore } from '@/stores/sources';
+import { useFeatureFlipStore } from '@/stores/featureFlip';
 import { useUserStore } from '@/stores/user';
 import ErrorComponent from '@/components/ErrorComponent.vue';
 import { getQueryParamValue } from '@/utils/urlsUtils';
 
 const { getSourcesList, getInfoPerCorpus } = useSourcesStore();
+const { isDevEnvironment } = useFeatureFlipStore();
 const userStore = useUserStore();
 const screenWidth = computed(() => window.innerWidth);
 const fetchError = ref(false);
@@ -40,7 +42,7 @@ onMounted(async () => {
 
 <template>
   <ErrorComponent v-if="fetchError" />
-  <SmallScreenPage v-else-if="screenWidth < 995" />
+  <SmallScreenPage v-else-if="!isDevEnvironment && screenWidth < 995" />
   <div class="fullscreen" v-else>
     <ModalComponent />
 

src/components/AssistantAvatar.vue

@@ -16,8 +16,7 @@
   align-items: center;
   padding: 0.25rem 0rem;
   border-radius: 50%;
+  max-width: 2rem;
   border: 2px solid var(--primary);
 }
-@media screen and (min-width: 576px) {
-}
 </style>

src/components/ChatArea.vue

@@ -83,7 +83,7 @@ const handleOnWheel = () => {
 <style scoped>
 .bottom-wrapper {
   width: 100%;
-  padding-bottom: 5rem;
+  padding-bottom: 1rem;
 }
 
 .loading:has(#wave) {
@@ -138,6 +138,10 @@ const handleOnWheel = () => {
 }
 
 @media screen and (min-width: 768px) {
+  .bottom-wrapper {
+    width: 100%;
+    padding-bottom: 5rem;
+  }
   .scroll-arrow {
     all: unset;
     position: absolute;

src/components/ChatBuble.vue

@@ -84,11 +84,12 @@ const copyMessage = (msg: string) => {
 }
 .chat-bubble {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
   height: auto;
   color: var(--neutral-80);
   padding: 1.25rem 1rem;
+  gap: 1rem;
   text-align: justify;
 }
 .chat-bubble.last-message {
@@ -105,24 +106,26 @@ const copyMessage = (msg: string) => {
   margin: auto 0;
   border-radius: 0;
   margin-left: 0.5rem;
+  width: 100%;
+  margin-left: 0;
   & > a {
     color: var(--primary);
   }
 }
 
-.details {
-  height: 100%;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+@media screen and (max-width: 576px) {
+  .chat-bubble-content {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (max-width: 992px) {
   .chat-bubble {
-    flex-direction: row;
+    font-size: 0.9em;
+    flex-direction: column;
     justify-content: center;
-    gap: 1rem;
-    padding: 1.25rem 0;
+    gap: 0.5rem;
   }
 
   .chat-bubble-content {
@@ -137,9 +140,13 @@ const copyMessage = (msg: string) => {
     align-self: flex-end;
     gap: 0.5rem;
 
-    flex-direction: column;
+    flex-direction: row;
     justify-content: flex-end;
     align-items: flex-end;
   }
+
+  .chat-bubble.last-message {
+    padding-bottom: 5rem;
+  }
 }
 </style>

src/components/ChatComponent.vue

@@ -108,27 +108,17 @@ const computedStatus = computed(() => store.chatStatus);
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* justify-content: flex-end; */
-  padding-bottom: 0.1rem;
+  padding-bottom: 1rem;
   height: 100%;
 }
 
-.sourcesListLink {
-  height: 2rem;
-  color: var(--tertiary);
-}
-
 .delete-button-wrapper {
   position: absolute;
   right: 10%;
   top: 1rem;
   z-index: 1;
 }
 
-.chat-delete-button:has(.trash-icon).phone {
-  opacity: 0.8;
-}
-
 .trash-icon {
   color: var(--tertiary);
   height: 1.4em;
@@ -154,33 +144,60 @@ const computedStatus = computed(() => store.chatStatus);
 .input-area:has(div div textarea:focus) {
   border-color: var(--primary);
 }
+.bubbles-wrapper {
+  width: 80%;
+  overflow-x: auto;
+}
 
-@media screen and (min-width: 992px) {
-  .phone {
+.phone {
+  display: none;
+
+  & > .trash-icon {
     display: none;
+  }
+}
 
-    & > .trash-icon {
-      display: none;
-    }
+.chat-delete-button:has(.trash-icon) {
+  width: auto;
+  background-color: transparent;
+}
+
+.queues-wrapper {
+  width: 80%;
+  display: block;
+  padding-top: 0.5rem;
+  margin: auto;
+  margin-top: auto;
+}
+
+@media screen and (max-width: 950px) {
+  .delete-button-wrapper {
+    position: absolute;
+    right: 0.5rem;
+    top: auto;
+    bottom: 2rem;
+    z-index: 1;
   }
-  .chat-template {
-    height: 100%;
-    padding-bottom: 1rem;
+
+  .sourcesListLink {
+    height: 2rem;
+    color: var(--tertiary);
   }
-  .bubbles-wrapper {
-    width: 80%;
+
+  .phone {
+    display: inline-block;
+
+    & > .trash-icon {
+      display: inline-block;
+    }
   }
-  .chat-delete-button:has(.trash-icon) {
-    width: auto;
-    background-color: transparent;
+
+  .chat-delete-button:has(.trash-icon).phone {
+    opacity: 0.8;
   }
 
-  .queues-wrapper {
-    width: 80%;
-    display: block;
-    padding-top: 0.5rem;
-    margin: auto;
-    margin-top: auto;
+  .bubbles-wrapper {
+    width: 100%;
   }
 }
 </style>

src/components/ChatInput.vue

@@ -46,68 +46,66 @@ const onSend = (value: string) => {
   gap: 0.5rem;
 }
 
-@media screen and (min-width: 992px) {
-  .grow-wrap {
-    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-    display: grid;
-    width: 100%;
-  }
+.grow-wrap {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+  width: 100%;
+}
 
-  .grow-wrap::after {
-    /* Note the weird space! Needed to preventy jumpy behavior */
-    padding: 0px;
-    content: attr(data-replicated-value) ' ';
+.grow-wrap::after {
+  /* Note the weird space! Needed to preventy jumpy behavior */
+  padding: 0px;
+  content: attr(data-replicated-value) ' ';
 
-    /* This is how textarea text behaves */
-    white-space: pre-wrap;
-    word-break: break-all;
+  /* This is how textarea text behaves */
+  white-space: pre-wrap;
+  word-break: break-all;
 
-    background-color: yellow;
+  background-color: yellow;
 
-    min-height: 1.6rem;
-    /* Hidden from view, clicks, and screen readers */
-    visibility: hidden;
-  }
+  min-height: 1.6rem;
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+}
 
-  .grow-wrap > textarea,
-  .grow-wrap::after {
-    /* Identical styling required!! */
-    font: inherit;
-    line-height: 1.4;
-    font-family: sans-serif;
-    overflow: scroll;
+.grow-wrap > textarea,
+.grow-wrap::after {
+  /* Identical styling required!! */
+  font: inherit;
+  line-height: 1.4;
+  font-family: sans-serif;
+  overflow: scroll;
 
-    max-height: 300px;
-    /* textarea and ::after should occupy the first (and only) cell of the grid: */
-    grid-area: 1 / 1 / 2 / 2;
-  }
+  max-height: 300px;
+  /* textarea and ::after should occupy the first (and only) cell of the grid: */
+  grid-area: 1 / 1 / 2 / 2;
+}
 
-  .grow-wrap > textarea {
-    display: block;
-    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-    border: none;
-    resize: none;
-    line-height: 1.4;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    height: 100%;
-    scroll-padding: 0;
+.grow-wrap > textarea {
+  display: block;
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  border: none;
+  resize: none;
+  line-height: 1.4;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  scroll-padding: 0;
 
-    /* Firefox shows scrollbar on growth, you can hide like this. */
-    overflow-x: hidden;
-  }
-  textarea:focus::-webkit-input-placeholder {
-    color: transparent;
-  }
-  textarea:focus:-moz-placeholder {
-    color: transparent;
-  } /* FF 4-18 */
-  textarea:focus::-moz-placeholder {
-    color: transparent;
-  } /* FF 19+ */
-  textarea:focus:-ms-input-placeholder {
-    color: transparent;
-  }
+  /* Firefox shows scrollbar on growth, you can hide like this. */
+  overflow-x: hidden;
+}
+textarea:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+textarea:focus:-moz-placeholder {
+  color: transparent;
+} /* FF 4-18 */
+textarea:focus::-moz-placeholder {
+  color: transparent;
+} /* FF 19+ */
+textarea:focus:-ms-input-placeholder {
+  color: transparent;
 }
 </style>