@hiver/skills 1.0.1 → 1.0.2

package/collections/extension/skills/build-component/references/ui-kit-and-styling.md

@@ -0,0 +1,13 @@
+# UI Kit and Styling
+
+- **Use `@hiver/hiver-ui-kit` package** for all UI components and styling
+  - This package uses Material-UI (MUI) internally, so follow MUI patterns
+  - Import components directly from `@hiver/hiver-ui-kit`: `import { Stack, Button, Typography, TextField, Select } from '@hiver/hiver-ui-kit'`
+- **Map Figma to design tokens**: Use [palette/README.md](../palette/README.md) for colors and [typography/README.md](../typography/README.md) for text styles so Figma specs map to the correct `theme.palette.*` and `<Typography variant="...">`.
+- **Analyze the Figma selection** to identify all required components:
+  - Form inputs: Use `TextField`, `Select`, `Checkbox`, `Radio`, etc.
+  - Typography: Use `Typography` with variants from the typography reference (e.g. `body1_regular`, `h2_medium`, `caption1_medium`)
+  - Layout: Use `Stack`, `Box`, `Grid` for layout structure
+  - Buttons: Use `Button` with appropriate variants (`contained`, `outlined`, `text`)
+  - Modals: Use `Modal`
+  - Other: `Tooltip`, `CircularProgress`, `IconButton`, etc.

package/collections/extension/skills/build-component/typography/README.md

@@ -0,0 +1,3 @@
+# Typography reference (`@hiver/hiver-ui-kit`)
+
+See [variants.md](variants.md) for all typography variants and Figma mapping.

package/collections/extension/skills/build-component/typography/variants.md

@@ -0,0 +1,79 @@
+# Typography reference (`@hiver/hiver-ui-kit`)
+
+Map Figma text styles to `<Typography variant="...">`. Font family is **Open Sans**. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
+
+## Heading variants
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing | Figma match |
+|---------|----------|------------|------------|---------------|-------------|
+| `h1_medium` | 20 | 500 | 28px | -0.16px | Large title |
+| `h1_semiBold` | 20 | 600 | 28px | -0.16px | |
+| `h1_bold` | 20 | 700 | 28px | -0.16px | |
+| `h2_regular` | 16 | 400 | 21px | -0.16px | Section title |
+| `h2_medium` | 16 | 500 | 21px | -0.16px | |
+| `h2_semiBold` | 16 | 600 | 21px | -0.16px | |
+| `h2_5_regular` | 15 | 400 | 18px | -0.16px | |
+| `h2_5_medium` | 15 | 500 | 18px | -0.16px | |
+| `h2_5_semiBold` | 15 | 600 | 18px | -0.16px | |
+| `h3_regular` | 14 | 400 | 18px | 0 | Subsection |
+| `h3_medium` | 14 | 500 | 18px | 0 | |
+| `h3_semiBold` | 14 | 600 | 18px | 0 | |
+| `h4_regular` | 13 | 400 | 16px | 0 | |
+| `h4_medium` | 13 | 500 | 16px | 0 | |
+| `h4_semiBold` | 13 | 600 | 16px | 0 | |
+| `h5_regular` | 12 | 400 | 14px | -0.12px | Small heading |
+| `h5_medium` | 12 | 500 | 14px | -0.12px | |
+| `h5_semiBold` | 12 | 600 | 14px | -0.12px | |
+| `h5_bold` | 12 | 700 | 14px | -0.12px | |
+
+## Body variants
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `body0_5_regular` | 16 | 400 | 22px | 0 |
+| `body0_5_medium` | 16 | 500 | 22px | 0 |
+| `body0_5_semiBold` | 16 | 600 | 22px | 0 |
+| `body1_regular` | 14 | 400 | 21px | 0 |
+| `body1_medium` | 14 | 500 | 21px | 0.25px |
+| `body1_semiBold` | 14 | 600 | 21px | 0 |
+| `body2_regular` | 13 | 400 | 18px | 0 |
+| `body2_medium` | 13 | 500 | 18px | 0 |
+| `body2_semiBold` | 13 | 600 | 18px | 0 |
+| `body3_regular` | 12 | 400 | 14px | 0 |
+| `body3_medium` | 12 | 500 | 14px | 0 |
+| `body3_semiBold` | 12 | 600 | 14px | 0 |
+| `body4_regular` | 11 | 400 | 12px | 0 |
+| `body4_medium` | 11 | 500 | 12px | 0 |
+| `body4_semiBold` | 11 | 600 | 12px | 0 |
+
+## Caption & overline
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing | Notes |
+|---------|----------|------------|------------|---------------|-------|
+| `caption1_regular` | 12 | 400 | 16px | 0.25px | |
+| `caption1_medium` | 12 | 500 | 16px | 0.25px | |
+| `caption1_semiBold` | 12 | 600 | 16px | 0.25px | |
+| `caption2_regular` | 11 | 400 | 14px | 0.20px | |
+| `caption2_medium` | 11 | 500 | 14px | 0.20px | |
+| `caption2_semiBold` | 11 | 600 | 14px | 0.20px | |
+| `overline_medium` | 11 | 500 | 18px | 0 | UPPERCASE |
+| `overline_semiBold` | 11 | 600 | 18px | 0 | UPPERCASE |
+
+## Button & chip
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `buttonLarge` | 14 | 500 | 28px | 0.2px |
+| `buttonMedium` | 13 | 500 | 24px | 0.2px |
+| `buttonSmall` | 12 | 500 | 20px | 0.4px |
+| `chip` | 12 | 500 | 12px | 0.4px |
+
+## Usage
+
+```jsx
+<Typography variant="h2_medium">Section title</Typography>
+<Typography variant="body1_regular">Body text</Typography>
+<Typography variant="caption1_medium" color="text.secondary">Caption</Typography>
+```
+
+**Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match.

