pukaad-ui-lib 1.460.0 → 1.462.0

package/dist/runtime/components/modal/modal-chat-share.vue

@@ -0,0 +1,214 @@
+<template>
+  <Modal v-model="isOpen" title="เลือกข้อมูลที่จะส่ง" class="w-[426px]">
+    <div class="flex flex-col gap-[16px]">
+      <InputSearch name="chat_share_search" v-model="searchTerm" />
+      <ShadTabs v-model="currentTab" class="w-full gap-[8px]">
+        <ShadTabsList class="grid grid-cols-3 w-full">
+          <ShadTabsTrigger
+            v-for="tab in listTabs"
+            :key="tab.value"
+            :value="tab.value"
+          >
+            {{ tab.label }}
+          </ShadTabsTrigger>
+        </ShadTabsList>
+        <ShadTabsContent
+          v-for="tab in listTabs"
+          :key="tab.value"
+          :ref="(el) => setPanel(tab.value, el)"
+          :value="tab.value"
+          class="flex-none h-[400px] overflow-y-auto"
+        >
+          <div
+            v-for="item in states[tab.value].items"
+            :key="item.id"
+            class="flex gap-[8px] items-center py-[6px] px-[8px]"
+          >
+            <CardMention :item="item" />
+            <Button
+              color="primary"
+              size="sm"
+              class="shrink-0"
+              @click="emit('send', item)"
+            >
+              ส่ง
+            </Button>
+          </div>
+          <div
+            v-if="
+  !states[tab.value].items.length && !states[tab.value].loading && !hasMore(tab.value)
+"
+            class="h-full flex items-center justify-center font-body-medium text-gray"
+          >
+            ไม่พบข้อมูล
+          </div>
+          <template v-if="states[tab.value].loading">
+            <div
+              v-for="n in states[tab.value].items.length ? 2 : 5"
+              :key="`skeleton-${n}`"
+              class="py-[6px] px-[8px]"
+            >
+              <CardMentionSkeleton :mention-type="tab.value === 'post' ? 'post' : 'blog'" />
+            </div>
+          </template>
+        </ShadTabsContent>
+      </ShadTabs>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { reactive, ref, shallowReactive, watch } from "vue";
+import { useDebounceFn, useInfiniteScroll } from "@vueuse/core";
+import { useApi } from "../../composables/useApi";
+import CardMention, {
+} from "../card/card-mention/card-mention.vue";
+import CardMentionSkeleton from "../card/card-mention/card-mention-skeleton.vue";
+import {
+  mapBlog,
+  mapPlace,
+  mapPost
+} from "../../utils/mention";
+const props = defineProps({
+  profileIds: { type: Array, required: true }
+});
+const emit = defineEmits(["send"]);
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const PAGE_SIZE = 10;
+const listTabs = [
+  { value: "post", label: "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32" },
+  { value: "place", label: "\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48" },
+  { value: "blog", label: "\u0E1A\u0E25\u0E47\u0E2D\u0E01" }
+];
+const api = useApi({ includeProvince: false });
+const currentTab = ref("post");
+const searchTerm = ref("");
+const createState = () => ({
+  items: [],
+  sources: Object.fromEntries(
+    props.profileIds.map((id) => [id, { page: 1, hasMore: true }])
+  ),
+  loading: false
+});
+const states = reactive({
+  post: createState(),
+  place: createState(),
+  blog: createState()
+});
+const generations = { post: 0, place: 0, blog: 0 };
+const hasMore = (tab) => Object.values(states[tab].sources).some((source) => source.hasMore);
+const requestPage = async (tab, profileId, page, q) => {
+  if (tab === "post") {
+    const res2 = await api(
+      `/profiles/${profileId}/contents`,
+      {
+        query: {
+          page,
+          page_size: PAGE_SIZE,
+          status: "PUBLISHED",
+          query: q || void 0
+        }
+      }
+    );
+    return {
+      items: (res2.data ?? []).map(mapPost),
+      totalPage: res2.meta?.total_page ?? 0
+    };
+  }
+  if (tab === "blog") {
+    const res2 = await api(
+      `/profiles/${profileId}/blogs`,
+      {
+        query: {
+          page,
+          page_size: PAGE_SIZE,
+          status: "PUBLISHED",
+          query: q || void 0
+        }
+      }
+    );
+    return {
+      items: (res2.data ?? []).map(mapBlog),
+      totalPage: res2.meta?.total_page ?? 0
+    };
+  }
+  const res = await api(`/profiles/${profileId}/places`, {
+    query: { page, page_size: PAGE_SIZE, q: q || void 0 }
+  });
+  return {
+    items: (res.data?.items ?? []).map(mapPlace),
+    totalPage: res.data?.pagination?.total_page ?? 0
+  };
+};
+const loadMore = async (tab) => {
+  const state = states[tab];
+  if (state.loading || !hasMore(tab)) return;
+  state.loading = true;
+  const generation = generations[tab];
+  const q = searchTerm.value.trim();
+  const pending = Object.entries(state.sources).filter(
+    ([, source]) => source.hasMore
+  );
+  const results = await Promise.allSettled(
+    pending.map(
+      ([profileId, source]) => requestPage(tab, profileId, source.page, q)
+    )
+  );
+  if (generation !== generations[tab]) return;
+  const seen = new Set(state.items.map((item) => item.id));
+  const merged = [...state.items];
+  results.forEach((result, index) => {
+    const source = state.sources[pending[index][0]];
+    if (result.status === "rejected") {
+      source.hasMore = false;
+      return;
+    }
+    source.page++;
+    source.hasMore = source.page <= result.value.totalPage;
+    for (const item of result.value.items) {
+      if (seen.has(item.id)) continue;
+      seen.add(item.id);
+      merged.push(item);
+    }
+  });
+  state.items = merged;
+  state.loading = false;
+};
+const panels = shallowReactive({
+  post: null,
+  place: null,
+  blog: null
+});
+const setPanel = (tab, ref2) => {
+  const el = ref2?.$el ?? ref2;
+  const panel = el instanceof HTMLElement ? el : null;
+  if (panels[tab] !== panel) panels[tab] = panel;
+};
+useInfiniteScroll(
+  () => panels[currentTab.value],
+  () => loadMore(currentTab.value),
+  {
+    distance: 80,
+    canLoadMore: () => hasMore(currentTab.value)
+  }
+);
+const resetAll = () => {
+  for (const { value: tab } of listTabs) {
+    generations[tab]++;
+    Object.assign(states[tab], createState());
+    const panel = panels[tab];
+    if (panel) panel.scrollTop = 0;
+  }
+  void loadMore(currentTab.value);
+};
+watch(searchTerm, useDebounceFn(resetAll, 300));
+watch(currentTab, (tab) => {
+  if (!states[tab].items.length) void loadMore(tab);
+});
+watch(
+  [isOpen, () => props.profileIds.join(",")],
+  ([open]) => {
+    if (open) resetAll();
+  }
+);
+</script>

