vue-wiguet-chatweb 0.1.24 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "type": "module",
   "files": [
     "dist",
@@ -47,9 +47,11 @@
     "@vueuse/core": "^10.0.0",
     "axios": "^1.4.0",
     "luxon": "^3.0.0",
+    "socket.io-client": "^4.7.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@primevue/auto-import-resolver": "^4.2.5",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.4.6",
     "@types/uuid": "^10.0.0",

package/src/components/Chat.vue

@@ -17,6 +17,12 @@
         @loadMore="getMessages"
         @retry="retryMessage"
         @on-qualifying="(args) => onQualifying(args)"
+        @see="(message: Message) => {
+          currentDialogView = DIALOG_VIEWS.SEE
+          urlFileMessage = message.urlFile
+          dialog.title = 'Imagen'
+          dialog.modelValue = true
+        }"
       />
       <div class="fit" v-else>
         <span class="center">No tienes mensajes</span>
@@ -42,28 +48,29 @@
               @keyup.enter="saltoDeLineaOEnviar"
             />
 
-            <FileUpload
-              mode="basic"
-              accept="image/png,image/jpeg,image/jpg,image/webp"
-              :maxFileSize="2000000"
-              @select="onFileSelect"
-              title="Adjuntar imagen"
-              :chooseButtonProps="{ label: '', outlined: true }"
-              :auto="false"
-              style="height: 39px"
+            <input
+              type="file"
+              ref="fileInputRef"
+              @change="onFileSelect"
+              accept="image/*"
+              style="display: none;"
+              key="fileInputKey"
+
+            />
+            <button
+              type="button"
+              class="pointer btn-primary"
+              title="Adjuntar archivo"
+              @click="
+                () => {
+                  fileInputRef.value = '';
+                  fileInputKey++;
+                  fileInputRef?.click();
+                }
+              "
             >
-              <template #filelabel>
-                <span style="display:none"></span>
-              </template>
-              
-              <template #chooseicon>
-                <IconAttach style="width: 20px; height: 20px" />
-              </template>
-            </FileUpload>
-
-            <!-- <button class="pointer btn-primary">
               <IconAttach style="width: 20px; height: 20px" />
-            </button> -->
+            </button>
 
             <button type="submit" class="pointer btn-primary">
               <IconSend style="width: 20px; height: 20px" />
@@ -77,12 +84,11 @@
     </div>
   </div>
 
-  <ODialog v-bind="dialog" modal>
-    <div class="flex flex-col gap-3 justify-center items-center">
-      <Image v-for="(urlFile, i) in urlFiles" :key="i" :src="urlFile" alt="Image" width="400" />
+  <ODialog v-bind="dialog">
+    <div v-if="currentDialogView === DIALOG_VIEWS.UPLOAD" class="flex flex-col gap-3 justify-center items-center">
+      <img v-for="(urlFile, i) in urlFiles" :key="i" :src="urlFile.toString()" alt="Image" width="400" />
 
