impact-ui-mcp-server 1.0.2 → 1.0.4

package/src/tools/tableChatScaffold.js

@@ -0,0 +1,287 @@
+/**
+ * TableChat scaffold tool – returns file contents and instructions for adding TableChat to a project.
+ * Templates: chat.service, useTopicWebSocket, chatCellRenderers, env, axios.
+ */
+
+import { readFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const TEMPLATES_DIR = join(__dirname, "..", "..", "templates", "table-chat");
+
+const DEFAULT_PATHS = {
+  hooks: "src/customHooks",
+  services: "src/utils/services",
+  helpers: "src/utils/helpers/tableHelpers",
+  axios: "src/utils/axios",
+  constants: "src/constants",
+};
+
+/**
+ * Read a template file or return null if missing.
+ */
+function readTemplate(name) {
+  const path = join(TEMPLATES_DIR, name);
+  if (!existsSync(path)) return null;
+  return readFileSync(path, "utf-8");
+}
+
+/**
+ * Replace placeholders in content with args.
+ */
+function applyReplacements(content, args) {
+  const paths = { ...DEFAULT_PATHS, ...args.paths };
+  let out = content;
+
+  // Table config placeholders
+  out = out.replace(/\{\{OBJECT_TYPE\}\}/g, args.objectType || "promo");
+  out = out.replace(/\{\{UNIQUE_ROW_ID\}\}/g, args.uniqueRowId || "promo_id");
+  out = out.replace(/\{\{APP_CODE\}\}/g, args.appCode || "promosmart");
+  out = out.replace(/\{\{CHANNEL_NAME\}\}/g, args.channelName || "promo_name");
+  out = out.replace(/\{\{TABLE_NAME\}\}/g, args.tableName || "WORKBENCH_TABLE");
+
+  // Import path placeholders (use string for JS import)
+  const axiosImport = paths.axios ? `"${paths.axios}"` : '"../../utils/axios"';
+  out = out.replace(/\{\{IMPORT_AXIOS\}\}/g, axiosImport);
+  // Relative path from services folder to axios (e.g. chat.service.js in utils/services → ../axios)
+  const axiosFromServices = paths.axiosFromServices || "../axios";
+  out = out.replace(/\{\{IMPORT_AXIOS_FROM_SERVICES\}\}/g, axiosFromServices);
+
+  const stylesImport =
+    args.includeStyles !== false
+      ? 'import "./chatCellRenderers.scss";'
+      : "// import \"./chatCellRenderers.scss\"; if you add the scss file";
+  out = out.replace(/\{\{STYLES_IMPORT\}\}/g, stylesImport);
+
+  // useTableChat / useChat path placeholders (relative from src/customHooks)
+  const fromHooks = {
+    useChat: '"./useChat"',
+    useUrlChatFilter: '"./useUrlChatFilter"',
+    useTopicWebSocket: '"./useTopicWebSocket"',
+    useTableVisibleRows: '"./useTableVisibleRows"',
+    useWebSocket: '"./useWebSocket"',
+    constants: '"../constants"',
+    chatService: '"../../utils/services/chat.service"',
+    chatIcon: '"../../assets/imageAssets/chatMsgIcon.svg"',
+    chatCellRenderers: '"../../utils/helpers/tableHelpers/chatCellRenderers"',
+    toast: '"../../store/features/global/global"',
+    utilityHelpers: '"../../utils/helpers/utility_helpers"',
+  };
+  out = out.replace(/\{\{IMPORT_USE_CHAT\}\}/g, fromHooks.useChat);
+  out = out.replace(/\{\{IMPORT_USE_URL_CHAT_FILTER\}\}/g, fromHooks.useUrlChatFilter);
+  out = out.replace(/\{\{IMPORT_USE_TOPIC_WEBSOCKET\}\}/g, fromHooks.useTopicWebSocket);
+  out = out.replace(/\{\{IMPORT_USE_TABLE_VISIBLE_ROWS\}\}/g, fromHooks.useTableVisibleRows);
+  out = out.replace(/\{\{IMPORT_USE_WEBSOCKET\}\}/g, fromHooks.useWebSocket);
+  out = out.replace(/\{\{IMPORT_CONSTANTS\}\}/g, fromHooks.constants);
+  out = out.replace(/\{\{IMPORT_CHAT_SERVICE\}\}/g, fromHooks.chatService);
+  out = out.replace(/\{\{IMPORT_CHAT_ICON\}\}/g, fromHooks.chatIcon);
+  out = out.replace(/\{\{IMPORT_TABLE_CELL_RENDERERS\}\}/g, fromHooks.chatCellRenderers);
+  out = out.replace(/\{\{IMPORT_TOAST\}\}/g, fromHooks.toast);
+  out = out.replace(/\{\{IMPORT_UTILITY_HELPERS\}\}/g, fromHooks.utilityHelpers);
+  out = out.replace(/\{\{IMPORT_STORE_GLOBAL\}\}/g, fromHooks.toast);
+
+  const useSearchParamsImport = args.reactRouterPackage
+    ? `"${args.reactRouterPackage}"`
+    : '"react-router-dom-v5-compat"';
+  out = out.replace(/\{\{IMPORT_USE_SEARCH_PARAMS\}\}/g, useSearchParamsImport);
+
+  const lodashImport = args.lodashPackage ? `"${args.lodashPackage}"` : '"lodash"';
+  out = out.replace(/\{\{IMPORT_LODASH\}\}/g, lodashImport);
+
+  const chatServiceFromApp =
+    args.chatServiceFromApp || '"./utils/services/chat.service"';
+  out = out.replace(/\{\{IMPORT_CHAT_SERVICE_FROM_APP\}\}/g, chatServiceFromApp);
+
+  const tableChatConfigConstant =
+    "TABLE_CHAT_CONFIG_FOR_" + (args.tableName || "WORKBENCH_TABLE");
+  out = out.replace(/\{\{TABLE_CHAT_CONFIG_CONSTANT\}\}/g, tableChatConfigConstant);
+
+  const websocketBaseUrlDefault =
+    args.websocketBaseUrlDefault ||
+    "process.env.REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL";
+  out = out.replace(
+    /\{\{WEBSOCKET_BASE_URL_DEFAULT\}\}/g,
+    websocketBaseUrlDefault
+  );
+
+  return out;
+}
+
+/**
+ * Build the scaffold payload and return markdown content for the AI.
+ */
+export function getTableChatScaffold(args) {
+  const mode = args.mode || "first_time";
+  const objectType = args.objectType || "promo";
+  const uniqueRowId = args.uniqueRowId || "promo_id";
+  const paths = { ...DEFAULT_PATHS, ...args.paths };
+
+  const chatServiceTemplate = readTemplate("chat.service.js.template");
+  const useChatTemplate = readTemplate("useChat.js.template");
+  const useTableChatTemplate = readTemplate("useTableChat.js.template");
+  const useUrlChatFilterTemplate = readTemplate("useUrlChatFilter.js.template");
+  const useTableVisibleRowsTemplate = readTemplate("useTableVisibleRows.js.template");
+  const useTopicWebSocketTemplate = readTemplate("useTopicWebSocket.js.template");
+  const useWebSocketTemplate = readTemplate("useWebSocket.js.template");
+  const chatCellRenderersTemplate = readTemplate("chatCellRenderers.js.template");
+  const chatCellRenderersScssTemplate = readTemplate(
+    "chatCellRenderers.scss.template"
+  );
+  const envSnippet = readTemplate("env-snippet.txt");
+  const axiosSnippet = readTemplate("axios-snippet.txt");
+  const fetchUserIdAppInitSnippet = readTemplate(
+    "fetchUserIdAppInit.snippet.template"
+  );
+
+  const replaceArgs = {
+    mode,
+    objectType,
+    uniqueRowId,
+    tableName: args.tableName || "WORKBENCH_TABLE",
+    appCode: args.appCode || "promosmart",
+    channelName: args.channelName || "promo_name",
+    paths,
+    includeStyles: true,
+    reactRouterPackage: args.reactRouterPackage,
+    lodashPackage: args.lodashPackage,
+    chatServiceFromApp: args.chatServiceFromApp,
+    websocketBaseUrlDefault: args.websocketBaseUrlDefault,
+  };
+
+  let md = "# TableChat scaffold\n\n";
+
+  md += "## Instructions\n\n";
+  md +=
+    "1. **Env (required):** Add the env variables below to your `.env` file **before** TableChat will work. The URLs vary per project—replace the example values with your environment's base URL, WebSocket URL, and frontend URL.\n";
+  md +=
+    "2. Add the axios snippet to your existing axios file so `TABLE_CHAT_API` and `REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL` are available.\n";
+  md += `3. Create the following files in your project. Paths assume \`${paths.hooks}\`, \`${paths.services}\`, \`${paths.helpers}\`; adjust if your structure differs.\n`;
+  md +=
+    "4. This scaffold provides **chat.service.js**, **useChat.js**, **useTableChat.js**, **useUrlChatFilter.js**, **useTableVisibleRows.js**, **useTopicWebSocket**, **useWebSocket.js**, and **chatCellRenderers**. You still need: **tableChatConstants.js** (with TABLE_CHAT_CONFIG_FOR_* for your table).\n";
+  md +=
+    "5. In your TableWrapper (or table container), use `useTableChat` with `chatConfig={{ objectType, uniqueRowId }}` and spread `getChatProps()` and apply `getChatColumnModifier(columnDefs)` to your column definitions.\n";
+  md +=
+    "6. **Run fetchUserId once in App**: Add the snippet below to your **App.js or App.tsx** so `userId` is fetched once on app load and stored in localStorage (used by useChat). This avoids calling the API again and again.\n\n";
+
+  if (envSnippet) {
+    md +=
+      "## Env (required – add to .env)\n\nTableChat will not work until these variables are set. Values vary per project; use your environment's URLs.\n\n```env\n";
+    md += envSnippet.trim();
+    md += "\n```\n\n";
+  }
+
+  if (axiosSnippet) {
+    md += "## Axios snippet (add to your axios file)\n\n```js\n";
+    md += axiosSnippet.trim();
+    md += "\n```\n\n";
+  }
+
+  if (fetchUserIdAppInitSnippet) {
+    const snippetContent = applyReplacements(
+      fetchUserIdAppInitSnippet,
+      replaceArgs
+    );
+    md +=
+      "## Add to App.js / App.tsx (run once on load)\n\n";
+    md +=
+      "Add the following so **userId** is fetched once and stored in localStorage (useChat reads it). Import at the top, then call `fetchUserIdInLocalStorage()` once in a `useEffect` with empty deps.\n\n";
+    md += "```js\n";
+    md += snippetContent.trim();
+    md += "\n```\n\n";
+  }
+
+  if (chatServiceTemplate) {
+    const content = applyReplacements(chatServiceTemplate, replaceArgs);
+    const filePath = `${paths.services}/chat.service.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useChatTemplate) {
+    const content = applyReplacements(useChatTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useChat.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useTableChatTemplate) {
+    const content = applyReplacements(useTableChatTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useTableChat.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useUrlChatFilterTemplate) {
+    const content = applyReplacements(useUrlChatFilterTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useUrlChatFilter.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useTableVisibleRowsTemplate) {
+    const content = applyReplacements(useTableVisibleRowsTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useTableVisibleRows.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useTopicWebSocketTemplate) {
+    const content = applyReplacements(useTopicWebSocketTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useTopicWebSocket.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (useWebSocketTemplate) {
+    const content = applyReplacements(useWebSocketTemplate, replaceArgs);
+    const filePath = `${paths.hooks}/useWebSocket.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (chatCellRenderersTemplate) {
+    const content = applyReplacements(chatCellRenderersTemplate, replaceArgs);
+    const filePath = `${paths.helpers}/chatCellRenderers.js`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```js\n";
+    md += content;
+    md += "\n```\n\n";
+  }
+
+  if (chatCellRenderersScssTemplate) {
+    const filePath = `${paths.helpers}/chatCellRenderers.scss`;
+    md += `## File: ${filePath}\n\n`;
+    md += "```scss\n";
+    md += chatCellRenderersScssTemplate.trim();
+    md += "\n```\n\n";
+  }
+
+  md += "## Integration reminder\n\n";
+  md +=
+    "In your TableWrapper, pass `chatConfig={{ objectType: '" +
+    objectType +
+    "', uniqueRowId: '" +
+    uniqueRowId +
+    "' }}` (or from your table constants). ";
+  md +=
+    "Use `useTableChat({ chatConfig, tableRef, rowData, showChatIconOnColumn, visibleRowsIds, isEnabled })` and spread `getChatProps()` onto `<Table>`, and apply `getChatColumnModifier(columnDefs)` to get the chat column and inline chat icon.\n";
+
+  return md;
+}

package/templates/table-chat/README.md

@@ -0,0 +1,72 @@
+# TableChat scaffold templates
+
+This folder holds the template files used by the MCP tool `scaffold_table_chat`. The tool reads these files, replaces placeholders with user-provided values (objectType, uniqueRowId, appCode, channelName, tableName, paths), and returns the result so the AI can create or update files in the consumer project.
+
+## Placeholders
+
+Use these in the template files so the scaffold tool can substitute them:
+
+| Placeholder | Description | Example |
+|-------------|-------------|---------|
+| `{{OBJECT_TYPE}}` | Table code (tableCode) – required per table | `promo`, `landing_workbench_table` |
+| `{{UNIQUE_ROW_ID}}` | Row ID field name – required per table | `promo_id` |
+| `{{APP_CODE}}` | Project-level app code – optional, default e.g. promosmart | `promosmart` |
+| `{{CHANNEL_NAME}}` | Column field to show chat icon on – optional default | `promo_name` |
+| `{{TABLE_NAME}}` | Constant key suffix for this table (add_table) | `WORKBENCH_TABLE` |
+| `{{IMPORT_AXIOS}}` | Path to axios file (for chat.service and useTableChat) | `../axios` or `@/utils/axios` |
+| `{{IMPORT_CONSTANTS}}` | Path to table-chat constants | `../constants` or `@/constants` |
+| `{{IMPORT_CHAT_SERVICE}}` | Path to chat.service | `../../utils/services/chat.service` or `@/utils/services/chat.service` |
+| `{{IMPORT_USE_CHAT}}` | Path to useChat hook | `./useChat` |
+| `{{IMPORT_USE_URL_CHAT_FILTER}}` | Path to useUrlChatFilter | `./useUrlChatFilter` |
+| `{{IMPORT_USE_TOPIC_WEBSOCKET}}` | Path to useTopicWebSocket | `./useTopicWebSocket` |
+| `{{IMPORT_USE_TABLE_VISIBLE_ROWS}}` | Path to useTableVisibleRows | `./useTableVisibleRows` |
+| `{{IMPORT_TABLE_CELL_RENDERERS}}` | Path to tableCellRendererHelpers | `@/utils/helpers/tableHelpers/tableCellRendererHelpers` |
+| `{{IMPORT_TOAST}}` | Path to Redux toast (e.g. toastError) | `@/store/features/global/global` |
+| `{{IMPORT_STORE_GLOBAL}}` | Path to store/global (e.g. requestFail) | Same as `{{IMPORT_TOAST}}` |
+| `{{IMPORT_CHAT_ICON}}` | Path to chat icon asset | `@/assets/imageAssets/chatMsgIcon.svg?.url` |
+| `{{WEBSOCKET_BASE_URL_DEFAULT}}` | Default WebSocket URL (useWebSocket) | `process.env.REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL` |
+
+## Files included in this folder
+
+- **chat.service.js.template** – TableChat API service. Placeholder: `{{IMPORT_AXIOS_FROM_SERVICES}}`.
+- **useChat.js.template** – Core chat hook (WebSocket, messages, topics). Placeholders: `{{IMPORT_CHAT_SERVICE}}`, `{{IMPORT_STORE_GLOBAL}}`, `{{IMPORT_UTILITY_HELPERS}}`, `{{IMPORT_USE_WEBSOCKET}}`, `{{IMPORT_AXIOS}}`.
+- **useTableChat.js.template** – Table + chat wiring hook. Placeholders: `{{IMPORT_AXIOS}}`, `{{IMPORT_USE_CHAT}}`, `{{IMPORT_USE_URL_CHAT_FILTER}}`, `{{IMPORT_USE_TOPIC_WEBSOCKET}}`, `{{IMPORT_CONSTANTS}}`, `{{IMPORT_CHAT_SERVICE}}`, `{{IMPORT_CHAT_ICON}}`, `{{IMPORT_TABLE_CELL_RENDERERS}}`, `{{IMPORT_USE_TABLE_VISIBLE_ROWS}}`, `{{IMPORT_TOAST}}`, `{{TABLE_CHAT_CONFIG_CONSTANT}}`.
+- **useUrlChatFilter.js.template** – URL-based chat open/filter (topic_id, message_id, comment notification). Placeholder: `{{IMPORT_USE_SEARCH_PARAMS}}` (default `"react-router-dom-v5-compat"`; use `"react-router-dom"` for v6).
+- **useTableVisibleRows.js.template** – Tracks visible table row IDs (shared by chat and comment). Placeholder: `{{IMPORT_LODASH}}` (default `"lodash"`).
+- **useTopicWebSocket.js.template** – Hook for topic-level WebSocket (pulsing, visibility). Placeholder: `{{IMPORT_AXIOS}}`.
+- **useWebSocket.js.template** – Generic WebSocket hook (connection, reconnect, sendMessage, joinTopic, etc.). Placeholders: `{{IMPORT_STORE_GLOBAL}}`, `{{WEBSOCKET_BASE_URL_DEFAULT}}`.
+- **chatCellRenderers.js.template** – SpecialBadgeWrapperCellRenderer, ColorfulChatIcon, ChatColumnCellRenderer. Placeholder: `{{STYLES_IMPORT}}`.
+- **chatCellRenderers.scss.template** – Styles for chat column and badge.
+- **env-snippet.txt** – Env vars for TableChat API, WebSocket, and app URL.
+- **axios-snippet.txt** – TABLE_CHAT_API, WebSocket URL, and REACT_APP_PROMO_FRONTEND_URL exports.
+
+## Additional templates (add your content)
+
+1. **chat.service.js.template**  
+   Copy your `chat.service.js` content. Replace the axios import path with `{{IMPORT_AXIOS}}` (or leave a single placeholder at the top).
+
+2. **tableChatConstants.js.template**  
+   Copy your table-chat constants. Replace the first table config block with placeholders:
+   - `objectType: "{{OBJECT_TYPE}}"`
+   - `channelName: "{{CHANNEL_NAME}}"`
+   - `uniqueRowId: "{{UNIQUE_ROW_ID}}"`
+   - For the constant name use `TABLE_CHAT_CONFIG_FOR_{{TABLE_NAME}}` or a fixed name for first_time (e.g. `TABLE_CHAT_CONFIG_FOR_WORKBENCH_TABLE`).
+
+3. **useTableChat.js.template**  
+   Copy your `useTableChat.js` content. Replace all import paths with the placeholders above so the tool can adapt to the project’s path style (relative vs alias).
+
+4. **axios-snippet.txt** (optional)  
+   Snippet to add to the project’s axios file: create `TABLE_CHAT_API` with `baseURL: process.env.REACT_APP_TABLE_CHAT_BASE_URL`.
+
+5. **env-snippet.txt** (optional)  
+   Single line: `REACT_APP_TABLE_CHAT_BASE_URL='https://...'`
+
+6. **integration-snippet.jsx.template** (optional)  
+   TableWrapper + actual table usage example with placeholders so the AI can paste a ready-to-use snippet.
+
+## First-time vs add-table
+
+- **first_time**: The tool uses the full constants template (one table config). `{{TABLE_NAME}}` can default to e.g. `WORKBENCH_TABLE`.
+- **add_table**: The tool returns only a new `TABLE_CHAT_CONFIG_FOR_{{TABLE_NAME}}` block (and instructions to merge it into the existing constants file); it does not return the full constants file again.
+
+See **TABLECHAT_SCAFFOLD_PLAN.md** in the mcp-server root for the full design and tool contract.

package/templates/table-chat/axios-snippet.txt

@@ -0,0 +1,19 @@
+// TableChat – add to your axios file (e.g. utils/axios.js)
+// Ensure REACT_APP_TABLE_CHAT_BASE_URL and REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL are in .env
+
+const TABLE_CHAT_API = axios.create({
+  baseURL: process.env.REACT_APP_TABLE_CHAT_BASE_URL,
+  timeout: 9999999,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Export WebSocket base URL for useTopicWebSocket and useChat
+export const REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL = process.env.REACT_APP_TABLE_CHAT_WEBSOCKET_BASE_URL;
+
+// Export app base URL for useTableChat notificationMetaData (if not already exported)
+export const REACT_APP_PROMO_FRONTEND_URL = process.env.REACT_APP_PROMO_FRONTEND_URL || window.location.origin;
+
+// Add TABLE_CHAT_API to your exports
+export { TABLE_CHAT_API };

package/templates/table-chat/chat.service.js.template

@@ -0,0 +1,85 @@
+import { TABLE_CHAT_API, CORE_API } from "{{IMPORT_AXIOS_FROM_SERVICES}}";
+
+// Fetch all the channels
+export const fetchAllTopics = async (payload) => {
+  return TABLE_CHAT_API.post("/topics", payload);
+};
+
+export const unpinTopic = async (topicId) => {
+  return TABLE_CHAT_API.put(`/topic-members/${topicId}`, { is_pinned: false });
+};
+
+// All all the chats of selected Row
+export const fetchTopicsByObjectId = async (objectType, objectId) => {
+  return TABLE_CHAT_API.get(`/topic/${objectType}/${objectId}`);
+};
+
+export const createTopic = async (topic) => {
+  return TABLE_CHAT_API.post("/topic", topic);
+};
+export const resetUnreadCount = async (topicId) => {
+  return TABLE_CHAT_API.post(`/topic/${topicId}/reset-unread`);
+};
+export const fetchUserId = async () => {
+  return TABLE_CHAT_API.get("/details/me");
+};
+
+export const deleteTopic = async (topicId) => {
+  return TABLE_CHAT_API.delete(`/topic/${topicId}`);
+};
+
+export const pinTopic = async (topicId, isPinned) => {
+  return TABLE_CHAT_API.patch(`/topic/${topicId}/pin`, { is_pinned: isPinned });
+};
+
+// Message related APIs
+export const createMessage = async (payload) => {
+  return TABLE_CHAT_API.post(`/message`, payload);
+};
+
+export const getTopicMessages = async (topicId, queryParams) => {
+  return TABLE_CHAT_API.get(`/messages/${topicId}/paginated`, {
+    params: queryParams,
+  });
+};
+export const clearTopicMessages = async (topicId) => {
+  return TABLE_CHAT_API.delete(`/messages/${topicId}/clear`);
+};
+export const updateMessage = async (messageId, message) => {
+  return TABLE_CHAT_API.patch(`/message/${messageId}`, message);
+};
+export const deleteMessage = async (messageId) => {
+  return TABLE_CHAT_API.delete(`/message/${messageId}`);
+};
+export const pinUnpinMessage = async (messageId, payload) => {
+  return TABLE_CHAT_API.patch(`/message/${messageId}`, payload);
+};
+export const searchMessages = async (topicId, queryParams) => {
+  return TABLE_CHAT_API.get(`/messages/${topicId}/paginated`, {
+    params: queryParams,
+  });
+};
+
+// Pinned message related APIs
+export const getPinnedMessages = async (topicId, queryParams) => {
+  return TABLE_CHAT_API.get(`/messages/${topicId}/paginated`, {
+    params: queryParams,
+  });
+};
+
+//   Member related APIs
+export const fetchMembersForChat = async (topicId) => {
+  return TABLE_CHAT_API.get(`/topic-members/${topicId}`);
+};
+
+export const fetchNewMembersForChat = async (topicId) => {
+  return TABLE_CHAT_API.get(`/topic-members/${topicId}/remaining`);
+};
+
+export const addMembersToChat = async (topicId, userIds) => {
+  return TABLE_CHAT_API.post(`/topic-members/${topicId}`, userIds);
+};
+
+export const removeMembersFromChat = async (topicId, payload) => {
+  return TABLE_CHAT_API.delete(`/topic-members/${topicId}`, { data: payload });
+};

package/templates/table-chat/chatCellRenderers.js.template

@@ -0,0 +1,172 @@
+import React, { useRef } from "react";
+import { Tooltip } from "impact-ui";
+{{STYLES_IMPORT}}
+
+/**
+ * Wrapper cell renderer that shows original cell content plus an optional special badge (e.g. chat icon).
+ * Used by useTableChat to inject chat icon into a column.
+ */
+export const SpecialBadgeWrapperCellRenderer = (props) => {
+  const {
+    originalCellRenderer: OriginalRenderer,
+    showSpecialBadge = false,
+    specialBadgeContent = null,
+    onSpecialBadgeClick,
+    ...restProps
+  } = props;
+
+  const renderOriginalContent = () => {
+    if (OriginalRenderer) {
+      return <OriginalRenderer {...restProps} />;
+    }
+    return <span>{props.value || ""}</span>;
+  };
+
+  const handleBadgeClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onSpecialBadgeClick && props.data) {
+      onSpecialBadgeClick(props.data);
+    }
+  };
+
+  return (
+    <div
+      className="special-badge-wrapper"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        gap: "8px",
+      }}
+    >
+      <div style={{ flex: 1, minWidth: 0 }}>{renderOriginalContent()}</div>
+      {showSpecialBadge && (
+        <div
+          style={{
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "4px",
+            transition: "background-color 0.2s ease",
+          }}
+          onClick={handleBadgeClick}
+          title='Start New "Chat"'
+        >
+          {specialBadgeContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Colorful chat icon (gradient speech bubble) for the dedicated Chat column.
+ */
+export const ColorfulChatIcon = ({ size = 16, className = "", gradientId }) => {
+  const idRef = useRef(null);
+  if (!idRef.current) {
+    idRef.current =
+      gradientId ||
+      `colorful-chat-gradient-${Math.random().toString(36).slice(2, 11)}`;
+  }
+  const id = idRef.current;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+    >
+      <path
+        d="M1.88867 1H15.1113C15.3481 1.00006 15.5748 1.09396 15.7412 1.25977C15.9074 1.42549 16 1.65002 16 1.88281V11.2939C16 11.5268 15.9075 11.7513 15.7412 11.917C15.5748 12.0828 15.3481 12.1767 15.1113 12.1768H4.4082C3.78401 12.1768 3.17582 12.3782 2.67578 12.752L1 14.0039V1.88281C1 1.65002 1.09261 1.42549 1.25879 1.25977C1.42517 1.09396 1.65189 1.00006 1.88867 1Z"
+        stroke="url(#paint0_linear_1607_2520)"
+        strokeWidth="2"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1607_2520"
+          x1="17"
+          y1="8"
+          x2="0"
+          y2="8"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4259EE" />
+          <stop offset="1" stopColor="#F19579" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+/**
+ * Cell renderer for the dedicated fixed Chat column.
+ * Shows chat icon when the row has chat; supports unread count badge and pulsing indicator.
+ */
+export const ChatColumnCellRenderer = (props) => {
+  const params = props?.colDef?.cellRendererParams || {};
+  const {
+    promoIdsWithChats = new Set(),
+    uniqueRowId = "promo_id",
+    onChatClick,
+    isTopicPulsing = () => false,
+    promoIdToUnreadCount = {},
+  } = params;
+
+  const rowData = props?.data;
+  if (!rowData || !uniqueRowId) return null;
+
+  const rowId = rowData[uniqueRowId];
+  if (rowId === undefined || rowId === null) return null;
+
+  const hasChat = promoIdsWithChats.has(rowId);
+  if (!hasChat) return null;
+
+  const isPulsing = typeof isTopicPulsing === "function" ? isTopicPulsing(rowId) : false;
+  const unreadCount = promoIdToUnreadCount[rowId] ?? promoIdToUnreadCount[String(rowId)] ?? 0;
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onChatClick && rowData) onChatClick(rowData);
+  };
+
+  return (
+    <div
+      className="chat-column-cell"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        minHeight: "100%",
+      }}
+    >
+      <Tooltip title='Start New "Chat"' placement="left" variant="tertiary">
+        <div
+          className="chat-column-icon-wrapper"
+          role="button"
+          tabIndex={0}
+          onClick={handleClick}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleClick(e);
+            }
+          }}
+        >
+          <ColorfulChatIcon size={16} />
+          {unreadCount > 0 && (
+            <span className="chat-column-unread-badge">
+              {unreadCount > 99 ? "99+" : unreadCount}
+            </span>
+          )}
+          {isPulsing && <div className="chat-notification-dot-pulse-slow" />}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};