improve chat docs (#1091)

Author: bcherry

.changeset/nice-dragons-double.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-js-doc": patch
+---
+
+improve chat docs

packages/react/src/hooks/useChat.ts

@@ -8,8 +8,35 @@ import { useConnectionState } from './useConnectionStatus';
 
 /**
  * The `useChat` hook provides chat functionality for a LiveKit room.
- * It returns a simple `send` function to send chat messages and an array of `chatMessages` to hold received messages.
- * It also returns a `update` function that allows you to implement message-edit functionality.
+ *
+ * @remarks
+ * Message history is not persisted and will be lost if the component is refreshed.
+ * You may want to persist message history in the browser, a cache or a database.
+ *
+ * @returns An object containing:
+ * - `chatMessages` - Array of received chat messages
+ * - `send` - Function to send a new message
+ * - `isSending` - Boolean indicating if a message is currently being sent
+ *
+ * @example
+ * ```tsx
+ * function ChatComponent() {
+ *   const { chatMessages, send, isSending } = useChat();
+ *
+ *   return (
+ *     <div>
+ *       {chatMessages.map((msg) => (
+ *         <div key={msg.timestamp}>
+ *           {msg.from?.identity}: {msg.message}
+ *         </div>
+ *       ))}
+ *       <button disabled={isSending} onClick={() => send("Hello!")}>
+ *         Send Message
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
  * @public
  */
 export function useChat(options?: ChatOptions) {

packages/react/src/prefabs/Chat.tsx

@@ -14,15 +14,29 @@ export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>, ChatOpt
 }
 
 /**
- * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
- * in the room. Only users who are in the room at the time of dispatch will receive the message.
+ * The Chat component provides ready-to-use chat functionality in a LiveKit room.
+ * Messages are distributed to all participants in the room in real-time.
+ *
+ * @remarks
+ * - Only users who are in the room at the time of dispatch will receive messages
+ * - Message history is not persisted between sessions
+ * - Requires `@livekit/components-styles` to be imported for styling
  *
  * @example
  * ```tsx
- * <LiveKitRoom>
- *   <Chat />
- * </LiveKitRoom>
+ * import '@livekit/components-styles';
+ *
+ * function Room() {
+ *   return (
+ *     <LiveKitRoom data-lk-theme="default">
+ *       <Chat />
+ *     </LiveKitRoom>
+ *   );
+ * }
  * ```
+ *
+ * For custom styling, refer to: https://docs.livekit.io/reference/components/react/concepts/style-components/
+ *
  * @public
  */
 export function Chat({