memi-board 0.52.0 → 0.52.2

package/dist/runtime/components/CommentAi.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { boardTranslationLocales, COMMENT_BODY_MAX_LENGTH, useMemiBoardI18n, useMemiBoardSettings, useMemiBoardWritingAssistant } from 'memi-board/runtime'
+import type { CommentTranslationSet, WritingAssistantAction } from 'memi-board/runtime'
+
+const props = defineProps<{ boardId: string, disabled?: boolean }>()
+const body = defineModel<string>({ required: true })
+const translations = defineModel<CommentTranslationSet | undefined>('translations')
+const emit = defineEmits<{ busy: [value: boolean] }>()
+const { t, locale, translationEnabled } = useMemiBoardI18n()
+const { getBoard } = useMemiBoardSettings()
+const { assist, translateComment } = useMemiBoardWritingAssistant({ locale })
+const targets = computed(() => boardTranslationLocales(getBoard(props.boardId)))
+const running = ref(false)
+const error = ref('')
+const notice = ref('')
+const previewOpen = ref(false)
+const before = ref('')
+const result = ref('')
+const customOpen = ref(false)
+const instruction = ref('')
+watch(body, () => { translations.value = undefined; notice.value = '' }, { flush: 'sync' })
+const items = computed(() => [
+  [
+    ...(['proofread', 'polish', 'continue', 'summarize'] as const).map(action => ({ label: t(`editor.ai.${action}`), onSelect: () => run(action) })),
+  ],
+  ...(translationEnabled.value ? [[{ label: t('editor.ai.translateAll', { count: targets.value.length }), icon: 'i-lucide-languages', onSelect: translate }]] : []),
+  [{ label: t('editor.ai.custom'), onSelect: () => { instruction.value = ''; customOpen.value = true } }],
+])
+function busy(value: boolean) { running.value = value; emit('busy', value) }
+async function run(action: WritingAssistantAction) {
+  if (running.value || props.disabled || !body.value.trim()) return
+  before.value = body.value
+  error.value = ''; notice.value = ''
+  busy(true)
+  try {
+    const output = await assist({ action, content: before.value, selection: true, customInstruction: instruction.value })
+    result.value = action === 'continue' ? `${before.value}\n\n${output}` : output
+    if (result.value.length > COMMENT_BODY_MAX_LENGTH) throw new Error(t('comments.bodyTooLong', { max: COMMENT_BODY_MAX_LENGTH }))
+    previewOpen.value = true
+  }
+  catch (cause) { error.value = cause instanceof Error ? cause.message : t('editor.ai.failed') }
+  finally { busy(false) }
+}
+async function translate() {
+  if (running.value || props.disabled || !body.value.trim()) return
+  const source = body.value
+  error.value = ''; notice.value = ''
+  busy(true)
+  try {
+    const output = await translateComment({ body: source, targets: targets.value })
+    if (body.value === source) {
+      translations.value = output
+      notice.value = t('commentForm.translationPending', { count: targets.value.length })
+    }
+  }
+  catch (cause) { error.value = cause instanceof Error ? cause.message : t('editor.ai.failed') }
+  finally { busy(false) }
+}
+function apply() {
+  if (body.value === before.value) body.value = result.value
+  previewOpen.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <UDropdownMenu :items="items">
+      <UButton type="button" icon="i-lucide-sparkles" label="AI" size="sm" color="neutral" variant="ghost"
+        :aria-label="t('editor.aiAssistant')" :loading="running" :disabled="disabled || running || !body.trim()" />
+    </UDropdownMenu>
+    <span v-if="error" class="text-xs text-error" role="alert">{{ error }}</span>
+    <span v-else-if="notice" class="text-xs text-primary" role="status">{{ notice }}</span>
+  </div>
+  <UModal v-model:open="customOpen" :title="t('editor.ai.custom')">
+    <template #body><UTextarea v-model="instruction" :maxlength="200" /></template>
+    <template #footer>
+      <UButton type="button" :disabled="!instruction.trim()" :label="t('editor.apply')" @click="customOpen = false; run('custom')" />
+    </template>
+  </UModal>
+  <UModal v-model:open="previewOpen" :title="t('editor.aiPreview.title')">
+    <template #body>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <div><p class="text-xs text-muted">{{ t('editor.aiPreview.before') }}</p><p class="whitespace-pre-wrap break-words text-sm">{{ before }}</p></div>
+        <div><p class="text-xs text-primary">{{ t('editor.aiPreview.after') }}</p><p class="whitespace-pre-wrap break-words text-sm">{{ result }}</p></div>
+      </div>
+    </template>
+    <template #footer>
+      <UButton type="button" color="neutral" variant="ghost" :label="t('common.action.cancel')" @click="previewOpen = false" />
+      <UButton type="button" :label="t('editor.apply')" :disabled="disabled || body !== before" @click="apply" />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/components/CommentFeed.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, resolveComponent, toRef } from 'vue'
-import { useMemiBoardCommentFeed, useMemiBoardI18n } from 'memi-board/runtime'
+import { displayCommentBody, useMemiBoardCommentFeed, useMemiBoardI18n } from 'memi-board/runtime'
 import type { CommentFeedSort, CommentModel } from 'memi-board/runtime'
 
 const NuxtLink = resolveComponent('NuxtLink')
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{ select: [comment: CommentModel] }>()
 
