462 lines
20 KiB
TypeScript
462 lines
20 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
|||
|
|
import { useNavigate } from "react-router-dom";
|
|||
|
|
import { PostMetrics, postTypeLabel } from "../../components/studio/PostMetrics";
|
|||
|
|
import { ReplyComposer, type ReplySelection } from "../../components/studio/ReplyComposer";
|
|||
|
|
import { Badge, Button, Card, EmptyState, Textarea } from "../../components/ui";
|
|||
|
|
import { useData, useRepos } from "../../data/DataContext";
|
|||
|
|
import type { OwnPost, OwnPostReply, Persona, ThreadsAccount } from "../../domain/types";
|
|||
|
|
import { useI18n } from "../../i18n/I18nContext";
|
|||
|
|
import type { AttachedImage } from "../../lib/attachImage";
|
|||
|
|
import { isPersonaReady } from "../../lib/personaPrompt";
|
|||
|
|
import { formatLocalDateTime } from "../../lib/time";
|
|||
|
|
|
|||
|
|
type Props = {
|
|||
|
|
/** 頂部預設帳號（貼文列表視角） */
|
|||
|
|
accountId: string;
|
|||
|
|
/** 頂部預設人設 */
|
|||
|
|
personaId: string;
|
|||
|
|
accounts: ThreadsAccount[];
|
|||
|
|
personas: Persona[];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type ReplyFilter = "pending" | "replied" | "all";
|
|||
|
|
|
|||
|
|
function defaultSelection(accountId: string, personaId: string): ReplySelection {
|
|||
|
|
return { accountId, personaId };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 第一層來訊（別人留在貼文下，不是子留言） */
|
|||
|
|
function isTopLevelIncoming(r: OwnPostReply, myUsernames: Set<string>): boolean {
|
|||
|
|
if (r.parent_reply_id) return false;
|
|||
|
|
if (r.is_mine) return false;
|
|||
|
|
return !myUsernames.has(r.username);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isPendingReply(r: OwnPostReply): boolean {
|
|||
|
|
return (r.reply_status || "pending") === "pending";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function childrenOf(all: OwnPostReply[], parentId: string): OwnPostReply[] {
|
|||
|
|
return all
|
|||
|
|
.filter((r) => r.parent_reply_id === parentId)
|
|||
|
|
.slice()
|
|||
|
|
.sort((a, b) => a.created_at - b.created_at);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function OwnPostsPanel({ accountId, personaId, accounts, personas }: Props) {
|
|||
|
|
const repos = useRepos();
|
|||
|
|
const { refresh, tick } = useData();
|
|||
|
|
const { t } = useI18n();
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const [posts, setPosts] = useState<OwnPost[]>([]);
|
|||
|
|
const [syncedAt, setSyncedAt] = useState<number | null>(null);
|
|||
|
|
const [expanded, setExpanded] = useState("");
|
|||
|
|
/** 每筆回覆草稿 key = postId 或 postId:replyId */
|
|||
|
|
const [draftByKey, setDraftByKey] = useState<Record<string, string>>({});
|
|||
|
|
/** 每筆回覆附圖 */
|
|||
|
|
const [imagesByKey, setImagesByKey] = useState<Record<string, AttachedImage[]>>({});
|
|||
|
|
/** 每筆回覆的帳號／人設（預設吃頂部） */
|
|||
|
|
const [selByKey, setSelByKey] = useState<Record<string, ReplySelection>>({});
|
|||
|
|
/** 哪些貼文已手動按過「分析結構」（才顯示 AI 分析結果） */
|
|||
|
|
const [analyzedIds, setAnalyzedIds] = useState<Record<string, boolean>>({});
|
|||
|
|
/** 哪些 key 已打開回覆編輯區 */
|
|||
|
|
const [composeOpen, setComposeOpen] = useState<Record<string, boolean>>({});
|
|||
|
|
/** 留言篩選：預設未回覆 */
|
|||
|
|
const [replyFilter, setReplyFilter] = useState<ReplyFilter>("pending");
|
|||
|
|
const [busy, setBusy] = useState("");
|
|||
|
|
const [message, setMessage] = useState("");
|
|||
|
|
|
|||
|
|
const myUsernames = new Set(accounts.map((a) => a.username));
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void (async () => {
|
|||
|
|
if (!accountId) {
|
|||
|
|
setPosts([]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setPosts(await repos.ownPosts.list(accountId));
|
|||
|
|
setSyncedAt(await repos.ownPosts.lastSyncedAt());
|
|||
|
|
})();
|
|||
|
|
}, [accountId, repos.ownPosts, tick]);
|
|||
|
|
|
|||
|
|
function getSel(key: string): ReplySelection {
|
|||
|
|
return selByKey[key] || defaultSelection(accountId, personaId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setSel(key: string, next: ReplySelection) {
|
|||
|
|
setSelByKey((m) => ({ ...m, [key]: next }));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openCompose(key: string) {
|
|||
|
|
setComposeOpen((m) => ({ ...m, [key]: true }));
|
|||
|
|
setSelByKey((m) => ({
|
|||
|
|
...m,
|
|||
|
|
[key]: m[key] || defaultSelection(accountId, personaId),
|
|||
|
|
}));
|
|||
|
|
if (!draftByKey[key]) {
|
|||
|
|
setDraftByKey((m) => ({ ...m, [key]: m[key] || "" }));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sync() {
|
|||
|
|
if (!accountId) return;
|
|||
|
|
setBusy("sync");
|
|||
|
|
setMessage("");
|
|||
|
|
try {
|
|||
|
|
const list = await repos.ownPosts.sync(accountId);
|
|||
|
|
setPosts(list);
|
|||
|
|
setSyncedAt(await repos.ownPosts.lastSyncedAt());
|
|||
|
|
setMessage(t("posts.syncDone"));
|
|||
|
|
refresh();
|
|||
|
|
} finally {
|
|||
|
|
setBusy("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function genReply(key: string, post: OwnPost, replyId?: string) {
|
|||
|
|
const sel = getSel(key);
|
|||
|
|
const persona = personas.find((p) => p.id === sel.personaId);
|
|||
|
|
if (!isPersonaReady(persona)) {
|
|||
|
|
setMessage(t("posts.needPersona"));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBusy(key);
|
|||
|
|
setMessage("");
|
|||
|
|
try {
|
|||
|
|
const text = await repos.ownPosts.generateReply({
|
|||
|
|
postId: post.id,
|
|||
|
|
replyId,
|
|||
|
|
personaId: sel.personaId,
|
|||
|
|
});
|
|||
|
|
setDraftByKey((m) => ({ ...m, [key]: text }));
|
|||
|
|
setComposeOpen((m) => ({ ...m, [key]: true }));
|
|||
|
|
} catch (e) {
|
|||
|
|
setMessage(e instanceof Error ? e.message : t("posts.genFail"));
|
|||
|
|
} finally {
|
|||
|
|
setBusy("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function send(key: string, post: OwnPost, replyId?: string) {
|
|||
|
|
const text = draftByKey[key];
|
|||
|
|
const sel = getSel(key);
|
|||
|
|
const imgs = imagesByKey[key] || [];
|
|||
|
|
if (!text?.trim()) {
|
|||
|
|
setMessage(t("posts.needText"));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBusy(`send:${key}`);
|
|||
|
|
try {
|
|||
|
|
const next = await repos.ownPosts.sendReply({
|
|||
|
|
postId: post.id,
|
|||
|
|
replyId,
|
|||
|
|
text,
|
|||
|
|
accountId: sel.accountId,
|
|||
|
|
imageUrls: imgs.map((i) => i.url),
|
|||
|
|
});
|
|||
|
|
setPosts((list) => list.map((p) => (p.id === next.id ? next : p)));
|
|||
|
|
const n = imgs.length;
|
|||
|
|
const user =
|
|||
|
|
accounts.find((a) => a.id === sel.accountId)?.username || t("posts.accountFallback");
|
|||
|
|
setMessage(t("posts.sent", { user }) + (n ? t("posts.sentImages", { n }) : ""));
|
|||
|
|
setComposeOpen((m) => ({ ...m, [key]: false }));
|
|||
|
|
setDraftByKey((m) => ({ ...m, [key]: "" }));
|
|||
|
|
setImagesByKey((m) => ({ ...m, [key]: [] }));
|
|||
|
|
// 送出後展開留言串，方便看到剛掛上的子留言
|
|||
|
|
setExpanded(post.id);
|
|||
|
|
refresh();
|
|||
|
|
} catch (e) {
|
|||
|
|
setMessage(e instanceof Error ? e.message : t("posts.sendFail"));
|
|||
|
|
} finally {
|
|||
|
|
setBusy("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function analyze(post: OwnPost) {
|
|||
|
|
setBusy(`an:${post.id}`);
|
|||
|
|
setMessage("");
|
|||
|
|
try {
|
|||
|
|
const next = await repos.ownPosts.analyzePost(post.id);
|
|||
|
|
setPosts((list) => list.map((p) => (p.id === next.id ? next : p)));
|
|||
|
|
setAnalyzedIds((m) => ({ ...m, [post.id]: true }));
|
|||
|
|
setExpanded(post.id);
|
|||
|
|
setMessage(t("posts.analyzeDone"));
|
|||
|
|
refresh();
|
|||
|
|
} catch (e) {
|
|||
|
|
setMessage(e instanceof Error ? e.message : t("posts.analyzeFail"));
|
|||
|
|
} finally {
|
|||
|
|
setBusy("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openComposeMimic(post: OwnPost) {
|
|||
|
|
navigate(`/app/studio?tab=compose&mimic=${encodeURIComponent(post.text)}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="hb-stack">
|
|||
|
|
<div className="hb-toolbar">
|
|||
|
|
<Button type="button" variant="ghost" onClick={() => void sync()} disabled={busy === "sync" || !accountId}>
|
|||
|
|
{busy === "sync" ? t("posts.syncing") : t("posts.sync")}
|
|||
|
|
</Button>
|
|||
|
|
<p className="text-muted hb-toolbar__hint">
|
|||
|
|
{syncedAt ? t("posts.syncedAt", { time: formatLocalDateTime(syncedAt) }) : t("posts.notSynced")}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
{message ? (
|
|||
|
|
<p className="hb-banner-ok" role="status">
|
|||
|
|
{message}
|
|||
|
|
</p>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{posts.length === 0 ? (
|
|||
|
|
<EmptyState title={t("posts.empty")} />
|
|||
|
|
) : (
|
|||
|
|
posts.map((post) => {
|
|||
|
|
const open = expanded === post.id;
|
|||
|
|
const rootKey = post.id;
|
|||
|
|
const showAnalysis = Boolean(analyzedIds[post.id]);
|
|||
|
|
return (
|
|||
|
|
<Card key={post.id}>
|
|||
|
|
<div className="hb-post-head">
|
|||
|
|
{post.thumbnail_url || post.media_url ? (
|
|||
|
|
<img
|
|||
|
|
className="hb-post-thumb"
|
|||
|
|
src={post.thumbnail_url || post.media_url || ""}
|
|||
|
|
alt=""
|
|||
|
|
loading="lazy"
|
|||
|
|
/>
|
|||
|
|
) : null}
|
|||
|
|
<div className="hb-post-head__body">
|
|||
|
|
<div className="hb-inline-badges" style={{ marginBottom: "0.4rem" }}>
|
|||
|
|
{post.topic_tag ? <Badge tone="brand">{post.topic_tag}</Badge> : null}
|
|||
|
|
<Badge tone="neutral">{postTypeLabel(post, t)}</Badge>
|
|||
|
|
{post.is_quote_post ? <Badge tone="brand">quote</Badge> : null}
|
|||
|
|
{post.insights_status && post.insights_status !== "ok" ? (
|
|||
|
|
<Badge tone="warning">{post.insights_status}</Badge>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
<p style={{ margin: "0 0 0.5rem" }}>{post.text}</p>
|
|||
|
|
<PostMetrics post={post} variant="compact" />
|
|||
|
|
<p className="text-muted hb-compact-row__meta">
|
|||
|
|
{formatLocalDateTime(post.published_at)}
|
|||
|
|
{post.shortcode ? ` · ${post.shortcode}` : ""}
|
|||
|
|
{post.permalink ? (
|
|||
|
|
<>
|
|||
|
|
{" · "}
|
|||
|
|
<a href={post.permalink} target="_blank" rel="noreferrer">
|
|||
|
|
{t("posts.openThreads")}
|
|||
|
|
</a>
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{open ? <PostMetrics post={post} variant="detail" /> : null}
|
|||
|
|
|
|||
|
|
{/* 成效數字本來就有；AI 結構分析僅手動後顯示 */}
|
|||
|
|
{showAnalysis && post.insight ? (
|
|||
|
|
<p className="text-muted" style={{ fontSize: "0.875rem" }}>
|
|||
|
|
{t("posts.insight", { text: post.insight })}
|
|||
|
|
</p>
|
|||
|
|
) : null}
|
|||
|
|
{showAnalysis && post.formula_summary ? (
|
|||
|
|
<p className="text-muted" style={{ fontSize: "0.8rem" }}>
|
|||
|
|
{t("posts.review", { text: post.formula_summary })}
|
|||
|
|
</p>
|
|||
|
|
) : null}
|
|||
|
|
{showAnalysis && post.formula_detail ? (
|
|||
|
|
<Textarea label={t("posts.formulaResult")} value={post.formula_detail} readOnly rows={6} />
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div className="hb-wizard-actions">
|
|||
|
|
<Button type="button" variant="ghost" onClick={() => setExpanded(open ? "" : post.id)}>
|
|||
|
|
{(() => {
|
|||
|
|
const incoming = post.replies.filter((r) => isTopLevelIncoming(r, myUsernames));
|
|||
|
|
const pendingN = incoming.filter(isPendingReply).length;
|
|||
|
|
return open
|
|||
|
|
? t("posts.collapseReplies")
|
|||
|
|
: t("posts.repliesBtn", { total: incoming.length, pending: pendingN });
|
|||
|
|
})()}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
variant="ghost"
|
|||
|
|
onClick={() => openCompose(rootKey)}
|
|||
|
|
>
|
|||
|
|
{t("posts.replyRoot")}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
variant="ghost"
|
|||
|
|
disabled={busy === `an:${post.id}`}
|
|||
|
|
onClick={() => void analyze(post)}
|
|||
|
|
>
|
|||
|
|
{busy === `an:${post.id}`
|
|||
|
|
? t("posts.analyzing")
|
|||
|
|
: showAnalysis
|
|||
|
|
? t("posts.reanalyze")
|
|||
|
|
: t("posts.analyze")}
|
|||
|
|
</Button>
|
|||
|
|
<Button type="button" variant="ghost" onClick={() => openComposeMimic(post)}>
|
|||
|
|
{t("posts.mimicThis")}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
{composeOpen[rootKey] ? (
|
|||
|
|
<div style={{ marginTop: "0.65rem" }}>
|
|||
|
|
<ReplyComposer
|
|||
|
|
accounts={accounts}
|
|||
|
|
personas={personas}
|
|||
|
|
selection={getSel(rootKey)}
|
|||
|
|
onSelectionChange={(s) => setSel(rootKey, s)}
|
|||
|
|
text={draftByKey[rootKey] || ""}
|
|||
|
|
onTextChange={(txt) => setDraftByKey((m) => ({ ...m, [rootKey]: txt }))}
|
|||
|
|
images={imagesByKey[rootKey] || []}
|
|||
|
|
onImagesChange={(imgs) => setImagesByKey((m) => ({ ...m, [rootKey]: imgs }))}
|
|||
|
|
onGenerate={() => void genReply(rootKey, post)}
|
|||
|
|
onSend={() => void send(rootKey, post)}
|
|||
|
|
generating={busy === rootKey}
|
|||
|
|
sending={busy === `send:${rootKey}`}
|
|||
|
|
label={t("posts.rootDraft")}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{open ? (
|
|||
|
|
<div className="hb-stack" style={{ marginTop: "0.75rem" }}>
|
|||
|
|
{(() => {
|
|||
|
|
const tops = post.replies.filter((r) => isTopLevelIncoming(r, myUsernames));
|
|||
|
|
const pendingN = tops.filter(isPendingReply).length;
|
|||
|
|
const repliedN = tops.filter((r) => !isPendingReply(r)).length;
|
|||
|
|
const filtered = tops.filter((r) => {
|
|||
|
|
if (replyFilter === "pending") return isPendingReply(r);
|
|||
|
|
if (replyFilter === "replied") return !isPendingReply(r);
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className="hb-tabs hb-tabs--sm" role="tablist">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={`hb-tab ${replyFilter === "pending" ? "is-active" : ""}`}
|
|||
|
|
onClick={() => setReplyFilter("pending")}
|
|||
|
|
>
|
|||
|
|
{t("posts.filter.pending", { n: pendingN })}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={`hb-tab ${replyFilter === "replied" ? "is-active" : ""}`}
|
|||
|
|
onClick={() => setReplyFilter("replied")}
|
|||
|
|
>
|
|||
|
|
{t("posts.filter.replied", { n: repliedN })}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className={`hb-tab ${replyFilter === "all" ? "is-active" : ""}`}
|
|||
|
|
onClick={() => setReplyFilter("all")}
|
|||
|
|
>
|
|||
|
|
{t("posts.filter.all", { n: tops.length })}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{filtered.length === 0 ? (
|
|||
|
|
<p className="text-muted">
|
|||
|
|
{replyFilter === "pending"
|
|||
|
|
? t("posts.noPending")
|
|||
|
|
: replyFilter === "replied"
|
|||
|
|
? t("posts.noReplied")
|
|||
|
|
: t("posts.noReplies")}
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
filtered.map((r) => {
|
|||
|
|
const key = `${post.id}:${r.id}`;
|
|||
|
|
const pending = isPendingReply(r);
|
|||
|
|
const kids = childrenOf(post.replies, r.id);
|
|||
|
|
return (
|
|||
|
|
<div key={r.id} className="hb-script-row">
|
|||
|
|
<div className="hb-inline-badges" style={{ marginBottom: "0.35rem" }}>
|
|||
|
|
<Badge tone={pending ? "warning" : "success"}>
|
|||
|
|
{pending ? t("posts.status.pending") : t("posts.status.replied")}
|
|||
|
|
</Badge>
|
|||
|
|
<strong>@{r.username}</strong>
|
|||
|
|
{typeof r.like_count === "number" ? (
|
|||
|
|
<span className="text-muted" style={{ fontSize: "0.8rem" }}>
|
|||
|
|
{t("posts.likesN", { n: r.like_count })}
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
{kids.length > 0 ? (
|
|||
|
|
<span className="text-muted" style={{ fontSize: "0.8rem" }}>
|
|||
|
|
{t("posts.childCount", { n: kids.length })}
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
<p style={{ margin: "0.35rem 0" }}>{r.text}</p>
|
|||
|
|
|
|||
|
|
{/* 子留言：永遠顯示，不會因篩選或 is_mine 消失 */}
|
|||
|
|
{kids.length > 0 ? (
|
|||
|
|
<div className="hb-reply-thread">
|
|||
|
|
{kids.map((c) => {
|
|||
|
|
const mine = c.is_mine || myUsernames.has(c.username);
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={c.id}
|
|||
|
|
className={`hb-reply-child${mine ? " is-mine" : ""}`}
|
|||
|
|
>
|
|||
|
|
<div className="hb-inline-badges">
|
|||
|
|
{mine ? <Badge tone="brand">{t("posts.mine")}</Badge> : null}
|
|||
|
|
<strong>@{c.username}</strong>
|
|||
|
|
<span className="text-muted" style={{ fontSize: "0.75rem" }}>
|
|||
|
|
{formatLocalDateTime(c.created_at)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p style={{ margin: "0.25rem 0 0" }}>{c.text}</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{/* 未回／已回都可再回：串成子留言 */}
|
|||
|
|
{!composeOpen[key] ? (
|
|||
|
|
<div className="hb-wizard-actions" style={{ marginTop: "0.35rem" }}>
|
|||
|
|
<Button type="button" variant="ghost" onClick={() => openCompose(key)}>
|
|||
|
|
{pending ? t("posts.replyThis") : t("posts.replyAgain")}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<ReplyComposer
|
|||
|
|
accounts={accounts}
|
|||
|
|
personas={personas}
|
|||
|
|
selection={getSel(key)}
|
|||
|
|
onSelectionChange={(s) => setSel(key, s)}
|
|||
|
|
text={draftByKey[key] || ""}
|
|||
|
|
onTextChange={(txt) => setDraftByKey((m) => ({ ...m, [key]: txt }))}
|
|||
|
|
images={imagesByKey[key] || []}
|
|||
|
|
onImagesChange={(imgs) => setImagesByKey((m) => ({ ...m, [key]: imgs }))}
|
|||
|
|
onGenerate={() => void genReply(key, post, r.id)}
|
|||
|
|
onSend={() => void send(key, post, r.id)}
|
|||
|
|
generating={busy === key}
|
|||
|
|
sending={busy === `send:${key}`}
|
|||
|
|
label={
|
|||
|
|
pending
|
|||
|
|
? t("posts.replyTo", { user: r.username })
|
|||
|
|
: t("posts.replyAgainTo", { user: r.username })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
})()}
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|