package/collections/extension/skills/ci-cd/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: ci-cd
+description: Complete knowledge of the Hiver Chrome Extension CI/CD pipelines across Dev, Pre-prod, and Production. Covers all pipeline files, dependency chains, and downstream impact of changes. Use when modifying CI/CD pipelines, adding build outputs, changing build commands, adding env vars, updating S3 targets, debugging pipeline failures, or any task involving GitHub Actions, CodeBuild buildspecs, Docker build scripts, or deployment scripts.
+---
+
+# Hiver Extension CI/CD
+
+## Pipeline Map
+
+```
+Dev (PR on qa-* branch)
+  1. GitHub Action:   .github/workflows/Dev-Extension-Build.yml
+  2. CodeBuild (PR create): ci-cd/buddy/buildspec-create-v3.yaml
+  3. CodeBuild (PR merge):  ci-cd/buddy/buildspec-merge-v3.yaml
+
+Pre-Production (manual trigger)
+  4. GitHub Action:   .github/workflows/Pre-production.yaml
+
+Production
+  5a. CodeBuild:      codebuild/extension-buildspec.yml
+  5b. CodeBuild:      codebuild/webstore-buildspec-v3.yaml
+```
+
+## Modification Guides
+
+### Adding a new JS bundle output file
+Touches **all three environments** — update in 4 places:
+1. `docker/v3/build_dev_extension.sh` — add `mv` to rename from `dist/` output name to final name
+2. `.github/workflows/Pre-production.yaml` — add explicit `cp` in "Prepare extension package" step
+3. `deployment/PushBundleToS3.py` — add entry to `BUNDLE_NAMES` dict; update `validate_upload()` count
+4. `deployment/webstore-deployment/pushBundlesToExtensionPackage.py` — add file to CDN fetch list
+
+> Pre-prod uses manual per-file `cp` (not a dict), making it the most fragile env when new files are added.
+
+### Changing a build command (backbone or React)
+Each environment has its own copy — update all three:
+- Dev: `Dev-Extension-Build.yml`
+- Pre-prod: `Pre-production.yaml`
+- Production: `codebuild/extension-buildspec.yml`
+
+### Adding an env var
+| Layer | Where to add |
+|-------|-------------|
+| GH Actions | top-level `env:` block or step-level `env:` |
+| CodeBuild | `env.variables:` in the buildspec YAML |
+| Docker build-time | `--build-arg` in the `.sh` script **AND** `ARG` in `Dockerfile.v3` |
+| Docker runtime | `-e KEY=VALUE` in `docker run` command in `buildspec-merge-v3.yaml` |
+
+### Changing S3 targets
+| Env | File to change |
+|-----|---------------|
+| Dev | `docker/v3/zip_extension.sh` |
+| Pre-prod | `Pre-production.yaml` — "Create zip file" step |
+| Production bundles | `deployment/PushBundleToS3.py` |
+| Production webstore | `codebuild/webstore-buildspec-v3.yaml` |
+
+### Gainsight changes
+Update **both** scripts — `codebuild/gainsight_update.sh` (pre-prod + prod) and `updateGainsight.sh` (dev + prod). Production runs both.
+
+## Reference files
+
+**Load lazily — only read a reference file when you need it. Do NOT read all files upfront.**
+
+| Topic | File | When to load |
+|-------|------|--------------|
+| Full file registry (all pipeline files with descriptions) | [references/file-registry.md](references/file-registry.md) | When you need to identify which file to edit |
+| Bundle renaming map, failure patterns, key constants | [references/bundle-and-troubleshooting.md](references/bundle-and-troubleshooting.md) | When debugging failures or working with bundle names |

