Chris Nicholas

@chrisnicholas.dev

280 Followers 294 Following

Developer experience @liveblocks.io • Interactive articles on chrisnicholas.dev

JavaScript code snippet for a component that maps threads and conditionally displays a message for private threads.

Code snippets illustrate managing user access in a room, emphasizing the "reader" group's inability to view private comments.

Code snippet shows a React component for a private comment composer, emphasizing private visibility settings for user comments.

const newShape = useMutation(({ storage }) => {
const shapes = storage.get("shapes");

const shape = new LiveObject({
x: 54,
y: 35,
color: "red"
});

shapes.insert(shape);
}, []);

const shapes = useStorage((root) => root.shapes);

function Feed() {
const { messages, error, isLoading }
= useFeedMessages("my-feed-id");

// [{ data: { status: "Thinking…" }]
console.log(messages);

return (
<div>
{messages.map((message) => (
<div key={message.id}>{message.content}</div>
))}
</div>
);
}

await liveblocks.createFeedMessage({
roomId: "my-room-id",
feedId: "my-feed-id",

data: { status: "Thinking…" },
});

await liveblocks.setPresence("my-room-id", {
userId: "agent-otto",

// Custom presence data
data: {
status: "generating",
item: "html-box-1,
},

// The AI user's information
userInfo: {
name: "Otto",
color: "#22c55e",
},
});

import { useFeedMessages } from "@liveblocks/react/suspense";

function Feed() {
const { messages, error, isLoading } = useFeedMessages("my-feed-id");

// [{ data: { role: "user", content: "Hello world" }, ... }]
console.log(messages);

return (
<div>
{messages.map((message) => (
<div key={message.id}>{message.content}</div>
))}
</div>
);
}

$import { useHistory, useMutation } from "@liveblocks/react/suspense"; function AiChanges() { const { disable } = useHistory(); const generateInfo = useMutation(async ({ storage }) => { const title = await __generateTitle__(text); const description = await __generateDescription__(text); disable(() => { storage.set("title", title); storage.set("description", description); }); }); return <Button onClick={generateInfo}>✨ Generate info</Button>; }$

import { markdownToCommentBody } from "@liveblock…";

// Generate a markdown reply
const { text: markdown } = await generateText({
model: openai("gpt-5.5"),
prompt: `Reply to the comment thread: ${thread}`,
});

// Convert to a comment body
const commentBody = markdownToCommentBody(markdown);

// Reply to the thread
await liveblocks.createComment({
roomId,
threadId,
data: {
userId: "agent-123",
body: commentBody,
},
});

function Input() {
return (
<AiPresenceBox field="text-1">
<input />
</AiPresenceBox>
);
}

$function AiPresenceBox({ field }: { field: string }) { // Check if the AI user is online AND editing this field const aiIsEditing = useOthers(((others) => { const ai = others.find((o) => o.id === AI_USER_INFO.id); return ai && ai.presence.editingId === editingId; }), shallow); if (!aiIsEditing) return children; return ( <div className="ring-2 ring-indigo-500 rounded"> {children} </div> ); }$