Lemma Comments

1"use client"
2 
3import * as React from "react"
4import {
5  MessageSquare,
6  RefreshCw,
7  Send,
8  User,
9} from "lucide-react"
10import { Button } from "@/components/lemma/ui/button"
11import { Skeleton } from "@/components/lemma/ui/skeleton"
12import { Textarea } from "@/components/lemma/ui/textarea"
13import { useReferencingRecords, useCreateRecord } from "lemma-sdk/react"
14import type { LemmaClient } from "lemma-sdk"
15import { cn } from "@/components/lemma/lib/utils"
16import { enumPillClasses, type EnumColorMap } from "./comments-enum-utils"
17import {
18  commentsRadiusClassName,
19  type LemmaCommentsAppearance,
20  type LemmaCommentsDensity,
21  type LemmaCommentsRadius,
22} from "./comments-style-utils"
23 
24export type { LemmaCommentsAppearance, LemmaCommentsDensity, LemmaCommentsRadius } from "./comments-style-utils"
25 
26export interface LemmaCommentsProps {
27  client: LemmaClient
28  podId?: string
29  tableName: string
30  foreignKey: string
31  recordId: string
32  enabled?: boolean
33 
34  bodyField?: string
35  authorField?: string
36  createdAtField?: string
37 
38  submitVia?: "direct" | "function"
39  submitFunctionName?: string
40 
41  enumColorMap?: EnumColorMap
42 
43  appearance?: LemmaCommentsAppearance
44  density?: LemmaCommentsDensity
45  radius?: LemmaCommentsRadius
46 
47  onCommentClick?: (comment: Record<string, unknown>) => void
48  title?: React.ReactNode
49  headerActions?: React.ReactNode
50  className?: string
51}
52 
53export function LemmaComments({
54  client,
55  podId,
56  tableName,
57  foreignKey,
58  recordId,
59  enabled = true,
60  bodyField = "body",
61  authorField = "author_user_id",
62  createdAtField = "created_at",
63  submitVia = "direct",
64  submitFunctionName,
65  enumColorMap,
66  appearance = "default",
67  density = "comfortable",
68  radius = "lg",
69  onCommentClick,
70  title,
71  headerActions,
72  className,
73}: LemmaCommentsProps) {
74  const [newBody, setNewBody] = React.useState("")
75 
76  const commentsState = useReferencingRecords({
77    client,
78    podId,
79    table: tableName,
80    foreignKey,
81    recordId,
82    sortBy: createdAtField,
83    order: "asc",
84    enabled,
85  })
86 
87  const createRecord = useCreateRecord({
88    client,
89    podId,
90    tableName,
91    enabled,
92    createVia: submitVia,
93    createFunctionName: submitFunctionName,
94    onSuccess: () => {
95      setNewBody("")
96      commentsState.refresh()
97    },
98  })
99 
100  const handleSubmit = async () => {
101    const trimmed = newBody.trim()
102    if (!trimmed || createRecord.isSubmitting) return
103    await createRecord.create({
104      [bodyField]: trimmed,
105      [foreignKey]: recordId,
106// … truncated