package/collections/extension/skills/ci-cd/references/bundle-and-troubleshooting.md

@@ -0,0 +1,50 @@
+# Bundle Renaming Map & Troubleshooting
+
+## Bundle Renaming Map
+
+| `dist/` filename | Final name in extension package |
+|------------------|--------------------------------|
+| `bundle.js` | `gx_combined.js` |
+| `bundle.expanded.js` | `gx_combined.expanded.js` |
+| `bundle.react.prod.js` | `gx_react_combined.js` |
+| `bundle.react.prod.js.map` | `gx_react_combined.js.map` |
+| `bundle.react.prod.expanded.js` | `gx_react_combined.expanded.js` |
+| `src/css/hiver_extension.css` | `hiver_extension.css` |
+
+Renaming layer per env:
+- **Dev:** `docker/v3/build_dev_extension.sh` (`mv` commands)
+- **Pre-prod:** manual `cp` with new name in `Pre-production.yaml`
+- **Production:** `deployment/PushBundleToS3.py` `BUNDLE_NAMES` dict (`os.rename`)
+
+---
+
+## Common Failure Patterns
+
+| Symptom | Root cause | Where to check |
+|---------|-----------|----------------|
+| Dev zip upload skipped | Neither `CODEBUILD_BUILD_ID` nor `GITHUB_RUN_ID` is set | `docker/v3/zip_extension.sh` env detection block |
+| Bundle count validation fails (prod) | New file added to build but not registered in push script | `BUNDLE_NAMES` + `validate_upload()` in `PushBundleToS3.py` |
+| `APP_ENV` empty in create buildspec | Deployer has no available buddy env to assign | Check `alloc_result.txt` output, deployer capacity |
+| Yarn install fails | NPM token missing | `scripts/setup-npm-token.sh` + `EXT_NPM_TOKEN` secret |
+| PHP config fails | `codebuild/decrypted_key.yaml` missing/malformed | File + `config/configManager.php` paths |
+| Docker build arg missing inside image | Arg not passed via `--build-arg` | `.sh` docker build command + `Dockerfile.v3` `ARG` declaration |
+| Wrong `APP_ENV` in dev extension | Expected — NAMESPACE in dev is injected by `buddy download-extension` CLI, not CI | `docker/v3/replace_env.sh` |
+
+---
+
+## Key Constants
+
+| Constant | Value |
+|----------|-------|
+| Dev S3 bucket | `landing-codebuld` |
+| Pre-prod S3 bucket | `pre-prod-extension` |
+| Webstore staging bucket | `testextension/test` |
+| Gainsight CDN S3 | `hivercdn` |
+| Pre-prod `APP_ENV` | `v2master` (hardcoded) |
+| Merge pipeline `APP_ENV` | `dev` (hardcoded in `docker run`) |
+| ECR service name | `extension` |
+| Dockerfile | `Dockerfile.v3` |
+| Deployer base URL | `https://deployer.hiver.space` |
+| Buddy CI URL | `http://buddy-ci.hiver.space` |
+| Production version increment | `+0.1` per build |
+| Chrome Web Store action var | `WEB_STORE_ACTION` (`update_and_publish` / `publish` / default=update only) |

