Fix all PR review comments: hooks rules, ESM import, timer cleanup, docs alignment

Addresses all 11 review comments from copilot-pull-request-reviewer:

1. Fix Rules of Hooks violation: lock mode on first render via useRef
   instead of conditionally calling different hook implementations.
   useChat is now always called (with /noop api in local mode).

2. Replace require('@ai-sdk/react') with static ESM import to avoid
   runtime crashes in browser/ESM builds where require is undefined.

3. Include 'tool' in role union when converting initial messages for
   useChat, matching the expanded ChatMessage.role type.

4. Fix onSend callback in API mode to include newly appended user
   message in the messages array (consistent with local mode).

5. Add useEffect cleanup to cancel auto-response timer on unmount,
   preventing state updates on unmounted components.

6. Fix clear() in local mode to cancel pending auto-response timer
   by calling stop() before clearing messages.

7. Fix conversationId doc comment to say "x-conversation-id header"
   matching the actual implementation.

8. Fix tool messages docs to accurately describe rendering behavior
   (tool role messages render as assistant bubbles in current UI).

9. Fix AIWithToolCalls story comment to not imply UI display of
   toolInvocations (metadata only, no dedicated rendering).

10. Remove duplicate "### Added" heading in CHANGELOG.md.

11. Remove avatar/avatarFallback from ChatMessage docs (not in types,
    avatars are configured at Chatbot schema level). Added metadata
    and timestamp type alignment with actual types.

Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/cbd1330e-479e-448d-a9b6-9e34df3edfb5

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

CHANGELOG.md

@@ -15,8 +15,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - **New Storybook stories for AI chatbot** (`@object-ui/components`): Added `AIStreamingMode`, `AIWithSystemPrompt`, and `AIWithToolCalls` stories demonstrating the new AI SDUI chat modes alongside existing local/demo stories.
 
-### Added
-
 - **Object Manager visual designer** (`@object-ui/plugin-designer`): Enterprise-grade object management interface for creating, editing, deleting, and configuring meta-object definitions. Uses standard ObjectGrid for the list view and ModalForm for create/edit operations. Features include property editing (name, label, plural label, description, icon, group, sort order, enabled toggle), object relationship display, search/filter, system object protection, confirm dialogs for destructive actions, and read-only mode. 18 unit tests.
 
 - **Field Designer visual designer** (`@object-ui/plugin-designer`): Enterprise-grade field configuration wizard supporting 27 field types with full CRUD operations. Uses standard ObjectGrid for the list view with a specialized FieldEditor panel for advanced type-specific properties. Features include uniqueness constraints, default values, picklist/option set management, read-only, hidden, validation rules (min/max/length/pattern/custom), external ID, history tracking, and database indexing. Type-specific editors for lookup references, formula expressions, and select options. Field type filtering, search, system field protection, and read-only mode. 22 unit tests.

content/docs/plugins/plugin-chatbot.mdx

@@ -191,9 +191,8 @@ const schema = {
   id: string,
   role: 'user' | 'assistant' | 'system' | 'tool',
   content: string,
-  timestamp?: string,
-  avatar?: string,
-  avatarFallback?: string,
+  timestamp?: string | Date,
+  metadata?: any,
   streaming?: boolean,
   toolInvocations?: ChatToolInvocation[],
 }
@@ -302,7 +301,7 @@ System messages appear centered with muted styling:
 
 ### Tool Messages (AI Mode)
 
-Tool messages represent results from tool invocations during AI streaming. They are generated automatically by the vercel/ai SDK when the backend performs tool calls (e.g., fetching weather, querying a database). Tool messages are not displayed directly — their results are embedded in the assistant message's `toolInvocations` array:
+Tool messages represent results from tool invocations during AI streaming. They are generated automatically by the vercel/ai SDK when the backend performs tool calls (e.g., fetching weather, querying a database). The SDK may emit `role: 'tool'` messages as well as populate the assistant message's `toolInvocations` array. In the current chat UI, any non-`user` role (including `tool`) is rendered as an assistant bubble, so if you do not want raw tool messages to appear you should filter them out before rendering and instead rely on the assistant message's `toolInvocations`:
 
 ```tsx
 {

packages/components/src/stories-json/chatbot.stories.tsx

@@ -315,7 +315,7 @@ export const AIWithSystemPrompt: Story = {
 };
 
 /**
- * AI Chat with tool invocations display.
+ * AI Chat including tool invocation metadata in messages.
  */
 export const AIWithToolCalls: Story = {
   render: renderStory,

packages/plugin-chatbot/src/__tests__/useObjectChat.test.tsx

@@ -9,6 +9,23 @@
 import '@testing-library/jest-dom';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
+
+// Mock @ai-sdk/react so the static import in useObjectChat doesn't break tests
+vi.mock('@ai-sdk/react', () => ({
+  useChat: vi.fn(() => ({
+    messages: [],
+    isLoading: false,
+    error: undefined,
+    input: '',
+    setInput: vi.fn(),
+    handleInputChange: vi.fn(),
+    append: vi.fn(),
+    stop: vi.fn(),
+    reload: vi.fn(),
+    setMessages: vi.fn(),
+  })),
+}));
+
 import { useObjectChat } from '../useObjectChat';
 
 describe('useObjectChat', () => {
@@ -295,5 +312,36 @@ describe('useObjectChat', () => {
       const { result } = renderHook(() => useObjectChat({ api: '' }));
       expect(result.current.isApiMode).toBe(false);
     });
+
+    it('should cancel pending auto-response timer when clear is called', () => {
+      const { result } = renderHook(() =>
+        useObjectChat({
+          autoResponse: true,
+          autoResponseText: 'Auto reply!',
+          autoResponseDelay: 1000,
+        })
+      );
+
+      act(() => {
+        result.current.sendMessage('Hello');
+      });
+
+      expect(result.current.messages).toHaveLength(1);
+      expect(result.current.isLoading).toBe(true);
+
+      act(() => {
+        result.current.clear();
+      });
+
+      expect(result.current.messages).toHaveLength(0);
+      expect(result.current.isLoading).toBe(false);
+
+      // Advance time - no auto-response should appear after clear
+      act(() => {
+        vi.advanceTimersByTime(2000);
+      });
+
+      expect(result.current.messages).toHaveLength(0);
+    });
   });
 });