@orbe-agro/client-core 5.3.85 → 5.3.89

package/dist/@ecme/views/concepts/calendar/Calendar/components/EventDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventDialog.js","sources":["../../../../../../../lib/@ecme/views/concepts/calendar/Calendar/components/EventDialog.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport Input from '@/components/ui/Input'\nimport Button from '@/components/ui/Button'\nimport Select from '@/components/ui/Select'\nimport DatePicker from '@/components/ui/DatePicker'\nimport Dialog from '@/components/ui/Dialog'\nimport { Form, FormItem } from '@/components/ui/Form'\nimport Badge from '@/components/ui/Badge'\nimport hooks from '@/components/ui/hooks'\nimport { Controller, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { TbChecks } from 'react-icons/tb'\nimport { components } from 'react-select'\nimport dayjs from 'dayjs'\nimport type { SelectedCell } from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\n\ntype FormModel = {\n    title: string\n    startDate: Date\n    endDate: Date\n    color: string\n}\n\nexport type EventParam = {\n    id: string\n    title: string\n    start: string\n    eventColor: string\n    end?: string\n}\n\ntype ColorOption = {\n    value: string\n    label: string\n    color: string\n}\n\ntype EventDialogProps = {\n    open: boolean\n    selected: SelectedCell\n    onDialogOpen: (open: boolean) => void\n    submit: (eventData: EventParam, type: string) => void\n}\n\nconst { Control } = components\n\nconst { useUniqueId } = hooks\n\nconst colorOptions = [\n    {\n        value: 'red',\n        label: 'red',\n        color: 'bg-red-400',\n    },\n    {\n        value: 'orange',\n        label: 'orange',\n        color: 'bg-orange-400',\n    },\n    {\n        value: 'yellow',\n        label: 'yellow',\n        color: 'bg-yellow-400',\n    },\n    {\n        value: 'green',\n        label: 'green',\n        color: 'bg-green-400',\n    },\n    {\n        value: 'blue',\n        label: 'blue',\n        color: 'bg-blue-400',\n    },\n    {\n        value: 'purple',\n        label: 'purple',\n        color: 'bg-purple-400',\n    },\n]\n\nconst CustomSelectOption = ({\n    innerProps,\n    label,\n    data,\n    isSelected,\n}: OptionProps<ColorOption>) => {\n    return (\n        <div\n            className={`flex items-center justify-between rounded-lg p-2 ${\n                isSelected\n                    ? 'bg-gray-100 dark:bg-gray-500'\n                    : 'hover:bg-gray-50 dark:hover:bg-gray-600'\n            }`}\n            {...innerProps}\n        >\n            <div className=\"flex items-center\">\n                <Badge className={data.color} />\n                <span className=\"ml-2 rtl:mr-2 capitalize\">{label}</span>\n            </div>\n            {isSelected && <TbChecks className=\"text-emerald-500 text-xl\" />}\n        </div>\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<ColorOption>) => {\n    const selected = props.getValue()[0]\n\n    return (\n        <Control className=\"capitalize\" {...props}>\n            {selected && (\n                <Badge className={`${selected.color} ltr:ml-4 rtl:mr-4`} />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst validationSchema = z.object({\n    title: z.string().min(1, { message: 'Event title required' }),\n    startDate: z.date({\n        required_error: 'Please select a date',\n        invalid_type_error: \"That's not a date!\",\n    }),\n    endDate: z.date({\n        required_error: 'Please select a date',\n        invalid_type_error: \"That's not a date!\",\n    }),\n    color: z.string().min(1, { message: 'Color required' }),\n})\n\nconst EventDialog = (props: EventDialogProps) => {\n    const { submit, open, selected, onDialogOpen } = props\n\n    const newId = useUniqueId('event-')\n\n    const handleDialogClose = () => {\n        onDialogOpen(false)\n    }\n\n    const onSubmit = (values: FormModel) => {\n        const eventData: EventParam = {\n            id: selected.id || newId,\n            title: values.title,\n            start: dayjs(values.startDate).format(),\n            eventColor: values.color,\n        }\n        if (values.endDate) {\n            eventData.end = dayjs(values.endDate).format()\n        }\n        console.log('eventData', eventData)\n        submit?.(eventData, selected.type)\n        handleDialogClose()\n    }\n\n    const {\n        handleSubmit,\n        reset,\n        formState: { errors },\n        control,\n    } = useForm<FormModel>({\n        resolver: zodResolver(validationSchema),\n    })\n\n    useEffect(() => {\n        if (selected) {\n            reset({\n                title: selected.title || '',\n                startDate: (selected.start &&\n                    dayjs(selected.start).toDate()) as Date,\n                endDate: (selected.end && dayjs(selected.end).toDate()) as Date,\n                color: selected.eventColor || colorOptions[0].value,\n            })\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selected])\n\n    return (\n        <Dialog\n            isOpen={open}\n            onClose={handleDialogClose}\n            onRequestClose={handleDialogClose}\n        >\n            <h5 className=\"mb-4\">\n                {selected.type === 'NEW' ? 'Add New Event' : 'Edit Event'}\n            </h5>\n            <Form\n                className=\"flex-1 flex flex-col\"\n                onSubmit={handleSubmit(onSubmit)}\n            >\n                <FormItem\n                    label=\"Event title\"\n                    invalid={Boolean(errors.title)}\n                    errorMessage={errors.title?.message}\n                >\n                    <Controller\n                        name=\"title\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"Event title\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"Start date\"\n                    invalid={Boolean(errors.startDate)}\n                    errorMessage={errors.startDate?.message}\n                >\n                    <Controller\n                        name=\"startDate\"\n                        control={control}\n                        render={({ field }) => (\n                            <DatePicker\n                                value={field.value}\n                                onChange={field.onChange}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"End date\"\n                    invalid={Boolean(errors.endDate)}\n                    errorMessage={errors.endDate?.message}\n                >\n                    <Controller\n                        name=\"endDate\"\n                        control={control}\n                        render={({ field }) => (\n                            <DatePicker\n                                value={field.value}\n                                onChange={field.onChange}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"Event color\"\n                    asterisk={true}\n                    invalid={Boolean(errors.color)}\n                    errorMessage={errors.color?.message}\n                >\n                    <Controller\n                        name=\"color\"\n                        control={control}\n                        render={({ field }) => (\n                            <Select<ColorOption>\n                                options={colorOptions}\n                                value={colorOptions.filter(\n                                    (option) => option.value === field.value,\n                                )}\n                                components={{\n                                    Option: CustomSelectOption,\n                                    Control: CustomControl,\n                                }}\n                                onChange={(selected) => {\n                                    field.onChange(selected?.value)\n                                }}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem className=\"mb-0 text-right rtl:text-left\">\n                    <Button block variant=\"solid\" type=\"submit\">\n                        {selected.type === 'NEW' ? 'Create' : 'Update'}\n                    </Button>\n                </FormItem>\n            </Form>\n        </Dialog>\n    )\n}\n\nexport default EventDialog\n"],"names":["Control","components","useUniqueId","hooks","colorOptions","CustomSelectOption","innerProps","label","data","isSelected","jsxs","jsx","Badge","TbChecks","CustomControl","children","props","selected","validationSchema","z","EventDialog","submit","open","onDialogOpen","newId","handleDialogClose","onSubmit","values","eventData","dayjs","handleSubmit","reset","errors","control","useForm","zodResolver","useEffect","Dialog","Form","FormItem","_a","Controller","field","Input","_b","DatePicker","_c","_d","Select","option","Button"],"mappings":"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"}
+{"version":3,"file":"EventDialog.js","sources":["../../../../../../../lib/@ecme/views/concepts/calendar/Calendar/components/EventDialog.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport Input from '@/components/ui/Input'\nimport Button from '@/components/ui/Button'\nimport Select from '@/components/ui/Select'\nimport DatePicker from '@/components/ui/DatePicker'\nimport Dialog from '@/components/ui/Dialog'\nimport { Form, FormItem } from '@/components/ui/Form'\nimport Badge from '@/components/ui/Badge'\nimport hooks from '@/components/ui/hooks'\nimport { Controller, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { z } from 'zod'\nimport { TbChecks } from 'react-icons/tb'\nimport { components } from 'react-select'\nimport dayjs from 'dayjs'\nimport type { SelectedCell } from '../types'\nimport type { ControlProps, OptionProps } from 'react-select'\n\ntype FormModel = {\n    title: string\n    startDate: Date\n    endDate: Date\n    color: string\n}\n\nexport type EventParam = {\n    id: string\n    title: string\n    start: string\n    eventColor: string\n    end?: string\n}\n\ntype ColorOption = {\n    value: string\n    label: string\n    color: string\n}\n\ntype EventDialogProps = {\n    open: boolean\n    selected: SelectedCell\n    onDialogOpen: (open: boolean) => void\n    submit: (eventData: EventParam, type: string) => void\n}\n\nconst { Control } = components\n\nconst { useUniqueId } = hooks\n\nconst colorOptions = [\n    {\n        value: 'red',\n        label: 'red',\n        color: 'bg-red-400',\n    },\n    {\n        value: 'orange',\n        label: 'orange',\n        color: 'bg-orange-400',\n    },\n    {\n        value: 'yellow',\n        label: 'yellow',\n        color: 'bg-yellow-400',\n    },\n    {\n        value: 'green',\n        label: 'green',\n        color: 'bg-green-400',\n    },\n    {\n        value: 'blue',\n        label: 'blue',\n        color: 'bg-blue-400',\n    },\n    {\n        value: 'purple',\n        label: 'purple',\n        color: 'bg-purple-400',\n    },\n]\n\nconst CustomSelectOption = ({\n    innerProps,\n    label,\n    data,\n    isSelected,\n}: OptionProps<ColorOption>) => {\n    return (\n        <div\n            className={`flex items-center justify-between rounded-lg p-2 ${\n                isSelected\n                    ? 'bg-gray-100 dark:bg-gray-500'\n                    : 'hover:bg-gray-50 dark:hover:bg-gray-600'\n            }`}\n            {...innerProps}\n        >\n            <div className=\"flex items-center\">\n                <Badge className={data.color} />\n                <span className=\"ml-2 rtl:mr-2 capitalize\">{label}</span>\n            </div>\n            {isSelected && <TbChecks className=\"text-emerald-500 text-xl\" />}\n        </div>\n    )\n}\n\nconst CustomControl = ({ children, ...props }: ControlProps<ColorOption>) => {\n    const selected = props.getValue()[0]\n\n    return (\n        <Control className=\"capitalize\" {...props}>\n            {selected && (\n                <Badge className={`${selected.color} ltr:ml-4 rtl:mr-4`} />\n            )}\n            {children}\n        </Control>\n    )\n}\n\nconst validationSchema = z.object({\n    title: z.string().min(1, { message: 'Event title required' }),\n    startDate: z.date({\n        required_error: 'Please select a date',\n        invalid_type_error: \"That's not a date!\",\n    }),\n    endDate: z.date({\n        required_error: 'Please select a date',\n        invalid_type_error: \"That's not a date!\",\n    }),\n    color: z.string().min(1, { message: 'Color required' }),\n})\n\nconst EventDialog = (props: EventDialogProps) => {\n    const { submit, open, selected, onDialogOpen } = props\n\n    const newId = useUniqueId('event-')\n\n    const handleDialogClose = () => {\n        onDialogOpen(false)\n    }\n\n    const onSubmit = (values: FormModel) => {\n        const eventData: EventParam = {\n            id: selected.id || newId,\n            title: values.title,\n            start: dayjs(values.startDate).format(),\n            eventColor: values.color,\n        }\n        if (values.endDate) {\n            eventData.end = dayjs(values.endDate).format()\n        }\n        console.log('eventData', eventData)\n        submit?.(eventData, selected.type)\n        handleDialogClose()\n    }\n\n    const {\n        handleSubmit,\n        reset,\n        formState: { errors },\n        control,\n    } = useForm<FormModel>({\n        resolver: zodResolver(validationSchema),\n    })\n\n    useEffect(() => {\n        if (selected) {\n            reset({\n                title: selected.title || '',\n                startDate: (selected.start &&\n                    dayjs(selected.start).toDate()) as Date,\n                endDate: (selected.end && dayjs(selected.end).toDate()) as Date,\n                color: selected.eventColor || colorOptions[0].value,\n            })\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selected])\n\n    return (\n        <Dialog\n            isOpen={open}\n            onClose={handleDialogClose}\n            onRequestClose={handleDialogClose}\n        >\n            <h5 className=\"mb-4\">\n                {selected.type === 'NEW' ? 'Add New Event' : 'Edit Event'}\n            </h5>\n            <Form\n                className=\"flex-1 flex flex-col\"\n                onSubmit={handleSubmit(onSubmit)}\n            >\n                <FormItem\n                    label=\"Event title\"\n                    invalid={Boolean(errors.title)}\n                    errorMessage={errors.title?.message}\n                >\n                    <Controller\n                        name=\"title\"\n                        control={control}\n                        render={({ field }) => (\n                            <Input\n                                type=\"text\"\n                                autoComplete=\"off\"\n                                placeholder=\"Event title\"\n                                {...field}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"Start date\"\n                    invalid={Boolean(errors.startDate)}\n                    errorMessage={errors.startDate?.message}\n                >\n                    <Controller\n                        name=\"startDate\"\n                        control={control}\n                        render={({ field }) => (\n                            <DatePicker\n                                value={field.value}\n                                onChange={field.onChange}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"End date\"\n                    invalid={Boolean(errors.endDate)}\n                    errorMessage={errors.endDate?.message}\n                >\n                    <Controller\n                        name=\"endDate\"\n                        control={control}\n                        render={({ field }) => (\n                            <DatePicker\n                                value={field.value}\n                                onChange={field.onChange}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem\n                    label=\"Event color\"\n                    asterisk={true}\n                    invalid={Boolean(errors.color)}\n                    errorMessage={errors.color?.message}\n                >\n                    <Controller\n                        name=\"color\"\n                        control={control}\n                        render={({ field }) => (\n                            <Select<ColorOption>\n                                options={colorOptions}\n                                value={colorOptions.filter(\n                                    (option) => option.value === field.value,\n                                )}\n                                components={{\n                                    Option: CustomSelectOption,\n                                    Control: CustomControl,\n                                }}\n                                onChange={(selected) => {\n                                    field.onChange(selected?.value)\n                                }}\n                            />\n                        )}\n                    />\n                </FormItem>\n                <FormItem className=\"mb-0 text-right rtl:text-left\">\n                    <Button block variant=\"solid\" type=\"submit\">\n                        {selected.type === 'NEW' ? 'Create' : 'Update'}\n                    </Button>\n                </FormItem>\n            </Form>\n        </Dialog>\n    )\n}\n\nexport default EventDialog\n"],"names":["Control","components","useUniqueId","hooks","colorOptions","CustomSelectOption","innerProps","label","data","isSelected","jsxs","jsx","Badge","TbChecks","CustomControl","children","props","selected","validationSchema","z","EventDialog","submit","open","onDialogOpen","newId","handleDialogClose","onSubmit","values","eventData","dayjs","handleSubmit","reset","errors","control","useForm","zodResolver","useEffect","Dialog","Form","FormItem","Controller","field","Input","DatePicker","Select","option","Button"],"mappings":"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"}

package/dist/@ecme/views/concepts/chat/Chat/components/ChatBody.js

@@ -1,20 +1,20 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useRef as R, useState as h, useEffect as S, useMemo as T } from "react";
-import { Avatar as A } from "../../../../../components/ui/Avatar/index.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useRef as k, useState as u, useEffect as M, useMemo as R } from "react";
+import { Avatar as S } from "../../../../../components/ui/Avatar/index.js";
 import "../../../../../components/ui/Card/index.js";
 import "../../../../../components/view/ChatBox/index.js";