package/dist/runtime/components/modal/modal-chat-share.vue.d.ts

@@ -0,0 +1,17 @@
+import { type CardMentionItem } from "../card/card-mention/card-mention.vue.js";
+type __VLS_Props = {
+    profileIds: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    send: (item: CardMentionItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onSend?: ((item: CardMentionItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/store-chat.d.ts

@@ -1,4 +1,4 @@
-import type { ChatConversation, ChatMessage } from "../types/chat.js";
+import type { ChatConversation, ChatMessage, ChatSharePreview } from "../types/chat.js";
 export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat", Pick<{
     conversations: import("vue").Ref<{
         id: string;
@@ -31,6 +31,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -74,6 +87,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -107,6 +133,7 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     fetchOlderMessages: (conversationId: string) => Promise<void>;
     sendMessage: (conversationId: string, body: string, replyTo?: ChatMessage) => Promise<void>;
     sendMedia: (conversationId: string, files: File[], replyTo?: ChatMessage) => Promise<void>;
+    sendShare: (conversationId: string, share: ChatSharePreview) => Promise<void>;
     retryMessage: (conversationId: string, clientId: string) => Promise<void>;
     markRead: (conversationId: string, messageId: string) => Promise<void>;
     isReadByPeer: (conversationId: string, messageId: string) => boolean;
@@ -153,6 +180,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -196,6 +236,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -229,6 +282,7 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     fetchOlderMessages: (conversationId: string) => Promise<void>;
     sendMessage: (conversationId: string, body: string, replyTo?: ChatMessage) => Promise<void>;
     sendMedia: (conversationId: string, files: File[], replyTo?: ChatMessage) => Promise<void>;
+    sendShare: (conversationId: string, share: ChatSharePreview) => Promise<void>;
     retryMessage: (conversationId: string, clientId: string) => Promise<void>;
     markRead: (conversationId: string, messageId: string) => Promise<void>;
     isReadByPeer: (conversationId: string, messageId: string) => boolean;
@@ -275,6 +329,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -318,6 +385,19 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
                 is_deleted: boolean;
                 thumbnail_url: string | null;
             } | null | undefined;
+            share?: {
+                type: import("../types/chat.js").ChatShareType;
+                id: string;
+                title: string;
+                content_type?: string | undefined;
+                cover_color?: string | undefined;
+                image?: string | undefined;
+                thumbnail?: string | undefined;
+                place_name?: string | undefined;
+                address?: string | undefined;
+                author_name?: string | undefined;
+                author_avatar?: string | null | undefined;
+            } | null | undefined;
             is_deleted: boolean;
             created_at: string;
             status?: import("../types/chat.js").ChatMessageStatus | undefined;
@@ -351,6 +431,7 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     fetchOlderMessages: (conversationId: string) => Promise<void>;
     sendMessage: (conversationId: string, body: string, replyTo?: ChatMessage) => Promise<void>;
     sendMedia: (conversationId: string, files: File[], replyTo?: ChatMessage) => Promise<void>;
+    sendShare: (conversationId: string, share: ChatSharePreview) => Promise<void>;
     retryMessage: (conversationId: string, clientId: string) => Promise<void>;
     markRead: (conversationId: string, messageId: string) => Promise<void>;
     isReadByPeer: (conversationId: string, messageId: string) => boolean;
@@ -365,4 +446,4 @@ export declare const useChatStore: import("pinia").StoreDefinition<"pukaad-chat"
     startRealtime: () => void;
     stopRealtime: () => void;
     resync: (activeConversationId?: string) => Promise<void>;
-}, "reset" | "markRead" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "retryMessage" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;
+}, "reset" | "markRead" | "setUnreadFirst" | "setMyProfileId" | "fetchConversations" | "fetchConversation" | "fetchLatestMessages" | "fetchOlderMessages" | "sendMessage" | "sendMedia" | "sendShare" | "retryMessage" | "isReadByPeer" | "unreadCountOf" | "startUnreadBadge" | "stopUnreadBadge" | "previewOf" | "sendTyping" | "isPeerTyping" | "deleteMessage" | "startRealtime" | "stopRealtime" | "resync">>;

package/dist/runtime/composables/store-chat.js

@@ -117,10 +117,15 @@ export const useChatStore = defineStore("pukaad-chat", () => {
     const last = myLastRead[conversationId];
     return !last || BigInt(msg.id) > BigInt(last);
   };
+  const shareLabels = {
+    post: "\u0E2A\u0E48\u0E07\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32",
+    place: "\u0E2A\u0E48\u0E07\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48",
+    blog: "\u0E2A\u0E48\u0E07\u0E1A\u0E25\u0E47\u0E2D\u0E01"
+  };
   const previewOf = (conversation) => {
     const msg = conversation.last_message;
     if (!msg) return "";
-    const text = msg.is_deleted ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E16\u0E39\u0E01\u0E25\u0E1A\u0E41\u0E25\u0E49\u0E27" : msg.kind === "image" ? "\u0E2A\u0E48\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E" : msg.kind === "video" ? "\u0E2A\u0E48\u0E07\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D" : msg.body.replace(/\s+/g, " ");
+    const text = msg.is_deleted ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21\u0E16\u0E39\u0E01\u0E25\u0E1A\u0E41\u0E25\u0E49\u0E27" : msg.kind === "image" ? "\u0E2A\u0E48\u0E07\u0E23\u0E39\u0E1B\u0E20\u0E32\u0E1E" : msg.kind === "video" ? "\u0E2A\u0E48\u0E07\u0E27\u0E34\u0E14\u0E35\u0E42\u0E2D" : msg.kind === "share" ? shareLabels[msg.share?.type ?? "post"] : msg.body.replace(/\s+/g, " ");
     return msg.sender_profile_id === myProfileId.value ? `\u0E04\u0E38\u0E13: ${text}` : text;
   };
   const unreadCountOf = (conversation) => {
@@ -239,23 +244,29 @@ export const useChatStore = defineStore("pukaad-chat", () => {
   };
   const toReplyPreview = (original) => {
     const first = original.attachments[0];
+    const share = original.share;
     return {
       id: original.id,
       sender_profile_id: original.sender_profile_id,
       kind: original.kind,
-      body: [...original.body].slice(0, 100).join(""),
+      body: [...share?.title ?? original.body].slice(0, 100).join(""),
       is_deleted: false,
-      thumbnail_url: first ? first.thumbnail_url ?? (first.kind === "image" ? first.url : null) : null
+      thumbnail_url: share ? share.image || share.thumbnail || null : first ? first.thumbnail_url ?? (first.kind === "image" ? first.url : null) : null
     };
   };
   const replyIdOf = (conversationId, clientId) => messages[conversationId]?.find((m) => m.client_id === clientId)?.reply_to?.id;
-  const postMessage = async (conversationId, clientId, body) => {
+  const postMessage = async (conversationId, clientId, body, share) => {
     try {
       const res = await api(
         `/chat/conversations/${conversationId}/messages`,
         {
           method: "POST",
-          body: { client_id: clientId, body, reply_to_message_id: replyIdOf(conversationId, clientId) },
+          body: {
+            client_id: clientId,
+            body,
+            share: share ? { type: share.type, id: share.id } : void 0,
+            reply_to_message_id: replyIdOf(conversationId, clientId)
+          },
           timeout: REQUEST_TIMEOUT
         }
       );
@@ -286,6 +297,23 @@ export const useChatStore = defineStore("pukaad-chat", () => {
     messages[conversationId] = [...messages[conversationId] ?? [], local];
     await postMessage(conversationId, clientId, body);
   };
+  const sendShare = async (conversationId, share) => {
+    const clientId = crypto.randomUUID();
+    const local = {
+      id: `local-${clientId}`,
+      client_id: clientId,
+      sender_profile_id: myProfileId.value,
+      kind: "share",
+      body: "",
+      attachments: [],
+      share,
+      is_deleted: false,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      status: "sending"
+    };
+    messages[conversationId] = [...messages[conversationId] ?? [], local];
+    await postMessage(conversationId, clientId, "", share);
+  };
   const pendingFiles = /* @__PURE__ */ new Map();
   const setProgress = (conversationId, clientId, progress) => {
     const msg = messages[conversationId]?.find((m) => m.client_id === clientId);
@@ -389,6 +417,10 @@ export const useChatStore = defineStore("pukaad-chat", () => {
     if (!msg || msg.status !== "failed" || msg.failure?.retryable === false) return;
     msg.status = "sending";
     msg.failure = void 0;
+    if (msg.kind === "share") {
+      await postMessage(conversationId, clientId, "", msg.share);
+      return;
+    }
     if (msg.kind !== "text") {
       msg.progress = 0;
       await postMedia(conversationId, clientId);
@@ -403,6 +435,7 @@ export const useChatStore = defineStore("pukaad-chat", () => {
       msg.body = "";
       msg.attachments = [];
       msg.reply_to = null;
+      msg.share = null;
     }
     for (const m of messages[conversationId] ?? []) {
       if (m.reply_to?.id === messageId) {
@@ -564,6 +597,7 @@ export const useChatStore = defineStore("pukaad-chat", () => {
     fetchOlderMessages,
     sendMessage,
     sendMedia,
+    sendShare,
     retryMessage,
     markRead,
     isReadByPeer,