-const { t, formatRelativeDate } = useMemiBoardI18n()
+const { t, locale, formatRelativeDate } = useMemiBoardI18n()
 
 const { comments, commentsPending, hasMore, loadingMore, loadError, loadMore } = useMemiBoardCommentFeed(
   toRef(props, 'sort'),
@@ -111,7 +111,7 @@ const emptyMessage = computed(() =>
               v-if="comment.replyToName"
               class="mr-1 text-primary"
             >@{{ comment.replyToName }}</span>
-            {{ comment.body }}
+            {{ displayCommentBody(comment, locale) }}
           </p>
           <p
             v-if="(comment.likeCount ?? 0) > 0"

package/dist/runtime/components/CommentForm.vue

@@ -6,8 +6,9 @@ import { COMMENT_BODY_MAX_LENGTH, useMemiBoardComments } from 'memi-board/runtim
 import { useMemiBoardModeration } from 'memi-board/runtime'
 import { useMemiBoardSettings } from 'memi-board/runtime'
 import { useMemiBoardI18n } from 'memi-board/runtime'
-import type { Attachment, CommentModel } from 'memi-board/runtime'
+import type { Attachment, CommentModel, CommentTranslationSet } from 'memi-board/runtime'
 import { useMemiBoardStorage } from 'memi-board/storage'
+import MemiBoardCommentAi from './CommentAi.vue'
 import MemiBoardCommentImageField from './CommentImageField.vue'
 
 const props = defineProps<{ boardId: string, postId: string, parent?: CommentModel | null }>()
@@ -37,6 +38,8 @@ const deniedMessage = computed(() => {
 })
 
 const body = ref('')
+const translations = ref<CommentTranslationSet>()
+const aiBusy = ref(false)
 const draftId = ref(newCommentId())
 const image = ref<Attachment | null>(null)
 const imageField = ref<InstanceType<typeof MemiBoardCommentImageField> | null>(null)
@@ -56,7 +59,7 @@ async function handleCancel() {
 }
 
 async function handleSubmit() {
-  if (submitting.value || imageBusy.value) return
+  if (submitting.value || imageBusy.value || aiBusy.value) return
   error.value = ''
   if (!body.value.trim()) return
   if (!user.value) {
@@ -83,6 +86,7 @@ async function handleSubmit() {
     const input = {
       id: draftId.value,
       body: body.value,
+      translations: translations.value,
       images: image.value ? [image.value] : [],
       authorUid: user.value.uid,
       authorName: user.value.displayName,
@@ -120,8 +124,11 @@ onUnmounted(() => {
       @paste="imageField?.handlePaste($event)"
       :placeholder="parent ? t('commentForm.replyTo', { name: parent.authorName || t('common.label.user') }) : t('commentForm.placeholder')"
       :rows="2"
+      :disabled="submitting || aiBusy || isWriteRestricted"
       :maxlength="COMMENT_BODY_MAX_LENGTH"
     />
+    <MemiBoardCommentAi v-model="body" v-model:translations="translations" :board-id="boardId"
+      :disabled="submitting || imageBusy || isWriteRestricted" @busy="aiBusy = $event" />
     <MemiBoardCommentImageField
       ref="imageField"
       v-model="image"
@@ -152,7 +159,7 @@ onUnmounted(() => {
         :label="t('common.action.cancel')"
         color="neutral"
         variant="ghost"
-        :disabled="imageBusy"
+        :disabled="imageBusy || submitting || aiBusy"
         @click="handleCancel"
       />
       <UButton
@@ -162,7 +169,7 @@ onUnmounted(() => {
         size="sm"
         :label="parent ? t('commentForm.submitReply') : t('commentForm.submit')"
         :loading="submitting"
-        :disabled="!body.trim() || isWriteRestricted || imageBusy"
+        :disabled="!body.trim() || isWriteRestricted || imageBusy || aiBusy"
       />
     </div>
   </form>

package/dist/runtime/components/CommentItem.vue

@@ -2,16 +2,18 @@
 import { imeSafeSubmitClick, imeSafeSubmitPointerDown } from 'memi-board/runtime'
 import { computed, inject, ref, watch } from 'vue'
 import { Timestamp } from 'firebase/firestore'
-import type { Attachment, CommentModel } from 'memi-board/runtime'
+import type { Attachment, CommentModel, CommentTranslationSet } from 'memi-board/runtime'
 import { useMemiBoardStorage } from 'memi-board/storage'
 import {
   COMMENT_BODY_MAX_LENGTH,
+  displayCommentBody,
   memiBoardCommentLikesKey,
   useMemiBoardAuth,
   useMemiBoardComments,
   useMemiBoardI18n,
   useMemiBoardModeration,
 } from 'memi-board/runtime'
+import MemiBoardCommentAi from './CommentAi.vue'
 import MemiBoardCommentImageField from './CommentImageField.vue'
 
 const props = defineProps<{
@@ -35,10 +37,14 @@ const { updateComment, setCommentBlinded } = useMemiBoardComments(
 )
 const { checkText } = useMemiBoardModeration()
 const { deleteAttachment } = useMemiBoardStorage()
-const { t, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
+const { t, locale, formatRelativeDate, formatTimestampDetails } = useMemiBoardI18n()
 const commentLikes = inject(memiBoardCommentLikesKey, null)
 
 const editing = ref(false)
+const translations = ref<CommentTranslationSet>()
+const aiBusy = ref(false)
+const localTranslations = ref<CommentTranslationSet>()
+const displayedBody = computed(() => displayCommentBody({ ...props.comment, ...localTranslations.value, body: localBody.value }, locale.value))
 const editBody = ref(props.comment.body)
 const localBody = ref(props.comment.body)
 const localImage = ref<Attachment | null>(props.comment.images?.[0] ?? null)
@@ -58,6 +64,7 @@ const likePending = computed(() => commentLikes?.isPending(props.comment.id) ??
 const imageChanged = computed(() => (editImage.value?.path ?? '') !== (localImage.value?.path ?? ''))
 
 watch(() => props.comment.body, (body) => {
+  localTranslations.value = undefined
   localBody.value = body
   if (!editing.value) editBody.value = body
 })
@@ -81,6 +88,7 @@ function startEdit() {
   editBody.value = localBody.value
   editImage.value = localImage.value
   editError.value = ''
+  translations.value = undefined
   editing.value = true
 }
 
@@ -95,10 +103,10 @@ async function cancelEdit() {
 }
 
 async function saveEdit() {
-  if (saving.value || imageBusy.value) return
+  if (saving.value || imageBusy.value || aiBusy.value) return
   const body = editBody.value.trim()
   if (!props.comment.id || !body) return
-  if (body === localBody.value && !imageChanged.value) {
+  if (body === localBody.value && !imageChanged.value && !translations.value) {
     editing.value = false
     return
   }
@@ -117,7 +125,8 @@ async function saveEdit() {
     }
     const previous = localImage.value
     const next = editImage.value
-    await updateComment(props.comment.id, body, next ? [next] : [])
+    await updateComment(props.comment.id, body, next ? [next] : [], translations.value)
+    localTranslations.value = translations.value
     localBody.value = body
     localImage.value = next
     localUpdatedAt.value = Timestamp.now()
@@ -203,8 +212,11 @@ async function toggleLike() {
           @paste="imageField?.handlePaste($event)"
           :rows="2"
           :maxlength="COMMENT_BODY_MAX_LENGTH"
+          :disabled="saving || aiBusy"
           autofocus
         />
+        <MemiBoardCommentAi v-model="editBody" v-model:translations="translations" :board-id="boardId"
+          :disabled="saving || imageBusy || isWriteRestricted" @busy="aiBusy = $event" />
         <MemiBoardCommentImageField
           ref="imageField"
           v-if="comment.id"
@@ -227,7 +239,7 @@ async function toggleLike() {
             size="xs"
             color="neutral"
             variant="ghost"
-            :disabled="saving || imageBusy"
+            :disabled="saving || imageBusy || aiBusy"
             @click="cancelEdit"
           />
           <UButton
@@ -237,7 +249,7 @@ async function toggleLike() {
             :label="t('common.action.save')"
             size="xs"
             :loading="saving"
-            :disabled="!editBody.trim() || imageBusy || (editBody.trim() === localBody && !imageChanged)"
+            :disabled="!editBody.trim() || imageBusy || aiBusy || (editBody.trim() === localBody && !imageChanged && !translations)"
           />
         </div>
       </form>
@@ -260,7 +272,7 @@ async function toggleLike() {
       <div v-else>
         <p class="whitespace-pre-wrap break-words text-sm">
           <span v-if="comment.parentId && comment.replyToName" class="mr-1 text-primary">@{{ comment.replyToName }}</span>
-          {{ localBody }}
+          {{ displayedBody }}
         </p>
         <a
           v-if="localImage"

package/dist/runtime/components/Editor.vue

@@ -759,7 +759,6 @@ async function translateAllLocales() {
   aiRunning.value = true
   try {
     const translations = await translatePost({
-      source: locale.value,
       targets: translationTargets.value,
       title: storedTitle,
       summary,
@@ -1061,7 +1060,6 @@ async function handleSubmit() {
     if (!props.postId && translationEnabled.value && getBoard(resolvedBoardId.value)?.autoTranslatePosts === true && !translations) {
       submitHint.value = t('editor.hint.translating', { count: translationTargets.value.length })
       translations = await translatePost({
-        source: locale.value,
         targets: translationTargets.value,
         title: storedTitle,
         summary: buildPostPreview(bodyContent, imageBoard ? [] : attachments.value).summary,

package/dist/runtime/components/MiniComments.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, resolveComponent } from 'vue'
 import type { BoardSection, CommentModel } from 'memi-board/runtime'
-import { miniCommentLink, useMemiBoardCommentFeed, useMemiBoardI18n } from 'memi-board/runtime'
+import { displayCommentBody, miniCommentLink, useMemiBoardCommentFeed, useMemiBoardI18n } from 'memi-board/runtime'
 
 const props = defineProps<{
   section: BoardSection
@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const NuxtLink = resolveComponent('NuxtLink')
-const { t, formatRelativeDate } = useMemiBoardI18n()
+const { t, locale, formatRelativeDate } = useMemiBoardI18n()
 const now = ref(Date.now())
 const sort = computed(() => props.section.sort === 'likes' ? 'likes' : 'latest')
 const { comments, commentsPending } = useMemiBoardCommentFeed(sort, {
@@ -56,7 +56,7 @@ function commentTo(comment: CommentModel) {
               v-if="comment.replyToName"
               class="mr-1 text-primary"
             >@{{ comment.replyToName }}</span>
-            {{ comment.body }}
+            {{ displayCommentBody(comment, locale) }}
           </p>
           <p class="flex flex-wrap items-center gap-x-1.5 text-[11px] text-muted">
             <span>{{ comment.authorName || t('common.label.anonymous') }}</span>

package/dist/runtime/components/UserCommentList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, resolveComponent } from 'vue'
-import { useMemiBoardI18n, useMemiBoardUserComments } from 'memi-board/runtime'
+import { displayCommentBody, useMemiBoardI18n, useMemiBoardUserComments } from 'memi-board/runtime'
 import type { CommentModel } from 'memi-board/runtime'
 
 const NuxtLink = resolveComponent('NuxtLink')
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{ select: [comment: CommentModel] }>()
 
-const { t, formatRelativeDate } = useMemiBoardI18n()
+const { t, locale, formatRelativeDate } = useMemiBoardI18n()
 
 const { comments, commentsPending, hasMore, loadingMore, loadError, loadMore } = useMemiBoardUserComments(
   () => props.uid,
@@ -83,7 +83,7 @@ function commentLink(comment: CommentModel): string | undefined {
             v-else
             class="text-sm text-highlighted line-clamp-3 whitespace-pre-wrap"
           >
-            {{ comment.body }}
+            {{ displayCommentBody(comment, locale) }}
           </p>
           <p class="mt-1 text-xs text-muted">
             {{ formatRelativeDate(comment.createdAt, now) }}

package/dist/storage.js

@@ -1,4 +1,4 @@
-import { W as e, i as t, m as n, n as r, s as i, w as a } from "./commentImages-CzXO42gE.js";
+import { W as e, i as t, m as n, n as r, s as i, w as a } from "./commentImages-D_JJnuoj.js";
 import { useFirebaseApp as o } from "vuefire";
 import { getAuth as s } from "firebase/auth";
 import { deleteObject as c, getDownloadURL as l, getStorage as u, ref as d, uploadBytes as f, uploadBytesResumable as p } from "firebase/storage";

package/dist/types.d.ts

@@ -115,6 +115,13 @@ export interface PostDetail extends PostModel {
  * 보드 경계를 넘는 작성자별 글 목록(예: /board-user/{uid}) 등에서 PostModel 을 그대로 쓰면 된다.
  */
 export type UserPostModel = PostModel;
+export interface CommentTranslationSet {
+    i18n: MemiBoardI18nMap;
+    i18nSource: {
+        locale?: MemiBoardLocale;
+        body: string;
+    };
+}
 export interface CommentModel {
     id?: string;
     /** 속한 글. flat 컬렉션이라 경로 대신 필드로 스코핑한다. */
@@ -127,6 +134,8 @@ export interface CommentModel {
      */
     listed?: boolean;
     body: string;
+    i18n?: MemiBoardI18nMap;
+    i18nSource?: CommentTranslationSet['i18nSource'];
     authorUid: string;
     authorName: string | null;
     authorPhoto: string | null;
@@ -237,7 +246,7 @@ export interface BoardModel {
      * 없거나 false 이면 번역하지 않는다.
      */
     autoTranslate?: boolean;
-    /** 새 글 작성 시 제목·요약·본문을 번역한다. 기본 false. */
+    /** 새 글과 댓글·답글 작성 시 번역한다. 기본 false. */
     autoTranslatePosts?: boolean;
     /**
      * 이름·설명과 글을 번역할 언어(MEMI_BOARD_LOCALES 코드).

package/dist/utils/localizedFields.d.ts

@@ -1,5 +1,5 @@
 import { MemiBoardLocale } from '../i18n/locales';
-import { MemiBoardI18nMap, MemiBoardI18nSource, PostContentI18nSource, PostDetail, PostModel } from '../types';
+import { CommentModel, MemiBoardI18nMap, MemiBoardI18nSource, PostContentI18nSource, PostDetail, PostModel } from '../types';
 /** 본문처럼 긴 문자열이 번역 당시와 같은지 비교할 때 쓴다. */
 export declare function hashText(value: string): string;
 /** Firestore에 넣은 i18n 맵만 남긴다. 지원하지 않는 키와 빈 문자열은 버린다. */
@@ -41,3 +41,5 @@ export declare function boardCopyIsTranslated(board: {
     i18nSource?: MemiBoardI18nSource;
     translationLocales?: readonly string[];
 }): boolean;
+/** 수정 전의 번역은 숨기고 원문을 보여 준다. */
+export declare function displayCommentBody(comment: Pick<CommentModel, 'body' | 'i18n' | 'i18nSource'>, locale?: string | null): string;