-      <div class="w-full">
-        <form
+      <form
           class="message-send"
           @submit.prevent="
             (event) => {
@@ -116,8 +122,10 @@
               </button>
             </div>
           </div>
-        </form>  
-      </div>
+        </form>
+    </div>
+    <div v-else>
+      <img v-if="urlFileMessage" :src="urlFileMessage" alt="Image" style="width: 55vw;" />
     </div>
   </ODialog>
 </template>
@@ -156,16 +164,22 @@ import { io, Socket } from "socket.io-client";
 import { APP_TYPE } from "../dto/chat.dto";
 import { MESSAGE_TYPE_CODES, TypeMessageTypeCodes } from "../resources/constants/message-type.constant";
 import { useMobile } from "../hooks/useMobile";
-import { IPropsDialog } from "./ODialog/IPropsDialog";
 import IconAttach from "./IconAttach.vue";
 import ODialog from "./ODialog/ODialog.vue";
-import { type FileUploadSelectEvent } from "primevue";
-import FileUpload from "primevue/fileupload";
-import Image from "primevue/image";
+import { IPropsDialog } from "./ODialog/IPropsDialog";
+
+const enum DIALOG_VIEWS {
+  UPLOAD,
+  SEE
+}
 
 //DATA
 const message = ref("");
 const notViewed = ref(0);
+const fileInputRef = ref();
+const fileInputKey = ref(0);
+const currentDialogView = ref(DIALOG_VIEWS.SEE)
+const urlFileMessage = ref<string>()
 
 const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
   data: [],
@@ -267,10 +281,7 @@ function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes
       ? {
           code: codigoTipoMensaje,
         }
-      : undefined;
-
-  console.warn(inputFiles.value);
-  
+      : undefined;  
 
   const newMessage: Message = {
     id: uuidv4(),
@@ -283,7 +294,7 @@ function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     file: inputFiles.value?.[0],
-    urlFile: inputFiles.value?.[0]?.objectURL,
+    urlFile: urlFiles.value?.[0].toString(),
     messageType,
     sender: {
       nombreCompleto: props.user.nombreCompleto,
@@ -570,29 +581,29 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
 const isDisabledBoxMessage = ref(false);
 
 // Adjuntar
-function onFileSelect(event: FileUploadSelectEvent) {
+function onFileSelect() {
   inputFiles.value = [];
   urlFiles.value = [];
 
-  const file = event.files[0]; // Obtiene el primer archivo seleccionado
+  const filesParam = fileInputRef.value?.files ?? []
+
+  const file = filesParam?.[0];
   
-  inputFiles.value = event.files as (File & { objectURL: string })[];
+  inputFiles.value = filesParam;
 
   if (!file) return;
 
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    e.target?.result && urlFiles.value.push(e.target?.result);
-  };
-  reader.readAsDataURL(file);
+  urlFiles.value.push(URL.createObjectURL(file))
 
+  currentDialogView.value = DIALOG_VIEWS.UPLOAD;
+  dialog.title = 'Preparar imagen';
   dialog.modelValue = true;
 }
 
 // Dialog
 
 const inputFiles = ref<(File & { objectURL: string })[]>([]);
-  const urlFiles = ref<Array<string | ArrayBuffer>>([]);
+const urlFiles = ref<Array<string>>([]);
 
 const dialog = reactive<IPropsDialog>({
   modelValue: false,
@@ -604,8 +615,7 @@ const dialog = reactive<IPropsDialog>({
     urlFiles.value = [];
     inputFiles.value = [];
   },
-  hideActions: true,
-  title: 'SIN TITULO',
+  title: 'Preparar imagen'
 });
 
 //

package/src/components/MessageList.vue

@@ -50,18 +50,10 @@
               </div>
 
               <div v-else>
-                <div v-if="message.messageType?.code === MESSAGE_TYPE_CODES.IMAGEN" class="text-center">
-                  <Image
-                    alt="Image"
-                    preview
-                  >
-                    <template #image>
-                        <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
-                    </template>
-                    <template #original="slotProps">
-                        <img :src="message.urlFile" alt="preview" :style="slotProps.style" width="800" @click="slotProps.previewCallback" />
-                    </template>
-                  </Image>
+                <div v-if="message.messageType?.code === MESSAGE_TYPE_CODES.IMAGEN" style="text-align: center;">
+                  <a href="javascript:" class="btn-icon" @click="emit('see', message)">
+                    <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
+                  </a>
                 </div>
 
                 <div v-if="emoji[message.message ?? '']">
@@ -108,9 +100,8 @@ import HappiestIcon from '../assets/emojis/HappiestIcon.svg'
 import NeutralIcon from '../assets/emojis/NeutralIcon.svg'
 import HappyIcon from '../assets/emojis/HappyIcon.svg'
 import { MESSAGE_TYPE_CODES } from '../resources/constants/message-type.constant';
-import Image from 'primevue/image';
 
-const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
+const emit = defineEmits(["loadMore", "retry", "onQualifying", "see"]);
 const props = defineProps({
   messages: {
     type: Array as PropType<Message[]>,
@@ -357,35 +348,10 @@ const emoji: { [key in string]: any } = {
   font-size: 2rem;
 }
 
-.flex { 
-  display: flex;
-  flex-wrap: wrap;
-}
-.flex-col {
-  flex-direction: column;
-}
-.items-center {
-  align-items: center;
-}
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.mb-2 {
-  margin-bottom: 8px;
-}
-
-.mt-2 {
-  margin-top: 8px;
-}
-
 .content-disabled {
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   opacity: 0.5;
 }
-.justify-between {
-  justify-content: space-between;
-}
 
 </style>

package/src/components/ODialog/IPropsDialog.ts

@@ -1,10 +1,4 @@
 import { IPropsSidebar } from './IPropsSidebar';
-import { type DialogProps } from "primevue/dialog";
 
 
-export interface IPropsDialog extends Omit<IPropsSidebar, 'position'> {
-  position?: DialogProps['position'];
-
-  // solo para v-bind
-  'onUpdate:modelValue'?: (args: IPropsDialog['modelValue'])=> void
-}
+export interface IPropsDialog extends IPropsSidebar {}

package/src/components/ODialog/IPropsSidebar.ts

@@ -1,16 +1,12 @@
-import type { DrawerProps } from "primevue/drawer";
-
 export interface IPropsSidebar {
-  modelValue: boolean;
-  dismissable?: boolean;
-  position?: DrawerProps['position'];
+  modelValue?: boolean;
   title?: string;
-  isLoading?: boolean;
-  hideActions?: boolean;
-  hideHeader?: boolean;
-  acceptFn?: () => Promise<boolean>;
-  beforeAcceptFn?: () => Promise<boolean>;
-  disable?: boolean;
+  // isLoading?: boolean;
+  // hideActions?: boolean;
+  // hideHeader?: boolean;
+  // acceptFn?: () => Promise<boolean>;
+  // beforeAcceptFn?: () => Promise<boolean>;
+  // disable?: boolean;
 
   // solo para v-bind
   'onUpdate:modelValue'?: (args: IPropsSidebar['modelValue'])=> void

package/src/components/ODialog/ODialog.vue

@@ -1,82 +1,85 @@
 <template>
-  <Dialog
-    :visible="propsComponent.modelValue"
-    :dismissable
-    :position
-    @update:visible="(val: boolean) => emit('update:modelValue', val)"
-    class="!w-auto min-w-[20rem] dark:!bg-[var(--theme-background-secondary)]"
-  >
-    <template #container>
-      <LoadingComponent v-if="propsComponent.isLoading || isWorking" />
-      <SidebarHeader v-if="!propsComponent.hideHeader" :title :closeFn="() => emit('update:modelValue', false)" />
-      
-      <!-- <Divider class="!m-0 !p-0" /> -->
+  <div v-if="props.modelValue" class="dialog-overlay" @click="closeDialog">
+    <div class="dialog-content" @click.stop>
+      <div class="header-widget">
+        <h4 class="title-chat">{{ title }}</h4>
+        <button @click="() => closeDialog()" class="btn-close">
+          <IconClose class="pointer" />
+        </button>
+      </div>
 
-      <div class="overflow-y-auto m-4 h-full max-h-full">
+      <div>
         <slot></slot>
       </div>
-
-      <footer v-if="!hideActions" class="flex sm:justify-between gap-16 items-center mx-5 py-5">
-        <Button
-          label="Cancelar"
-          severity="secondary"
-          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
-          icon="pi pi-times"
-          outlined
-          @click="() => emit('update:modelValue', false)"
-        ></Button>
-        <Button
-          label="Aceptar"
-          :disabled="disable || isLoading"
-          icon="pi pi-check"
-          aria-label="save"
-          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
-          @click="onAccept"
-        ></Button>
-      </footer>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import Dialog from 'primevue/dialog';
+<script lang="ts" setup>
+import IconClose from '../IconClose.vue'
 import { IPropsDialog } from './IPropsDialog';
-import LoadingComponent from '../LoadingComponent.vue';
-import SidebarHeader from '../sidebar/SidebarHeader.vue';
-import { computed, ref } from 'vue';
-import Button from 'primevue/button';
 
-const propsComponent = withDefaults(defineProps<IPropsDialog>(), {
-  beforeAcceptFn: async () => true
-});
+const props = defineProps<IPropsDialog>()
 
-const emit = defineEmits<{
-  'update:modelValue': [visible: boolean];
-  accept: [void];
-}>();
+const emit = defineEmits(['update:modelValue']);
 
-const isWorking = ref(false);
-const isLoading = computed(() => {
-  return isWorking.value || propsComponent.disable || propsComponent.isLoading;
-});
+const closeDialog = () => {
+  emit("update:modelValue", false);
+};
+</script>
 
-async function onAccept() {
-  if (!propsComponent.acceptFn) {
-    emit('accept');
-    return;
-  }
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  animation: fadeIn 0.3s forwards;
+}
 
-  const isPassed = await propsComponent.beforeAcceptFn();
+.dialog-content {
+  background-color: white;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  animation: slideIn 0.3s ease-out forwards;
+}
 
-  if(!isPassed) return;
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
 
-  isWorking.value = true;
-  const result = await propsComponent.acceptFn?.();
-  isWorking.value = false;
+@keyframes slideIn {
+  from {
+    transform: translateY(-50px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
 
-  if(!result) return
-  
-  emit('accept')
-  emit('update:modelValue', false);
+.dialog-overlay.v-enter-active,
+.dialog-overlay.v-leave-active {
+  transition: opacity 0.3s;
 }
-</script>
+
+.btn-close {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  &:hover {
+    background-color: rgba(202, 202, 202, 0.534);
+  }
+}
+</style>

package/src/components/Widget.vue

@@ -53,6 +53,24 @@
         @on-qualifying="(args)=> emit('onQualifying', args)"
       />
     </div>
+
+    <Button label="Show" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
+    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+    <div class="flex items-center gap-4 mb-4">
+        <label for="username" class="font-semibold w-24">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex items-center gap-4 mb-8">
+        <label for="email" class="font-semibold w-24">Email</label>
+        <InputText id="email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
+</Dialog>
   </div>
 </template>
 
@@ -65,7 +83,7 @@ import IconWhatsApp from "./IconWhatsApp.vue";
 import IconChat from "./IconChat.vue";
 
 const emit = defineEmits(["show-toast", "show-confirm", "onQualifying"]);
-
+const visible = ref(true);
 const enum MeansCommunication{
   WHATSAPP,
   TELEGRAM

package/dist/components/LoadingComponent.vue.d.ts

@@ -1,21 +0,0 @@
-import { PropType } from 'vue';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<"small" | "normal">;
-        default: string;
-    };
-    footer_text: {
-        type: StringConstructor;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    size: {
-        type: PropType<"small" | "normal">;
-        default: string;
-    };
-    footer_text: {
-        type: StringConstructor;
-    };
-}>> & Readonly<{}>, {
-    size: "small" | "normal";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;

package/dist/components/sidebar/SidebarHeader.vue.d.ts

@@ -1,36 +0,0 @@
-import { PropType } from 'vue';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        content?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    closeFn: {
-        type: PropType<(event: Event) => void>;
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        required: false;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    closeFn: {
-        type: PropType<(event: Event) => void>;
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        required: false;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/sidebar/SidebarHeader.vue

@@ -1,40 +0,0 @@
-<template>
-  <header class="flex justify-between items-center border-b-2 p-2 pl-4 pb-0">
-    <slot name="content">
-      <span class="text-gray-500 dark:text-gray-200 text-xl font-roboto font-medium">
-        {{ props.title }}
-      </span>
-    </slot>
-    <Button
-      icon="pi pi-times"
-      severity="secondary"
-      text
-      rounded
-      aria-label="Cancel"
-      @click="props.closeFn"
-    >
-      <template #icon>
-        <IconClose />
-      </template>
-    </Button>
-  </header>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button';
-import IconClose from '../IconClose.vue';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  closeFn: {
-    type: Function as PropType<(event: Event) => void>,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: false,
-  },
-});
-</script>
-
-<style scoped></style>