package/collections/extension/skills/ci-cd/references/file-registry.md

@@ -0,0 +1,28 @@
+# CI/CD Full File Registry
+
+## GitHub Actions
+- `.github/workflows/Dev-Extension-Build.yml` — Dev build on `qa-*` PR events
+- `.github/workflows/Pre-production.yaml` — Manual pre-prod build
+
+## CodeBuild Buildspecs
+- `ci-cd/buddy/buildspec-create-v3.yaml` — PR create: buddy env assign + Docker build + ECR push
+- `ci-cd/buddy/buildspec-merge-v3.yaml` — PR merge: builds `:latest` Docker image, runs container
+- `codebuild/extension-buildspec.yml` — Production: full JS build, pushes bundles to CDN S3
+- `codebuild/webstore-buildspec-v3.yaml` — Production: packages zip, publishes to Chrome Web Store
+
+## Docker / Bash Scripts
+- `ci-cd/buddy/build_docker_image_dev_v3.sh` — Builds image tagged `${GITHUB_SHA}`, notifies deployer
+- `ci-cd/buddy/build_docker_image_latest.sh` — Builds image tagged `:latest` + resolved SHA
+- `docker/v3/build_dev_extension.sh` — Assembles dev extension folder, renames bundles
+- `docker/v3/replace_env.sh` — Injects `APP_ENV`/`NAMESPACE` placeholders via `sed`
+- `docker/v3/zip_extension.sh` — Zips extension, uploads to S3 `landing-codebuld`
+- `codebuild/gainsight_update.sh` — Downloads Gainsight JS, pushes to `s3://hivercdn`
+
+## Python Deployment Scripts
+- `deployment/GetNextbundleVersion.py` — Reads S3 for latest version, increments +0.1, writes `version.txt`
+- `deployment/PushBundleToS3.py` — Renames + uploads bundles/CSS to CDN S3, validates count, updates DB
+- `deployment/webstore-deployment/pushBundlesToExtensionPackage.py` — Fetches bundles from CDN into extension folder
+- `deployment/webstore-deployment/updateItemInStore.py` — Update without publish
+- `deployment/webstore-deployment/publishItemToStore.py` — Publish only
+- `deployment/webstore-deployment/updateAndPublishItemToStore.py` — Update + publish
+- `deployment/webstore-deployment/updateChromeStoreReleaseInfo.py` — Writes release info to DB

package/collections/extension/skills/connect-api/SKILL.md

@@ -0,0 +1,23 @@
+---
+name: connect-api
+description: API integration rules for React Query, custom hooks, and Hiver fetchers. Use when connecting to APIs, creating data-fetching or mutation hooks, or working with React Query and service utilities.
+---
+
+# Connect API
+
+When integrating APIs, use React Query for data and mutations, put hooks in a `hooks` folder, and use the correct fetcher from `react-extn/src/utils`. Define query keys in `constants/queries.js`.
+
+## Reference files
+
+**Load lazily — only read a reference file when you are about to perform that specific task. Do NOT read all files upfront.**
+
+| Topic | File | When to load |
+|-------|------|--------------|
+| Hook organization | [references/hook-organization.md](references/hook-organization.md) | Before creating a new hook file |
+| React Query (queries & mutations) | [references/react-query-usage.md](references/react-query-usage.md) | Before writing useQuery/useMutation |
+| Query key management | [references/query-keys.md](references/query-keys.md) | Before defining query keys |
+| Data fetcher selection | [references/data-fetchers.md](references/data-fetchers.md) | Before choosing a fetcher utility |
+| API call structure | [references/api-call-structure.md](references/api-call-structure.md) | Before writing the fetch call body |
+| URL and method placeholders | [references/url-placeholders.md](references/url-placeholders.md) | Only when constructing dynamic URLs |
+| Error handling | [references/error-handling.md](references/error-handling.md) | Only when adding error/loading states |
+| Best practices | [references/best-practices.md](references/best-practices.md) | Only when uncertain about a pattern |

