-
Notifications
You must be signed in to change notification settings - Fork 62
docs(store): add AI documentation - AGENTS.md and ARCHITECTURE.md #592
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: next
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,205 @@ | ||||||
| # Contact Center Store (`@webex/cc-store`) | ||||||
|
|
||||||
| ## Overview | ||||||
|
|
||||||
| `@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. | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
|
||||||
| **Package:** `@webex/cc-store` | ||||||
| **Version:** See package.json | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Why and What is This Used For? | ||||||
|
|
||||||
| ### Purpose | ||||||
|
|
||||||
| The store enables Contact Center widgets to: | ||||||
| - **Initialize and register** with the Webex Contact Center SDK | ||||||
| - **Observe global state** (teams, device type, login options, agent state, tasks and many more) | ||||||
| - **Handle SDK events** (login, logout, multi-login, task lifecycle, agent state changes) | ||||||
| - **Fetch domain data** (buddy agents, queues, entry points, address book) | ||||||
| - **Centralize callbacks and error handling** for consistent behavior across widgets | ||||||
|
|
||||||
| ### Key Capabilities | ||||||
|
|
||||||
| - **Singleton** state via MobX observables | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I feel there should be more context here in terms of points that we are talking about here. What do you mean by TASK_EVENTS, CC_EVENTS ? What are fetaure flags and for what purpose they are required ? |
||||||
| - **Event wiring** to SDK (TASK_EVENTS and CC_EVENTS) | ||||||
| - **Task list management** and current task tracking | ||||||
| - **Helpers** for buddy agents, queues, entry points, address book | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we have helper functions only for these 4: buddy agents, queues, entry points, address book ? What is different between these helper functions and other functions in storeEventsWrapper file. We should add more clear description to say what these helper functions are for and in e.g we can talk about like buddy agents, queues etc |
||||||
| - **Error propagation** via `setOnError` | ||||||
| - **Feature flags** parsing from SDK profile | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Examples and Usage | ||||||
|
|
||||||
| ### Basic Initialization | ||||||
|
|
||||||
| ```typescript | ||||||
| import store from '@webex/cc-store'; | ||||||
|
|
||||||
| // Option A: If you already have a Webex instance, best for existing webex enabled apps | ||||||
| await store.init({ | ||||||
| webex: someWebexInstance, // must include cc | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same comment here, how will it understand what 'must include cc' means ? There should be a reference for what webex instance looks like |
||||||
| }); | ||||||
|
|
||||||
| // Option B: Let the store initialize Webex for you, best for new apps | ||||||
| await store.init({ | ||||||
| webexConfig: {/* sdk config */}, | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of saying sdk config here in bracket, can we not provide reference to dev portal documentation where it talks about what webex config looks like ? Can it read from the links attached ? And if not that then maybe we should add that information locally either here or in separate .md file |
||||||
| access_token: authToken, | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does it understand where the authToken comes from in this example ?Did we observe in our testing that it doesn't hardcode the token because we have not put any instruction to tell it to not do that |
||||||
| }); | ||||||
| ``` | ||||||
|
|
||||||
| ### Registration (when Webex is ready) | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same question here as well: How does it know what when webex is ready means ? |
||||||
|
|
||||||
| ```typescript | ||||||
| // If you need explicit (re-)registration using an existing webex | ||||||
| await store.registerCC(someWebexInstance); | ||||||
| ``` | ||||||
|
|
||||||
| ### Observing State in React | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These examples seem to be given to elaborate on above section of key capabilities so mapping the text statement with example together would be more easier for AI to follow |
||||||
|
|
||||||
| ```typescript | ||||||
| import {observer} from 'mobx-react-lite'; | ||||||
| import store from '@webex/cc-store'; | ||||||
|
|
||||||
| const Header = observer(() => { | ||||||
| return ( | ||||||
| <div> | ||||||
| <div>Agent ID: {store.agentId}</div> | ||||||
| <div>Logged In: {store.isAgentLoggedIn ? 'Yes' : 'No'}</div> | ||||||
| <div>Device: {store.deviceType}</div> | ||||||
| <div>Team: {store.teamId}</div> | ||||||
| </div> | ||||||
| ); | ||||||
| }); | ||||||
| ``` | ||||||
|
|
||||||
| ### Setting Up Error Callback | ||||||
|
|
||||||
| ```typescript | ||||||
| import store from '@webex/cc-store'; | ||||||
|
|
||||||
| store.setOnError((componentName, error) => { | ||||||
| console.error(`Error from ${componentName}`, error); | ||||||
| // forward to telemetry | ||||||
| }); | ||||||
| ``` | ||||||
|
|
||||||
| ### Subscribing/Unsubscribing to SDK Events on contact center object | ||||||
|
|
||||||
| ```typescript | ||||||
| import store, {CC_EVENTS, TASK_EVENTS} from '@webex/cc-store'; | ||||||
|
|
||||||
| const onLogin = (payload) => console.log('Login success:', payload); | ||||||
| store.setCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS, onLogin); | ||||||
|
|
||||||
| // Later | ||||||
| store.removeCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS); | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't we need to add callback while switching off the listener ? Is it like this in the code also or just in the documentation |
||||||
| ``` | ||||||
|
|
||||||
| ### Subscribing/Unsubscribing to Task Events on task object | ||||||
|
|
||||||
| ```typescript | ||||||
| import store, {TASK_EVENTS} from '@webex/cc-store'; | ||||||
|
|
||||||
| // Choose a task (e.g., current task) | ||||||
| const taskId = store.currentTask?.data?.interactionId; | ||||||
| if (taskId) { | ||||||
| const handleMedia = (track) => { | ||||||
| // e.g., use track for call control audio | ||||||
| console.log('Media track received', track?.kind); | ||||||
| }; | ||||||
|
|
||||||
| // Subscribe to a task event | ||||||
| store.setTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId); | ||||||
|
|
||||||
| // Later, unsubscribe | ||||||
| store.removeTaskCallback(TASK_EVENTS.TASK_MEDIA, handleMedia, taskId); | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| ### Fetching Lists | ||||||
|
|
||||||
| ```typescript | ||||||
| // Buddy agents for current task media type | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Adding a statement to help it link and understand where these helper methods are required would be clearer. With this, I don't get the answer of why these helper methods are needed in store file |
||||||
| const buddies = await store.getBuddyAgents(); | ||||||
|
|
||||||
| // Queues for a channel | ||||||
| const {data: queues} = await store.getQueues('TELEPHONY', {page: 0, pageSize: 25}); | ||||||
|
|
||||||
| // Entry points | ||||||
| const entryPoints = await store.getEntryPoints({page: 0, pageSize: 50}); | ||||||
|
|
||||||
| // Address book (no-op if disabled) | ||||||
| const addressBook = await store.getAddressBookEntries({page: 0, pageSize: 50}); | ||||||
| ``` | ||||||
|
|
||||||
| ### Mutating Common State | ||||||
|
|
||||||
| ```typescript | ||||||
| store.setDeviceType('BROWSER'); | ||||||
| store.setDialNumber('12345'); | ||||||
| store.setTeamId('teamId123'); | ||||||
| store.setState({id: 'Available', name: 'Available', isSystem: true, isDefault: true}); | ||||||
| ``` | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Key API (Selected) | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This heading is not very accurate as properties are not APIs and wht do we have Selected in bracket |
||||||
|
|
||||||
| Properties (observable via MobX): | ||||||
| - `teams`, `loginOptions`, `idleCodes`, `wrapupCodes`, `featureFlags` | ||||||
| - `agentId`, `agentProfile`, `isAgentLoggedIn`, `deviceType`, `dialNumber`, `teamId` | ||||||
| - `currentTask`, `taskList`, `currentState`, `lastStateChangeTimestamp`, `lastIdleCodeChangeTimestamp` | ||||||
| - `showMultipleLoginAlert`, `currentTheme`, `customState`, `isMuted`, `isAddressBookEnabled` | ||||||
|
|
||||||
| Methods: | ||||||
| - `init(params)`, `registerCC(webex?)` | ||||||
| - `setOnError(cb)`, `setCCCallback(event, cb)`, `removeCCCallback(event)` | ||||||
| - `refreshTaskList()`, `setCurrentTask(task, isClicked?)` | ||||||
| - `setDeviceType(option)`, `setDialNumber(value)`, `setTeamId(id)` | ||||||
| - `setCurrentState(stateId)`, `setState(state | {reset:true})` | ||||||
| - `getBuddyAgents(mediaType?)`, `getQueues(mediaType?, params?)` | ||||||
| - `getEntryPoints(params?)`, `getAddressBookEntries(params?)` | ||||||
|
|
||||||
| For full types, see src/store.types.ts. | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Dependencies | ||||||
|
|
||||||
| See exact versions in package.json | ||||||
|
|
||||||
| ### Runtime | ||||||
|
|
||||||
| | Package | Purpose | | ||||||
| |---------|---------| | ||||||
| | `@webex/contact-center` | SDK integration (methods/events) | | ||||||
| | `mobx` | Observable state management | | ||||||
|
|
||||||
| ### Dev/Test | ||||||
|
|
||||||
| TypeScript, Jest, ESLint, Webpack (see [package.json](../package.json)). | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Installation | ||||||
|
|
||||||
| ```bash | ||||||
| yarn add @webex/cc-store | ||||||
| ``` | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Additional Resources | ||||||
|
|
||||||
| For detailed store architecture, event flows, and sequence diagrams, see [architecture.md](./architecture.md). | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| _Last Updated: 2025-11-26_ | ||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How does it understand what SDK here is and how SDK is consumed in the Contact Center widgets ? We should add that as well before directly mentioning that it proxies SDK events.
With this text: exposes convenience APIs for fetching lists (queues, entry points, address book), are we talking about what APIs we expose from widgtes or the APIs we are using from SDK ?