-import E from "./ChatAction.js";
-import L from "../../../../../assets/svg/StartConverstation.js";
+import T from "./ChatAction.js";
+import A from "../../../../../assets/svg/StartConverstation.js";
 import { useChatStore as n } from "../store/chatStore.js";
-import { apiGetConversation as U } from "../../../../../services/ChatService.js";
-import B from "../../../../../utils/classNames.js";
-import D from "../../../../../utils/hooks/useResponsive.js";
-import f from "dayjs";
-import P from "lodash/uniqueId";
-import { TbChevronLeft as G } from "react-icons/tb";
-import F from "../../../../../components/ui/Card/Card.js";
-import H from "../../../../../components/view/ChatBox/ChatBox.js";
-const O = (s) => {
+import { apiGetConversation as E } from "../../../../../services/ChatService.js";
+import L from "../../../../../utils/classNames.js";
+import U from "../../../../../utils/hooks/useResponsive.js";
+import h from "dayjs";
+import B from "lodash/uniqueId";
+import { TbChevronLeft as D } from "react-icons/tb";
+import P from "../../../../../components/ui/Card/Card.js";
+import G from "../../../../../components/view/ChatBox/ChatBox.js";
+const F = (s) => {
   switch (console.log("file.type", s.type), s.type) {
     case "image/jpg":
     case "image/jpeg":
@@ -30,132 +30,129 @@ const O = (s) => {
     default:
       return "misc";
   }
-}, oe = () => {
-  var u, p;
-  const s = R(null), t = n((e) => e.selectedChat), g = n((e) => e.conversationRecord), v = n(
+}, ae = () => {
+  const s = k(null), t = n((e) => e.selectedChat), p = n((e) => e.conversationRecord), f = n(
     (e) => e.pushConversationRecord
-  ), C = n((e) => e.setSelectedChat), x = n(
+  ), g = n((e) => e.setSelectedChat), v = n(
     (e) => e.pushConversationMessage
-  ), y = n(
+  ), C = n(
     (e) => e.setContactInfoDrawer
-  ), [q, m] = h(!1), [l, c] = h([]), { smaller: b } = D(), w = () => {
-    var e;
-    if ((e = s.current) != null && e.getScrollElement) {
-      const a = s.current.getScrollElement();
-      a && (a.scrollTop = a.scrollHeight);
+  ), [H, m] = u(!1), [l, i] = u([]), { smaller: x } = U(), y = () => {
+    if (s.current?.getScrollElement) {
+      const e = s.current.getScrollElement();
+      e && (e.scrollTop = e.scrollHeight);
     }
-  }, N = () => {
-    var e;
-    y({
-      userId: (e = t.user) == null ? void 0 : e.id,
+  }, b = () => {
+    C({
+      userId: t.user?.id,
       chatId: t.id,
       chatType: t.chatType,
       open: !0
     });
-  }, I = (e) => {
-    x(t.id, e), c((a) => (a.push(e), structuredClone(a)));
-  }, j = async ({
+  }, w = (e) => {
+    v(t.id, e), i((a) => (a.push(e), structuredClone(a)));
+  }, N = async ({
     value: e,
     attachments: a
   }) => {
     const o = {
-      id: P("chat-conversation-"),
+      id: B("chat-conversation-"),
       sender: {
         id: "1",
         name: "Angelina Gotelli",
         avatarImageUrl: "/img/avatars/thumb-1.jpg"
       },
       content: e,
-      attachments: a == null ? void 0 : a.map((d) => ({
-        type: O(d),
+      attachments: a?.map((d) => ({
+        type: F(d),
         source: d,
         mediaUrl: URL.createObjectURL(d)
       })),
-      timestamp: f().toDate(),
+      timestamp: h().toDate(),
       type: "regular",
       isMyMessage: !0
     };
-    I(o);
-  }, k = {
+    w(o);
+  }, I = {
     header: {
-      content: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-        b.md && /* @__PURE__ */ r(
+      content: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+        x.md && /* @__PURE__ */ r(
           "button",
           {
             className: "text-xl hover:text-primary",
-            onClick: () => C({}),
-            children: /* @__PURE__ */ r(G, {})
+            onClick: () => g({}),
+            children: /* @__PURE__ */ r(D, {})
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "button",
           {
             className: "flex items-center gap-2",
             role: "button",
-            onClick: N,
+            onClick: b,
             children: [
-              /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(A, { src: (u = t.user) == null ? void 0 : u.avatarImageUrl }) }),
-              /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ r("div", { className: "flex justify-between", children: /* @__PURE__ */ r("div", { className: "font-bold heading-text truncate", children: (p = t.user) == null ? void 0 : p.name }) }),
-                /* @__PURE__ */ r("div", { children: (t == null ? void 0 : t.chatType) === "groups" ? "click here for group info" : "last seen recently" })
+              /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(S, { src: t.user?.avatarImageUrl }) }),
+              /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ r("div", { className: "flex justify-between", children: /* @__PURE__ */ r("div", { className: "font-bold heading-text truncate", children: t.user?.name }) }),
+                /* @__PURE__ */ r("div", { children: t?.chatType === "groups" ? "click here for group info" : "last seen recently" })
               ] })
             ]
           }
         )
       ] }),
-      extra: /* @__PURE__ */ r(E, { muted: t.muted }),
+      extra: /* @__PURE__ */ r(T, { muted: t.muted }),
       className: "bg-gray-100 dark:bg-gray-600 h-[100px]"
     }
   };
-  S(() => {
+  M(() => {
     const e = async () => {
       m(!0);
-      const a = g.find(
+      const a = p.find(
         (o) => o.id === t.id
       );
       if (a)
-        c(a.conversation);
+        i(a.conversation);
       else {
-        const o = await U({
+        const o = await E({
           id: t.id
         });
-        c(o.conversation), v(o);
+        i(o.conversation), f(o);
       }
-      m(!1), w();
+      m(!1), y();
     };
-    t.id && (c([]), e());
+    t.id && (i([]), e());
   }, [t.id, l]);
-  const M = T(() => l.map((e) => (e.timestamp = f.unix(e.timestamp).toDate(), e.isMyMessage && (e.showAvatar = !1), e)), [l]);
+  const j = R(() => l.map((e) => (e.timestamp = h.unix(e.timestamp).toDate(), e.isMyMessage && (e.showAvatar = !1), e)), [l]);
   return /* @__PURE__ */ r(
     "div",
     {
-      className: B(
+      className: L(
         "w-full md:block",
         !t.id && "hidden"
       ),
       children: t.id ? /* @__PURE__ */ r(
-        F,
+        P,
         {
           className: "flex-1 h-full max-h-full dark:border-gray-700",
           bodyClass: "h-[calc(100%-100px)] relative",
-          ...k,
+          ...I,
           children: /* @__PURE__ */ r(
-            H,
+            G,
             {
               ref: s,
-              messageList: M,
+              messageList: j,
               placeholder: "Enter a prompt here",
               showAvatar: !0,
               avatarGap: !0,
               messageListClass: "h-[calc(100%-100px)]",
               bubbleClass: "max-w-[300px]",
-              onInputChange: j
+              onInputChange: N
             }
           )
         }
-      ) : /* @__PURE__ */ i("div", { className: "flex-1 h-full max-h-full flex flex-col items-center justify-center rounded-2xl border border-gray-200 dark:border-gray-800", children: [
-        /* @__PURE__ */ r(L, { height: 250, width: 250 }),
-        /* @__PURE__ */ i("div", { className: "mt-10 text-center", children: [
+      ) : /* @__PURE__ */ c("div", { className: "flex-1 h-full max-h-full flex flex-col items-center justify-center rounded-2xl border border-gray-200 dark:border-gray-800", children: [
+        /* @__PURE__ */ r(A, { height: 250, width: 250 }),
+        /* @__PURE__ */ c("div", { className: "mt-10 text-center", children: [
           /* @__PURE__ */ r("h3", { children: "Start Chatting!" }),
           /* @__PURE__ */ r("p", { className: "mt-2 text-base", children: "Pick a Conversation or Begin a New One" })
         ] })
@@ -164,6 +161,6 @@ const O = (s) => {
   );
 };
 export {
-  oe as default
+  ae as default
 };
 //# sourceMappingURL=ChatBody.js.map

package/dist/@ecme/views/concepts/chat/Chat/components/ChatBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBody.js","sources":["../../../../../../../lib/@ecme/views/concepts/chat/Chat/components/ChatBody.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useMemo } from 'react'\nimport Avatar from '@/components/ui/Avatar'\nimport Card from '@/components/ui/Card'\nimport ChatBox from '@/components/view/ChatBox'\nimport ChatAction from './ChatAction'\nimport StartConverstation from '@/assets/svg/StartConverstation'\nimport { useChatStore } from '../store/chatStore'\nimport { apiGetConversation } from '@/services/ChatService'\nimport classNames from '@/utils/classNames'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport dayjs from 'dayjs'\nimport uniqueId from 'lodash/uniqueId'\nimport { TbChevronLeft } from 'react-icons/tb'\nimport type { GetConversationResponse, Message, ChatType } from '../types'\nimport type { ScrollBarRef } from '@/components/ui/ScrollBar'\n\nconst getFileType = (file: File) => {\n    console.log('file.type', file.type)\n    switch (file.type) {\n        case 'image/jpg':\n        case 'image/jpeg':\n        case 'image/png':\n        case 'image/webp':\n            return 'image'\n        case 'video/mp4':\n        case 'video/avi':\n            return 'video'\n        case 'audio/mp3':\n        case 'audio/wav':\n            return 'audio'\n        default:\n            return 'misc'\n    }\n}\n\nconst ChatBody = () => {\n    const scrollRef = useRef<ScrollBarRef>(null)\n    const selectedChat = useChatStore((state) => state.selectedChat)\n    const conversationRecord = useChatStore((state) => state.conversationRecord)\n    const pushConversationRecord = useChatStore(\n        (state) => state.pushConversationRecord,\n    )\n    const setSelectedChat = useChatStore((state) => state.setSelectedChat)\n    const pushConversationMessage = useChatStore(\n        (state) => state.pushConversationMessage,\n    )\n    const setContactInfoDrawer = useChatStore(\n        (state) => state.setContactInfoDrawer,\n    )\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [_, setIsFetchingConversation] = useState(false)\n    const [conversation, setConversation] = useState<Message[]>([])\n\n    const { smaller } = useResponsive()\n\n    const scrollToBottom = () => {\n        if (scrollRef.current?.getScrollElement) {\n            const scrollElement = scrollRef.current.getScrollElement()\n            if (scrollElement) {\n                scrollElement.scrollTop = scrollElement.scrollHeight\n            }\n        }\n    }\n\n    const handleProfileClick = () => {\n        setContactInfoDrawer({\n            userId: selectedChat.user?.id as string,\n            chatId: selectedChat.id as string,\n            chatType: selectedChat.chatType as ChatType,\n            open: true,\n        })\n    }\n\n    const handlePushMessage = (message: Message) => {\n        pushConversationMessage(selectedChat.id as string, message)\n        setConversation((prevConversation) => {\n            prevConversation.push(message)\n            return structuredClone(prevConversation)\n        })\n    }\n\n    const handleInputChange = async ({\n        value,\n        attachments,\n    }: {\n        value: string\n        attachments?: File[]\n    }) => {\n        const newMessage: Message = {\n            id: uniqueId('chat-conversation-'),\n            sender: {\n                id: '1',\n                name: 'Angelina Gotelli',\n                avatarImageUrl: '/img/avatars/thumb-1.jpg',\n            },\n            content: value,\n            attachments: attachments?.map((attachment) => {\n                return {\n                    type: getFileType(attachment),\n                    source: attachment,\n                    mediaUrl: URL.createObjectURL(attachment),\n                }\n            }),\n            timestamp: dayjs().toDate(),\n            type: 'regular',\n            isMyMessage: true,\n        }\n        handlePushMessage(newMessage)\n    }\n\n    const cardHeaderProps = {\n        header: {\n            content: (\n                <div className=\"flex items-center gap-2\">\n                    {smaller.md && (\n                        <button\n                            className=\"text-xl hover:text-primary\"\n                            onClick={() => setSelectedChat({})}\n                        >\n                            <TbChevronLeft />\n                        </button>\n                    )}\n                    <button\n                        className=\"flex items-center gap-2\"\n                        role=\"button\"\n                        onClick={handleProfileClick}\n                    >\n                        <div>\n                            <Avatar src={selectedChat.user?.avatarImageUrl} />\n                        </div>\n                        <div className=\"min-w-0 flex-1\">\n                            <div className=\"flex justify-between\">\n                                <div className=\"font-bold heading-text truncate\">\n                                    {selectedChat.user?.name}\n                                </div>\n                            </div>\n                            <div>\n                                {selectedChat?.chatType === 'groups'\n                                    ? 'click here for group info'\n                                    : 'last seen recently'}\n                            </div>\n                        </div>\n                    </button>\n                </div>\n            ),\n            extra: <ChatAction muted={selectedChat.muted} />,\n            className: 'bg-gray-100 dark:bg-gray-600 h-[100px]',\n        },\n    }\n\n    useEffect(() => {\n        const fetchConvesation = async () => {\n            setIsFetchingConversation(true)\n\n            const record = conversationRecord.find(\n                (item) => item.id === selectedChat.id,\n            )\n\n            if (record) {\n                setConversation(record.conversation)\n            } else {\n                const resp = await apiGetConversation<GetConversationResponse>({\n                    id: selectedChat.id as string,\n                })\n                setConversation(resp.conversation)\n                pushConversationRecord(resp)\n            }\n\n            setIsFetchingConversation(false)\n            scrollToBottom()\n        }\n\n        if (selectedChat.id) {\n            setConversation([])\n            fetchConvesation()\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedChat.id, conversation])\n\n    const messageList = useMemo(() => {\n        return conversation.map((item) => {\n            item.timestamp = dayjs\n                .unix(item.timestamp as number)\n                .toDate() as Date\n            if (item.isMyMessage) {\n                item.showAvatar = false\n            }\n            return item\n        })\n    }, [conversation])\n\n    return (\n        <div\n            className={classNames(\n                'w-full md:block',\n                !selectedChat.id && 'hidden',\n            )}\n        >\n            {selectedChat.id ? (\n                <Card\n                    className=\"flex-1 h-full max-h-full dark:border-gray-700\"\n                    bodyClass=\"h-[calc(100%-100px)] relative\"\n                    {...cardHeaderProps}\n                >\n                    <ChatBox\n                        ref={scrollRef}\n                        messageList={messageList}\n                        placeholder=\"Enter a prompt here\"\n                        showAvatar={true}\n                        avatarGap={true}\n                        messageListClass=\"h-[calc(100%-100px)]\"\n                        bubbleClass=\"max-w-[300px]\"\n                        onInputChange={handleInputChange}\n                    />\n                </Card>\n            ) : (\n                <div className=\"flex-1 h-full max-h-full flex flex-col items-center justify-center rounded-2xl border border-gray-200 dark:border-gray-800\">\n                    <StartConverstation height={250} width={250} />\n                    <div className=\"mt-10 text-center\">\n                        <h3>Start Chatting!</h3>\n                        <p className=\"mt-2 text-base\">\n                            Pick a Conversation or Begin a New One\n                        </p>\n                    </div>\n                </div>\n            )}\n        </div>\n    )\n}\n\nexport default ChatBody\n"],"names":["getFileType","file","ChatBody","scrollRef","useRef","selectedChat","useChatStore","state","conversationRecord","pushConversationRecord","setSelectedChat","pushConversationMessage","setContactInfoDrawer","_","setIsFetchingConversation","useState","conversation","setConversation","smaller","useResponsive","scrollToBottom","_a","scrollElement","handleProfileClick","handlePushMessage","message","prevConversation","handleInputChange","value","attachments","newMessage","uniqueId","attachment","dayjs","cardHeaderProps","jsxs","jsx","TbChevronLeft","Avatar","_b","ChatAction","useEffect","fetchConvesation","record","item","resp","apiGetConversation","messageList","useMemo","classNames","Card","ChatBox","StartConverstation"],"mappings":"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"}
+{"version":3,"file":"ChatBody.js","sources":["../../../../../../../lib/@ecme/views/concepts/chat/Chat/components/ChatBody.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useMemo } from 'react'\nimport Avatar from '@/components/ui/Avatar'\nimport Card from '@/components/ui/Card'\nimport ChatBox from '@/components/view/ChatBox'\nimport ChatAction from './ChatAction'\nimport StartConverstation from '@/assets/svg/StartConverstation'\nimport { useChatStore } from '../store/chatStore'\nimport { apiGetConversation } from '@/services/ChatService'\nimport classNames from '@/utils/classNames'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport dayjs from 'dayjs'\nimport uniqueId from 'lodash/uniqueId'\nimport { TbChevronLeft } from 'react-icons/tb'\nimport type { GetConversationResponse, Message, ChatType } from '../types'\nimport type { ScrollBarRef } from '@/components/ui/ScrollBar'\n\nconst getFileType = (file: File) => {\n    console.log('file.type', file.type)\n    switch (file.type) {\n        case 'image/jpg':\n        case 'image/jpeg':\n        case 'image/png':\n        case 'image/webp':\n            return 'image'\n        case 'video/mp4':\n        case 'video/avi':\n            return 'video'\n        case 'audio/mp3':\n        case 'audio/wav':\n            return 'audio'\n        default:\n            return 'misc'\n    }\n}\n\nconst ChatBody = () => {\n    const scrollRef = useRef<ScrollBarRef>(null)\n    const selectedChat = useChatStore((state) => state.selectedChat)\n    const conversationRecord = useChatStore((state) => state.conversationRecord)\n    const pushConversationRecord = useChatStore(\n        (state) => state.pushConversationRecord,\n    )\n    const setSelectedChat = useChatStore((state) => state.setSelectedChat)\n    const pushConversationMessage = useChatStore(\n        (state) => state.pushConversationMessage,\n    )\n    const setContactInfoDrawer = useChatStore(\n        (state) => state.setContactInfoDrawer,\n    )\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const [_, setIsFetchingConversation] = useState(false)\n    const [conversation, setConversation] = useState<Message[]>([])\n\n    const { smaller } = useResponsive()\n\n    const scrollToBottom = () => {\n        if (scrollRef.current?.getScrollElement) {\n            const scrollElement = scrollRef.current.getScrollElement()\n            if (scrollElement) {\n                scrollElement.scrollTop = scrollElement.scrollHeight\n            }\n        }\n    }\n\n    const handleProfileClick = () => {\n        setContactInfoDrawer({\n            userId: selectedChat.user?.id as string,\n            chatId: selectedChat.id as string,\n            chatType: selectedChat.chatType as ChatType,\n            open: true,\n        })\n    }\n\n    const handlePushMessage = (message: Message) => {\n        pushConversationMessage(selectedChat.id as string, message)\n        setConversation((prevConversation) => {\n            prevConversation.push(message)\n            return structuredClone(prevConversation)\n        })\n    }\n\n    const handleInputChange = async ({\n        value,\n        attachments,\n    }: {\n        value: string\n        attachments?: File[]\n    }) => {\n        const newMessage: Message = {\n            id: uniqueId('chat-conversation-'),\n            sender: {\n                id: '1',\n                name: 'Angelina Gotelli',\n                avatarImageUrl: '/img/avatars/thumb-1.jpg',\n            },\n            content: value,\n            attachments: attachments?.map((attachment) => {\n                return {\n                    type: getFileType(attachment),\n                    source: attachment,\n                    mediaUrl: URL.createObjectURL(attachment),\n                }\n            }),\n            timestamp: dayjs().toDate(),\n            type: 'regular',\n            isMyMessage: true,\n        }\n        handlePushMessage(newMessage)\n    }\n\n    const cardHeaderProps = {\n        header: {\n            content: (\n                <div className=\"flex items-center gap-2\">\n                    {smaller.md && (\n                        <button\n                            className=\"text-xl hover:text-primary\"\n                            onClick={() => setSelectedChat({})}\n                        >\n                            <TbChevronLeft />\n                        </button>\n                    )}\n                    <button\n                        className=\"flex items-center gap-2\"\n                        role=\"button\"\n                        onClick={handleProfileClick}\n                    >\n                        <div>\n                            <Avatar src={selectedChat.user?.avatarImageUrl} />\n                        </div>\n                        <div className=\"min-w-0 flex-1\">\n                            <div className=\"flex justify-between\">\n                                <div className=\"font-bold heading-text truncate\">\n                                    {selectedChat.user?.name}\n                                </div>\n                            </div>\n                            <div>\n                                {selectedChat?.chatType === 'groups'\n                                    ? 'click here for group info'\n                                    : 'last seen recently'}\n                            </div>\n                        </div>\n                    </button>\n                </div>\n            ),\n            extra: <ChatAction muted={selectedChat.muted} />,\n            className: 'bg-gray-100 dark:bg-gray-600 h-[100px]',\n        },\n    }\n\n    useEffect(() => {\n        const fetchConvesation = async () => {\n            setIsFetchingConversation(true)\n\n            const record = conversationRecord.find(\n                (item) => item.id === selectedChat.id,\n            )\n\n            if (record) {\n                setConversation(record.conversation)\n            } else {\n                const resp = await apiGetConversation<GetConversationResponse>({\n                    id: selectedChat.id as string,\n                })\n                setConversation(resp.conversation)\n                pushConversationRecord(resp)\n            }\n\n            setIsFetchingConversation(false)\n            scrollToBottom()\n        }\n\n        if (selectedChat.id) {\n            setConversation([])\n            fetchConvesation()\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedChat.id, conversation])\n\n    const messageList = useMemo(() => {\n        return conversation.map((item) => {\n            item.timestamp = dayjs\n                .unix(item.timestamp as number)\n                .toDate() as Date\n            if (item.isMyMessage) {\n                item.showAvatar = false\n            }\n            return item\n        })\n    }, [conversation])\n\n    return (\n        <div\n            className={classNames(\n                'w-full md:block',\n                !selectedChat.id && 'hidden',\n            )}\n        >\n            {selectedChat.id ? (\n                <Card\n                    className=\"flex-1 h-full max-h-full dark:border-gray-700\"\n                    bodyClass=\"h-[calc(100%-100px)] relative\"\n                    {...cardHeaderProps}\n                >\n                    <ChatBox\n                        ref={scrollRef}\n                        messageList={messageList}\n                        placeholder=\"Enter a prompt here\"\n                        showAvatar={true}\n                        avatarGap={true}\n                        messageListClass=\"h-[calc(100%-100px)]\"\n                        bubbleClass=\"max-w-[300px]\"\n                        onInputChange={handleInputChange}\n                    />\n                </Card>\n            ) : (\n                <div className=\"flex-1 h-full max-h-full flex flex-col items-center justify-center rounded-2xl border border-gray-200 dark:border-gray-800\">\n                    <StartConverstation height={250} width={250} />\n                    <div className=\"mt-10 text-center\">\n                        <h3>Start Chatting!</h3>\n                        <p className=\"mt-2 text-base\">\n                            Pick a Conversation or Begin a New One\n                        </p>\n                    </div>\n                </div>\n            )}\n        </div>\n    )\n}\n\nexport default ChatBody\n"],"names":["getFileType","file","ChatBody","scrollRef","useRef","selectedChat","useChatStore","state","conversationRecord","pushConversationRecord","setSelectedChat","pushConversationMessage","setContactInfoDrawer","_","setIsFetchingConversation","useState","conversation","setConversation","smaller","useResponsive","scrollToBottom","scrollElement","handleProfileClick","handlePushMessage","message","prevConversation","handleInputChange","value","attachments","newMessage","uniqueId","attachment","dayjs","cardHeaderProps","jsxs","jsx","TbChevronLeft","Avatar","ChatAction","useEffect","fetchConvesation","record","item","resp","apiGetConversation","messageList","useMemo","classNames","Card","ChatBox","StartConverstation"],"mappings":"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"}

package/dist/@ecme/views/concepts/chat/Chat/components/ChatList.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useRef as k, useState as d, useEffect as h } from "react";
+import { useRef as k, useState as o, useEffect as d } from "react";
 import { Avatar as I } from "../../../../../components/ui/Avatar/index.js";
 import "../../../../../components/ui/Badge/index.js";
 import "../../../../../components/ui/ScrollBar/index.js";
@@ -14,44 +14,43 @@ import E from "dayjs";
 import O from "../../../../../components/ui/ScrollBar/ScrollBar.js";
 import Q from "../../../../../components/ui/Badge/Badge.js";
 const re = () => {
-  const i = r((e) => e.chats), f = r((e) => e.chatsFetched), m = r((e) => e.selectedChat), u = r((e) => e.setSelectedChat), p = r((e) => e.setMobileSidebar), g = r((e) => e.selectedChatType), n = r(
+  const h = r((e) => e.chats), i = r((e) => e.chatsFetched), f = r((e) => e.selectedChat), m = r((e) => e.setSelectedChat), u = r((e) => e.setMobileSidebar), p = r((e) => e.selectedChatType), c = r(
     (e) => e.setSelectedChatType
-  ), b = r((e) => e.setChatRead), c = k(null), [l, C] = d(!1), [o, x] = d(""), { fetchChats: v } = R();
-  h(() => {
-    f || v();
-  }, []), h(() => {
-    var e, s;
-    l ? (e = c.current) == null || e.focus() : (s = c.current) == null || s.blur();
+  ), g = r((e) => e.setChatRead), s = k(null), [l, b] = o(!1), [n, C] = o(""), { fetchChats: x } = R();
+  d(() => {
+    i || x();
+  }, []), d(() => {
+    l ? s.current?.focus() : s.current?.blur();
   }, [l]);
-  const y = ({
+  const v = ({
     id: e,
-    user: s,
+    user: S,
     muted: T,
     chatType: w,
     unread: j
   }) => {
-    j > 0 && b(e), u({
+    j > 0 && g(e), m({
       id: e,
-      user: s,
+      user: S,
       muted: T,
       chatType: w
-    }), p(!1);
+    }), u(!1);
   };
-  function N(e) {
-    e.target.value.length > 0 && n(""), e.target.value.length === 0 && n("personal"), x(e.target.value);
+  function y(e) {
+    e.target.value.length > 0 && c(""), e.target.value.length === 0 && c("personal"), C(e.target.value);
   }
-  const S = D(N, 500);
+  const N = D(y, 500);
   return /* @__PURE__ */ a("div", { className: "flex flex-col justify-between h-full", children: [
     /* @__PURE__ */ a("div", { className: "mb-4", children: [
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-4", children: [
         l ? /* @__PURE__ */ t(
           "input",
           {
-            ref: c,
+            ref: s,
             className: "flex-1 h-full placeholder:text-gray-400 placeholder:text-base placeholder:font-normal bg-transparent focus:outline-none heading-text font-bold",
             placeholder: "Search chat",
             onChange: (e) => {
-              S(e);
+              N(e);
             }
           }
         ) : /* @__PURE__ */ t("h4", { children: "Chat" }),
@@ -61,7 +60,7 @@ const re = () => {
             className: "close-button text-lg",
             type: "button",
             onClick: () => {
-              C(!l);
+              b(!l);
             },
             children: l ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(M, {})
           }
@@ -69,15 +68,15 @@ const re = () => {
       ] }),
       /* @__PURE__ */ t(B, {})
     ] }),
-    /* @__PURE__ */ t(O, { className: "h-[calc(100%-150px)] overflow-y-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 h-full", children: i.filter((e) => o ? e.name.toLowerCase().includes(o) : g === e.chatType).map((e) => /* @__PURE__ */ a(
+    /* @__PURE__ */ t(O, { className: "h-[calc(100%-150px)] overflow-y-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 h-full", children: h.filter((e) => n ? e.name.toLowerCase().includes(n) : p === e.chatType).map((e) => /* @__PURE__ */ a(
       "div",
       {
         className: A(
           "py-3 px-2 flex items-center gap-2 justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 relative cursor-pointer select-none",
-          m.id === e.id && "bg-gray-100 dark:bg-gray-700"
+          f.id === e.id && "bg-gray-100 dark:bg-gray-700"
         ),
         role: "button",
-        onClick: () => y({
+        onClick: () => v({
           id: e.id,
           user: {
             id: e.userId || e.groupId,

package/dist/@ecme/views/concepts/chat/Chat/components/ChatList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatList.js","sources":["../../../../../../../lib/@ecme/views/concepts/chat/Chat/components/ChatList.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react'\nimport Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport ChatSegment from './ChatSegment'\nimport NewChat from './NewChat'\nimport { useChatStore } from '../store/chatStore'\nimport useChat from '../hooks/useChat'\nimport classNames from '@/utils/classNames'\nimport useDebounce from '@/utils/hooks/useDebounce'\nimport { TbVolumeOff, TbSearch, TbX } from 'react-icons/tb'\nimport dayjs from 'dayjs'\nimport type { ChatType } from '../types'\nimport type { ChangeEvent } from 'react'\n\nconst ChatList = () => {\n    const chats = useChatStore((state) => state.chats)\n    const chatsFetched = useChatStore((state) => state.chatsFetched)\n    const selectedChat = useChatStore((state) => state.selectedChat)\n    const setSelectedChat = useChatStore((state) => state.setSelectedChat)\n    const setMobileSidebar = useChatStore((state) => state.setMobileSidebar)\n    const selectedChatType = useChatStore((state) => state.selectedChatType)\n    const setSelectedChatType = useChatStore(\n        (state) => state.setSelectedChatType,\n    )\n    const setChatRead = useChatStore((state) => state.setChatRead)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const [showSearchBar, setShowSearchBar] = useState(false)\n    const [queryText, setQueryText] = useState('')\n\n    const { fetchChats } = useChat()\n\n    useEffect(() => {\n        if (!chatsFetched) {\n            fetchChats()\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n        if (showSearchBar) {\n            inputRef.current?.focus()\n        } else {\n            inputRef.current?.blur()\n        }\n    }, [showSearchBar])\n\n    const handleChatClick = ({\n        id,\n        user,\n        muted,\n        chatType,\n        unread,\n    }: {\n        id: string\n        user: { id: string; avatarImageUrl: string; name: string }\n        muted: boolean\n        chatType: ChatType\n        unread: number\n    }) => {\n        if (unread > 0) {\n            setChatRead(id)\n        }\n\n        setSelectedChat({\n            id,\n            user,\n            muted,\n            chatType,\n        })\n        setMobileSidebar(false)\n    }\n\n    function handleDebounceFn(e: ChangeEvent<HTMLInputElement>) {\n        if (e.target.value.length > 0) {\n            setSelectedChatType('')\n        }\n\n        if (e.target.value.length === 0) {\n            setSelectedChatType('personal')\n        }\n\n        setQueryText(e.target.value)\n    }\n\n    const debounceFn = useDebounce(handleDebounceFn, 500)\n\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        debounceFn(e)\n    }\n\n    const handleSearchToggleClick = () => {\n        setShowSearchBar(!showSearchBar)\n    }\n\n    return (\n        <div className=\"flex flex-col justify-between h-full\">\n            <div className=\"mb-4\">\n                <div className=\"flex items-center justify-between mb-4\">\n                    {showSearchBar ? (\n                        <input\n                            ref={inputRef}\n                            className=\"flex-1 h-full placeholder:text-gray-400 placeholder:text-base placeholder:font-normal bg-transparent focus:outline-none heading-text font-bold\"\n                            placeholder=\"Search chat\"\n                            onChange={handleInputChange}\n                        />\n                    ) : (\n                        <h4>Chat</h4>\n                    )}\n                    <button\n                        className=\"close-button text-lg\"\n                        type=\"button\"\n                        onClick={handleSearchToggleClick}\n                    >\n                        {showSearchBar ? <TbX /> : <TbSearch />}\n                    </button>\n                </div>\n                <ChatSegment />\n            </div>\n            <ScrollBar className=\"h-[calc(100%-150px)] overflow-y-auto\">\n                <div className=\"flex flex-col gap-2 h-full\">\n                    {chats\n                        .filter((item) => {\n                            if (queryText) {\n                                return item.name\n                                    .toLowerCase()\n                                    .includes(queryText)\n                            }\n\n                            return selectedChatType === item.chatType\n                        })\n                        .map((item) => (\n                            <div\n                                key={item.id}\n                                className={classNames(\n                                    'py-3 px-2 flex items-center gap-2 justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 relative cursor-pointer select-none',\n                                    selectedChat.id === item.id &&\n                                        'bg-gray-100 dark:bg-gray-700',\n                                )}\n                                role=\"button\"\n                                onClick={() =>\n                                    handleChatClick({\n                                        id: item.id,\n                                        user: {\n                                            id: item.userId || item.groupId,\n                                            avatarImageUrl: item.avatar,\n                                            name: item.name,\n                                        },\n                                        muted: item.muted,\n                                        chatType: item.chatType,\n                                        unread: item.unread,\n                                    })\n                                }\n                            >\n                                <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                                    <div>\n                                        <Avatar src={item.avatar} />\n                                    </div>\n                                    <div className=\"min-w-0 flex-1\">\n                                        <div className=\"flex justify-between\">\n                                            <div className=\"font-bold heading-text truncate flex gap-2 items-center\">\n                                                <span>{item.name}</span>\n                                                {item.muted && (\n                                                    <TbVolumeOff className=\"opacity-60\" />\n                                                )}\n                                            </div>\n                                        </div>\n                                        <div className=\"truncate\">\n                                            {item.lastConversation}\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"flex gap-1 items-center\">\n                                    <small className=\"font-semibold\">\n                                        {dayjs\n                                            .unix(item.time)\n                                            .format('hh:mm A')}\n                                    </small>\n                                    {item.unread > 0 && (\n                                        <Badge className=\"bg-primary\" />\n                                    )}\n                                </div>\n                            </div>\n                        ))}\n                </div>\n            </ScrollBar>\n            <NewChat />\n        </div>\n    )\n}\n\nexport default ChatList\n"],"names":["ChatList","chats","useChatStore","state","chatsFetched","selectedChat","setSelectedChat","setMobileSidebar","selectedChatType","setSelectedChatType","setChatRead","inputRef","useRef","showSearchBar","setShowSearchBar","useState","queryText","setQueryText","fetchChats","useChat","useEffect","_a","_b","handleChatClick","id","user","muted","chatType","unread","handleDebounceFn","debounceFn","useDebounce","jsxs","jsx","TbX","TbSearch","ChatSegment","ScrollBar","item","classNames","Avatar","TbVolumeOff","dayjs","Badge","NewChat"],"mappings":"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"}
+{"version":3,"file":"ChatList.js","sources":["../../../../../../../lib/@ecme/views/concepts/chat/Chat/components/ChatList.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'react'\nimport Avatar from '@/components/ui/Avatar'\nimport Badge from '@/components/ui/Badge'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport ChatSegment from './ChatSegment'\nimport NewChat from './NewChat'\nimport { useChatStore } from '../store/chatStore'\nimport useChat from '../hooks/useChat'\nimport classNames from '@/utils/classNames'\nimport useDebounce from '@/utils/hooks/useDebounce'\nimport { TbVolumeOff, TbSearch, TbX } from 'react-icons/tb'\nimport dayjs from 'dayjs'\nimport type { ChatType } from '../types'\nimport type { ChangeEvent } from 'react'\n\nconst ChatList = () => {\n    const chats = useChatStore((state) => state.chats)\n    const chatsFetched = useChatStore((state) => state.chatsFetched)\n    const selectedChat = useChatStore((state) => state.selectedChat)\n    const setSelectedChat = useChatStore((state) => state.setSelectedChat)\n    const setMobileSidebar = useChatStore((state) => state.setMobileSidebar)\n    const selectedChatType = useChatStore((state) => state.selectedChatType)\n    const setSelectedChatType = useChatStore(\n        (state) => state.setSelectedChatType,\n    )\n    const setChatRead = useChatStore((state) => state.setChatRead)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const [showSearchBar, setShowSearchBar] = useState(false)\n    const [queryText, setQueryText] = useState('')\n\n    const { fetchChats } = useChat()\n\n    useEffect(() => {\n        if (!chatsFetched) {\n            fetchChats()\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n        if (showSearchBar) {\n            inputRef.current?.focus()\n        } else {\n            inputRef.current?.blur()\n        }\n    }, [showSearchBar])\n\n    const handleChatClick = ({\n        id,\n        user,\n        muted,\n        chatType,\n        unread,\n    }: {\n        id: string\n        user: { id: string; avatarImageUrl: string; name: string }\n        muted: boolean\n        chatType: ChatType\n        unread: number\n    }) => {\n        if (unread > 0) {\n            setChatRead(id)\n        }\n\n        setSelectedChat({\n            id,\n            user,\n            muted,\n            chatType,\n        })\n        setMobileSidebar(false)\n    }\n\n    function handleDebounceFn(e: ChangeEvent<HTMLInputElement>) {\n        if (e.target.value.length > 0) {\n            setSelectedChatType('')\n        }\n\n        if (e.target.value.length === 0) {\n            setSelectedChatType('personal')\n        }\n\n        setQueryText(e.target.value)\n    }\n\n    const debounceFn = useDebounce(handleDebounceFn, 500)\n\n    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n        debounceFn(e)\n    }\n\n    const handleSearchToggleClick = () => {\n        setShowSearchBar(!showSearchBar)\n    }\n\n    return (\n        <div className=\"flex flex-col justify-between h-full\">\n            <div className=\"mb-4\">\n                <div className=\"flex items-center justify-between mb-4\">\n                    {showSearchBar ? (\n                        <input\n                            ref={inputRef}\n                            className=\"flex-1 h-full placeholder:text-gray-400 placeholder:text-base placeholder:font-normal bg-transparent focus:outline-none heading-text font-bold\"\n                            placeholder=\"Search chat\"\n                            onChange={handleInputChange}\n                        />\n                    ) : (\n                        <h4>Chat</h4>\n                    )}\n                    <button\n                        className=\"close-button text-lg\"\n                        type=\"button\"\n                        onClick={handleSearchToggleClick}\n                    >\n                        {showSearchBar ? <TbX /> : <TbSearch />}\n                    </button>\n                </div>\n                <ChatSegment />\n            </div>\n            <ScrollBar className=\"h-[calc(100%-150px)] overflow-y-auto\">\n                <div className=\"flex flex-col gap-2 h-full\">\n                    {chats\n                        .filter((item) => {\n                            if (queryText) {\n                                return item.name\n                                    .toLowerCase()\n                                    .includes(queryText)\n                            }\n\n                            return selectedChatType === item.chatType\n                        })\n                        .map((item) => (\n                            <div\n                                key={item.id}\n                                className={classNames(\n                                    'py-3 px-2 flex items-center gap-2 justify-between rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 relative cursor-pointer select-none',\n                                    selectedChat.id === item.id &&\n                                        'bg-gray-100 dark:bg-gray-700',\n                                )}\n                                role=\"button\"\n                                onClick={() =>\n                                    handleChatClick({\n                                        id: item.id,\n                                        user: {\n                                            id: item.userId || item.groupId,\n                                            avatarImageUrl: item.avatar,\n                                            name: item.name,\n                                        },\n                                        muted: item.muted,\n                                        chatType: item.chatType,\n                                        unread: item.unread,\n                                    })\n                                }\n                            >\n                                <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                                    <div>\n                                        <Avatar src={item.avatar} />\n                                    </div>\n                                    <div className=\"min-w-0 flex-1\">\n                                        <div className=\"flex justify-between\">\n                                            <div className=\"font-bold heading-text truncate flex gap-2 items-center\">\n                                                <span>{item.name}</span>\n                                                {item.muted && (\n                                                    <TbVolumeOff className=\"opacity-60\" />\n                                                )}\n                                            </div>\n                                        </div>\n                                        <div className=\"truncate\">\n                                            {item.lastConversation}\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"flex gap-1 items-center\">\n                                    <small className=\"font-semibold\">\n                                        {dayjs\n                                            .unix(item.time)\n                                            .format('hh:mm A')}\n                                    </small>\n                                    {item.unread > 0 && (\n                                        <Badge className=\"bg-primary\" />\n                                    )}\n                                </div>\n                            </div>\n                        ))}\n                </div>\n            </ScrollBar>\n            <NewChat />\n        </div>\n    )\n}\n\nexport default ChatList\n"],"names":["ChatList","chats","useChatStore","state","chatsFetched","selectedChat","setSelectedChat","setMobileSidebar","selectedChatType","setSelectedChatType","setChatRead","inputRef","useRef","showSearchBar","setShowSearchBar","useState","queryText","setQueryText","fetchChats","useChat","useEffect","handleChatClick","id","user","muted","chatType","unread","handleDebounceFn","debounceFn","useDebounce","jsxs","jsx","TbX","TbSearch","ChatSegment","ScrollBar","item","classNames","Avatar","TbVolumeOff","dayjs","Badge","NewChat"],"mappings":"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"}