package/collections/extension/skills/connect-api/references/api-call-structure.md

@@ -0,0 +1,84 @@
+# API Call Structure
+
+## For Modern Auth Fetchers (HiverNewAuthCall based)
+
+- **Use async/await pattern** with error handling that returns `[data, null]` or `[null, error]`:
+  - Applies to: `AiBifrostAuth`, `CustomFieldsService`, `AutomationService`, `HiverSlaNewAuth`, `CsatNewAuthCall`, `TagBifrostAuth`, `HiverIntegrationBifrostAuth`, `HiverChatBifrostAuth`, `HiverNotesAxios`, `OutOfOfficeService`, `CustomerPortalApiService`, `HiverNotifCall`
+  ```javascript
+  import { AiBifrostAuth } from "../../../../utils/AiNewAuth";
+  // OR any other modern auth fetcher
+  
+  const fetchData = async (param) => {
+    try {
+      const response = await AiBifrostAuth({
+        url: `/v1/endpoint?param=${param}`,
+        method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        data: {}, // For POST/PUT/PATCH
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For createAxios based Fetchers
+
+- **Use async/await pattern** with error handling:
+  - Applies to: `AiAxios`, `HiverCustomerPortalAxios`
+  ```javascript
+  import { AiAxios } from "../../../../utils/AiAxios";
+  
+  const fetchData = async (param) => {
+    try {
+      const response = await AiAxios({
+        url: `/v1/endpoint?param=${param}`,
+        method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        data: {}, // For POST/PUT/PATCH
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For Legacy HiverAxios
+
+- **Use async/await with try/catch**:
+  ```javascript
+  import { HiverAxios } from "h-extension-common";
+  
+  const fetchData = async (payload) => {
+    try {
+      const response = await HiverAxios({
+        url: `/api/endpoint`,
+        type: "GET", // or "POST", "PUT", "DELETE" - Note: uses "type" not "method"
+        params: payload, // Request body/params
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For HiverAnalyticsAxios
+
+- **Use async/await with try/catch**:
+  ```javascript
+  import { HiverAnalyticsAxios } from "../../../../utils/HiverAnalyticsAxios";
+  
+  const fetchData = async (payload) => {
+    try {
+      const response = await HiverAnalyticsAxios({
+        url: `/api/endpoint`,
+        type: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        params: payload, // Request body/params
+      });
+      return [response.parsedBody, null]; // Note: HiverAnalyticsAxios returns parsedBody
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```

package/collections/extension/skills/connect-api/references/best-practices.md

@@ -0,0 +1,10 @@
+# Best Practices
+
+- **Keep API functions pure** - separate API logic from React Query hooks
+- **Use TypeScript types** if the project uses TypeScript
+- **Add JSDoc comments** for complex hooks explaining parameters and return values
+- **Handle loading states** using `isLoading`, `isFetching` from React Query
+- **Handle error states** using `isError`, `error` from React Query
+- **Use `enabled` option** for conditional queries
+- **Use `refetchOnMount`, `refetchOnWindowFocus`** options when needed
+- **Export query keys** from hook files for use in other components

package/collections/extension/skills/connect-api/references/data-fetchers.md

@@ -0,0 +1,52 @@
+# Data Fetcher Selection
+
+- **All data fetcher utilities are located in `react-extn/src/utils`**
+- **Use the appropriate fetcher** based on the service you're working with:
+
+## Modern Auth Fetchers (HiverNewAuthCall based)
+
+These use `method` (GET, POST, PUT, PATCH, DELETE) and return promises:
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `AiBifrostAuth` | AI service endpoints | AI Service | `../../../../utils/AiNewAuth` |
+| `CustomFieldsService` | Custom fields operations | Custom Fields Service | `../../../../utils/CustomFieldsService` |
+| `AutomationService` | Automation workflows | Automations Service | `../../../../utils/AutomationService` |
+| `HiverSlaNewAuth` | SLA management | SLA Service | `../../../../utils/slaNewAuth` |
+| `CsatNewAuthCall` | CSAT surveys | CSAT Service | `../../../../utils/csatNewAuth` |
+| `TagBifrostAuth` | Tag operations | Tags Service | `../../../../utils/tagNewAuth` |
+| `HiverIntegrationBifrostAuth` | Integration endpoints | Integration Service | `../../../../utils/integrationNewAuth` |
+| `HiverChatBifrostAuth` | Chat/channels operations | Channels Service | `../../../../utils/chatNewAuth` |
+| `HiverNotesAxios` | Notes operations | Notes Service | `../../../../utils/HiverNotesNewAuth` |
+| `OutOfOfficeService` | Schedule management | Schedule Service | `../../../../utils/OutOfOfficeService` |
+| `CustomerPortalApiService` | Customer portal | Customer Portal Service | `../../../../utils/CustomerPortalApiService` |
+| `HiverNotifCall` | Notifications | Notifications Service | `../../../../utils/notificationAuthCall` |
+
+**Usage pattern for modern auth fetchers:**
+```javascript
+import { AiBifrostAuth } from "../../../../utils/AiNewAuth";
+// OR
+import { CustomFieldsService } from "../../../../utils/CustomFieldsService";
+
+const response = await AiBifrostAuth({
+  url: `/v1/endpoint`,
+  method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+  data: {}, // For POST/PUT/PATCH
+});
+```
+
+## createAxios based Fetchers
+
+These use `method` and return promises:
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `AiAxios` | AI service (legacy) | AI Service | `../../../../utils/AiAxios` |
+| `HiverCustomerPortalAxios` | Customer portal (legacy) | Customer Portal Service | `../../../../utils/CustomerPortalAxios` |
+
+## Legacy/Custom Fetchers
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `HiverAxios` | Legacy API calls | Default Hiver API | `h-extension-common` |
+| `HiverAnalyticsAxios` | Analytics data | Analytics Service | `../../../../utils/HiverAnalyticsAxios` |

package/collections/extension/skills/connect-api/references/error-handling.md

@@ -0,0 +1,34 @@
+# Error Handling
+
+- **Handle errors in mutation hooks**:
+  ```javascript
+  import { useSnackbar } from "../../../../common";
+  import { theme } from "@hiver/hiver-ui-kit";
+  
+  const showSnackbar = useSnackbar();
+  
+  // In mutation onSuccess handler
+  onSuccess: (response) => {
+    const [result, error] = response;
+    if (error) {
+      showSnackbar({
+        message: error || "Operation failed",
+        background: theme.palette.red.primary,
+      });
+      return;
+    }
+    // Handle success...
+  },
+  
+  // In mutation onError handler (for unexpected errors)
+  onError: (error, variables, context) => {
+    showSnackbar({
+      message: error.message || "Operation failed",
+      background: theme.palette.red.primary,
+    });
+    // Rollback optimistic updates if needed
+    if (context?.previousData) {
+      queryClient.setQueryData([API_QUERIES.resource], context.previousData);
+    }
+  }
+  ```

package/collections/extension/skills/connect-api/references/hook-organization.md

@@ -0,0 +1,11 @@
+# Hook Organization
+
+- **Always create separate custom hooks** for querying and mutating server data
+- **Place hooks in a `hooks` folder** within the module/component directory
+  - Example structure: `react-extn/src/AiCopilot/Pages/Chat/hooks/` or `react-extn/src/AiCopilot/Pages/Tags/hooks/`
+- **Naming convention**:
+  - Query hooks: `useGet[ResourceName].js` (e.g., `useGetChatList.js`, `useGetSuggestedTags.js`)
+  - Mutation hooks: `use[Action][ResourceName].js` (e.g., `useSendChatMessage.js`, `useApplyTags.js`)
+- **Reference examples**:
+  - `react-extn/src/AiCopilot/Pages/Chat/hooks/useGetChatList.js`
+  - `react-extn/src/AiCopilot/Pages/Tags/hooks/useGetSuggestedTags.js`

package/collections/extension/skills/connect-api/references/query-keys.md

@@ -0,0 +1,21 @@
+# Query Key and Mutation Key Management
+
+- **Never hardcode query/mutation keys** directly in hook files
+- **Always define keys in a constants file** for the module
+  - Create or use existing `constants/queries.js` file in the module directory
+  - Example: `react-extn/src/AiCopilot/Pages/Chat/constants/queries.js` or `react-extn/src/AiCopilot/Pages/Tags/constants/queries.js`
+- **Naming convention**: Use descriptive constant names in an `API_QUERIES` object
+  ```javascript
+  // In constants/queries.js file
+  export const API_QUERIES = {
+    list: 'ai_chat_list',
+    send: 'ai_chat_message',
+    tagsList: 'ai_tags_list',
+  };
+  ```
+- **Include dynamic parameters** in query keys for proper cache invalidation:
+  ```javascript
+  queryKey: [API_QUERIES.list, smIdsKey, conversationId]
+  // OR for single parameter
+  queryKey: [API_QUERIES.tagsList, String(smId), String(conversationId)]
+  ```

package/collections/extension/skills/connect-api/references/react-query-usage.md

@@ -0,0 +1,83 @@
+# React Query Usage
+
+## For Data Fetching (Queries)
+
+- **Use `useQuery` from `@tanstack/react-query`** for GET requests
+- **Structure**:
+  ```javascript
+  import { useQuery } from "@tanstack/react-query";
+  import { AiBifrostAuth } from "../../../../utils/AiNewAuth"; // For AI service
+  // OR
+  import { HiverAxios } from "h-extension-common"; // For legacy API calls
+  
+  // Import query keys from constants (see section 3)
+  import { API_QUERIES } from '../constants/queries';
+  
+  // API function - returns [data, null] on success or [null, error] on failure
+  const fetchResource = async (param1, param2) => {
+      const response = await AiBifrostAuth({
+        url: `/v1/resource?param=${param1}`,
+        method: "GET",
+      });
+      return response.data;
+  };
+  
+  // Custom hook
+  export const useGetResource = ({ param1, param2, enabled = true }) => {
+    return useQuery({
+      queryKey: [API_QUERIES.resource, param1, param2],
+      queryFn: () => fetchResource(param1, param2),
+      enabled: enabled && param1 !== undefined,
+      refetchOnMount: true, // Optional
+    });
+  };
+  ```
+
+## For Data Mutations
+
+- **Use `useMutation` from `@tanstack/react-query`** for POST, PUT, PATCH, DELETE requests
+- **Structure**:
+  ```javascript
+  import { useMutation, useQueryClient } from "@tanstack/react-query";
+  import { AiBifrostAuth } from "../../../../utils/AiNewAuth"; // For AI service
+  // OR
+  import { HiverAxios } from "h-extension-common"; // For legacy API calls
+  import { useSnackbar } from "../../../../common";
+  import { theme } from "@hiver/hiver-ui-kit";
+  import { API_QUERIES } from '../constants/queries';
+  
+  // API function - returns [data, null] on success or [null, error] on failure
+  const updateResource = async (id, data) => {
+    
+      const response = await AiBifrostAuth({
+        url: `/v1/resource/${id}`,
+        method: "POST",
+        data: data,
+      });
+      return response.data
+    
+  };
+  
+  // Custom hook
+  export const useUpdateResource = () => {
+    const queryClient = useQueryClient();
+    const showSnackbar = useSnackbar();
+    
+    return useMutation({
+      mutationFn: ({ id, data }) => updateResource(id, data),
+      onSuccess: (response) => {        
+        // Invalidate related queries
+        queryClient.invalidateQueries({ queryKey: [API_QUERIES.resource] });
+        showSnackbar({
+          message: "Resource updated successfully",
+        });
+      },
+      onError: () => {
+        showSnackbar({
+          message: "Failed to update resource",
+          background: theme.palette.red.primary,
+        });
+      },
+    });
+  };
+  ```

package/collections/extension/skills/connect-api/references/url-placeholders.md

@@ -0,0 +1,17 @@
+# URL and Method Placeholders
+
+- **Keep placeholders** for URL and HTTP method when creating hooks
+- **Format**: Use clear comments indicating where to fill in:
+  ```javascript
+  const fetchData = async (id) => {
+    try {
+      const response = await AiBifrostAuth({
+        url: `/v1/resource/${id}`, // TODO: Update endpoint URL
+        method: "GET", // TODO: Update HTTP method (GET, POST, PUT, PATCH, DELETE)
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```