Skip to content

Commit c16dc06

Browse files
Shreyas281299Rankush Kumar
andauthored
docs(store): add AI documentation - AGENTS.md and ARCHITECTURE.md (#592)
Co-authored-by: Rankush Kumar <rankkuma+cisco@cisco.com>
1 parent 18fcc01 commit c16dc06

2 files changed

Lines changed: 448 additions & 0 deletions

File tree

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
# Contact Center Store (`@webex/cc-store`)
2+
3+
## Overview
4+
5+
`@webex/cc-store` is the shared, singleton MobX store for all Contact Center widgets. It holds global agent, session and task state, proxies SDK events, and exposes convenience APIs for fetching lists (queues, entry points, address book), task lifecycle handling, and common mutations.
6+
7+
**Package:** `@webex/cc-store`
8+
**Version:** See package.json
9+
10+
---
11+
12+
## Why and What is This Used For?
13+
14+
### Purpose
15+
16+
The store enables Contact Center widgets to:
17+
18+
- **Initialize and register** with the Webex Contact Center SDK
19+
- **Observe global state** (teams, device type, login options, agent state, tasks and many more)
20+
- **Handle SDK events** (login, logout, multi-login, task lifecycle, agent state changes)
21+
- **Fetch domain data** (buddy agents, queues, entry points, address book)
22+
- **Centralize callbacks and error handling** for consistent behavior across widgets
23+
24+
### Key Capabilities
25+
26+
- **Singleton** state via MobX observables
27+
- **Event wiring** to SDK (TASK_EVENTS and CC_EVENTS from the SDK)
28+
- **Task list management** and current task tracking
29+
- **Data-fetching helpers** - Async methods that fetch domain data from SDK APIs (buddy agents, queues, entry points, address book, access token)
30+
- **State management methods** - Setters and mutators for store observables (device type, dial number, team ID, current task, etc.)
31+
- **Error propagation** via `setOnError`
32+
- **Feature flags** parsing from Agent's profile received from SDK
33+
34+
---
35+
36+
## Examples and Usage
37+
38+
### Basic Initialization
39+
40+
```typescript
41+
import store from '@webex/cc-store';
42+
43+
// Option A: If you already have a Webex instance, best for existing webex enabled apps
44+
await store.init({
45+
webex: webexInstance,
46+
});
47+
48+
// Option B: Let the store initialize Webex for you, best for new apps
49+
await store.init({
50+
webexConfig: {
51+
/* sdk config */
52+
},
53+
access_token: authToken /* to be provided by the user */,
54+
});
55+
```
56+
57+
### Registration (when Webex is ready)
58+
59+
```typescript
60+
// If you need explicit (re-)registration using an existing webex
61+
await store.registerCC(someWebexInstance);
62+
```
63+
64+
### Observing State in React
65+
66+
```typescript
67+
import {observer} from 'mobx-react-lite';
68+
import store from '@webex/cc-store';
69+
70+
const Header = observer(() => {
71+
return (
72+
<div>
73+
<div>Agent ID: {store.agentId}</div>
74+
<div>Logged In: {store.isAgentLoggedIn ? 'Yes' : 'No'}</div>
75+
<div>Device: {store.deviceType}</div>
76+
<div>Team: {store.teamId}</div>
77+
</div>
78+
);
79+
});
80+
```
81+
82+
### Setting Up Error Callback
83+
84+
```typescript
85+
import store from '@webex/cc-store';
86+
87+
store.setOnError((componentName, error) => {
88+
console.error(`Error from ${componentName}`, error);
89+
// forward to telemetry
90+
});
91+
```
92+
93+
### Subscribing/Unsubscribing to SDK Events on contact center object
94+
95+
```typescript
96+
import store, {CC_EVENTS, TASK_EVENTS} from '@webex/cc-store';
97+
98+
const onLogin = (payload) => console.log('Login success:', payload);
99+
store.setCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS, onLogin);
100+
101+
// Later
102+
store.removeCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS, onLogin);
103+
```
104+
105+
### Subscribing/Unsubscribing to Task Events on task object
106+
107+
```typescript
108+
import store, {TASK_EVENTS} from '@webex/cc-store';
109+
110+
// Choose a task (e.g., current task)
111+
const taskId = store.currentTask?.data?.interactionId;
112+
if (taskId) {
113+
const handleMedia = (track) => {
114+
// e.g., use track for call control audio
115+
console.log('Media track received', track?.kind);
116+
};
117+
118+
// Subscribe to a task event
119+
store.setTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId);
120+
121+
// Later, unsubscribe
122+
store.removeTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId);
123+
}
124+
```
125+
126+
### Fetching Lists
127+
128+
These helper methods centralize SDK data-fetching in the store so widgets can access domain data (agents, queues, contacts) without directly importing the SDK. This ensures consistent error handling, avoids circular dependencies, and enables data transformation (like filtering queues by media type). Widgets like Transfer/Consult use `getBuddyAgents()` and `getQueues()` for populating dropdowns, while Outdial widgets use `getEntryPoints()` and `getAddressBookEntries()` for contact selection.
129+
130+
```typescript
131+
// Buddy agents for current task media type
132+
const buddies = await store.getBuddyAgents();
133+
134+
// Queues for a channel
135+
const {data: queues} = await store.getQueues('TELEPHONY', {page: 0, pageSize: 25});
136+
137+
// Entry points
138+
const entryPoints = await store.getEntryPoints({page: 0, pageSize: 50});
139+
140+
// Address book (no-op if disabled)
141+
const addressBook = await store.getAddressBookEntries({page: 0, pageSize: 50});
142+
```
143+
144+
### Mutating Common State
145+
146+
```typescript
147+
store.setDeviceType('BROWSER');
148+
store.setDialNumber('12345');
149+
store.setTeamId('teamId123');
150+
store.setState({id: 'Available', name: 'Available', isSystem: true, isDefault: true});
151+
```
152+
153+
---
154+
155+
## Key properties and methods
156+
157+
Properties (observable via MobX):
158+
159+
- `teams`, `loginOptions`, `idleCodes`, `wrapupCodes`, `featureFlags`
160+
- `agentId`, `agentProfile`, `isAgentLoggedIn`, `deviceType`, `dialNumber`, `teamId`
161+
- `currentTask`, `taskList`, `currentState`, `lastStateChangeTimestamp`, `lastIdleCodeChangeTimestamp`
162+
- `showMultipleLoginAlert`, `currentTheme`, `customState`, `isMuted`, `isAddressBookEnabled`
163+
164+
Methods:
165+
166+
- `init(params)`, `registerCC(webex?)`
167+
- `setOnError(cb)`, `setCCCallback(event, cb)`, `removeCCCallback(event)`
168+
- `refreshTaskList()`, `setCurrentTask(task, isClicked?)`
169+
- `setDeviceType(option)`, `setDialNumber(value)`, `setTeamId(id)`
170+
- `setCurrentState(stateId)`, `setState(state | {reset:true})`
171+
- `getBuddyAgents(mediaType?)`, `getQueues(mediaType?, params?)`
172+
- `getEntryPoints(params?)`, `getAddressBookEntries(params?)`
173+
174+
For full types, see src/store.types.ts.
175+
176+
---
177+
178+
## Dependencies
179+
180+
See exact versions in package.json
181+
182+
### Runtime
183+
184+
| Package | Purpose |
185+
| ----------------------- | -------------------------------- |
186+
| `@webex/contact-center` | SDK integration (methods/events) |
187+
| `mobx` | Observable state management |
188+
189+
### Dev/Test
190+
191+
TypeScript, Jest, ESLint, Webpack (see [package.json](../package.json)).
192+
193+
---
194+
195+
## Installation
196+
197+
```bash
198+
yarn add @webex/cc-store
199+
```
200+
201+
---
202+
203+
## Additional Resources
204+
205+
For detailed store architecture, event flows, and sequence diagrams, see [architecture.md](./architecture.md).
206+
207+
To obtain Webex access tokens for development and testing, visit the [Webex Developer Portal](https://developer.webex.com/).
208+
209+
---
210+
211+
_Last Updated: 2025-11-26_

0 commit comments

Comments
 (0)