docs(station-login): add AI documentation - AGENTS.md and ARCHITECTURE.md#575
Conversation
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
rarajes2
left a comment
rarajes2
left a comment
There was a problem hiding this comment.
Have reviewed AGENTS.md only. Will do a 2nd round of review for ARCHITECTURE.md file
|
|
||
| ## Overview | ||
|
|
||
| The Station Login widget provides a user interface for contact center agents to log in and out of their station. It handles device type selection (Extension, Mobile, Browser), team selection, and agent profile management. The widget integrates with the Webex Contact Center SDK and follows the standard three-layer architecture pattern (Widget → Hook → Component → Store). |
There was a problem hiding this comment.
Text could be improved and some fixes are required on the type of station login. Please refer this.
Also let's use StationLogin as a single word everywhere in this file.
| The Station Login widget enables contact center agents to: | ||
| - **Login to their station** with appropriate device settings | ||
| - **Select their team** from available teams | ||
| - **Choose device type** (Extension, Agent DN, Browser-based) |
There was a problem hiding this comment.
Same here. For device type we use Desktop instead of Browser
| - **Login to their station** with appropriate device settings | ||
| - **Select their team** from available teams | ||
| - **Choose device type** (Extension, Agent DN, Browser-based) | ||
| - **Logout from their station** when ending their shift |
There was a problem hiding this comment.
when ending their shift can be removed or improved with more info such as "to login to another voice mode"
There was a problem hiding this comment.
Sure, we can improve this
| - **Choose device type** (Extension, Agent DN, Browser-based) | ||
| - **Logout from their station** when ending their shift | ||
| - **Update their profile settings** while logged in (profile mode) | ||
| - **Handle multiple login scenarios** with continuation prompts |
There was a problem hiding this comment.
Don't think this is possible
| - **Select their team** from available teams | ||
| - **Choose device type** (Extension, Agent DN, Browser-based) | ||
| - **Logout from their station** when ending their shift | ||
| - **Update their profile settings** while logged in (profile mode) |
There was a problem hiding this comment.
Update their profile settings --> change station login mode.
This handles logout and login to another mode implicitly.
| import { StationLogin } from '@webex/cc-station-login'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import store from '@webex/cc-store'; |
| const { isAgentLoggedIn, teams, deviceType } = store; | ||
|
|
||
| if (isAgentLoggedIn) { | ||
| return <AgentDesktop />; |
There was a problem hiding this comment.
What is <AgentDesktop /> ?
There was a problem hiding this comment.
This is incorrect, will fix this
| | Prop | Type | Required | Default | Description | | ||
| |------|------|----------|---------|-------------| | ||
| | `profileMode` | `boolean` | Yes | - | Shows save button (true) or login/logout (false) | | ||
| | `onLogin` | `() => void` | No | - | Callback when login succeeds | | ||
| | `onLogout` | `() => void` | No | - | Callback when logout succeeds | | ||
| | `onCCSignOut` | `() => void` | No | - | Callback when CC sign out is triggered | | ||
| | `onSaveStart` | `() => void` | No | - | Callback when profile save starts | | ||
| | `onSaveEnd` | `(success: boolean) => void` | No | - | Callback when profile save ends | | ||
| | `teamId` | `string` | No | - | Default team ID | | ||
| | `doStationLogout` | `boolean` | No | `true` | Perform station logout on CC sign out | |
There was a problem hiding this comment.
Please fix the default values where required
There was a problem hiding this comment.
Updated only profileMode was missing
|
|
||
| ```bash | ||
| # Install as part of contact center widgets | ||
| yarn add @webex/cc-station-login |
There was a problem hiding this comment.
Don't think we are allowing individual widgets to be installed
There was a problem hiding this comment.
We can do this. Yes there are pre-requisite to this, but this is possible.
There was a problem hiding this comment.
Yes, but will we ever use it this way ? if we document it like this Agent will write code referencing this so, please see if want to keep it like this.
| yarn add @webex/cc-station-login | ||
|
|
||
| # Or install the entire widgets bundle | ||
| yarn add @webex/cc-widgets |
There was a problem hiding this comment.
We should also mention npm
|
|
||
| ```typescript | ||
| // Check if store has CC instance | ||
| import store from '@webex/cc-store'; |
There was a problem hiding this comment.
This should be import from @webex/cc-widgets
| const cc = await ContactCenter.init({ token, region }); | ||
| store.setCC(cc); |
There was a problem hiding this comment.
This needs to be fixed
| console.log('Logger:', store.logger); // Should be defined | ||
|
|
||
| // Enable detailed logging | ||
| store.logger.setLevel('debug'); |
There was a problem hiding this comment.
Store doesnt have this
There was a problem hiding this comment.
Missing logger is not a possible cause
| │ └── station-login/ | ||
| │ └── index.tsx # Widget tests | ||
| ├── ai-docs/ | ||
| │ ├── agent.md # Overview, examples, usage |
|
|
||
| ## Component Overview | ||
|
|
||
| The Station Login widget follows the three-layer architecture pattern: **Widget → Hook → Component → Store → SDK**. This architecture separates concerns between state management, business logic, and presentation. |
There was a problem hiding this comment.
"Station Login" --> "StationLogin"
Applicable everywhere in this file
|
|
||
| ## Component Overview | ||
|
|
||
| The Station Login widget follows the three-layer architecture pattern: **Widget → Hook → Component → Store → SDK**. This architecture separates concerns between state management, business logic, and presentation. |
There was a problem hiding this comment.
three-layer architecture pattern: Widget → Hook → Component → Store → SDK.
This sentence is bit confusing. We should improve and make it easy to understand.
|
|
||
| | Layer | Component | File | Config/Props | State | Callbacks | Events | Tests | | ||
| |-------|-----------|------|--------------|-------|-----------|--------|-------| | ||
| | **Widget** | `StationLogin` | `src/station-login/index.tsx` | `StationLoginProps` | N/A (passes through) | `onLogin`, `onLogout`, `onCCSignOut`, `onSaveStart`, `onSaveEnd` | SDK events (via store) | `tests/station-login/index.tsx` | |
There was a problem hiding this comment.
Values for the config/props are case sensitive. I think the values are populated with the types instead of the actual props names. Please check all the values once
There was a problem hiding this comment.
Right, Ive updated this
|
|
||
| | Component | SDK Methods Used | SDK Events Subscribed | Store Methods Used | | ||
| |-----------|------------------|----------------------|-------------------| | ||
| | **useStationLogin Hook** | `stationLogin()`, `stationLogout()`, `updateAgentProfile()`, `deregister()` | `AGENT_STATION_LOGIN_SUCCESS`, `AGENT_LOGOUT_SUCCESS` | `setCCCallback()`, `removeCCCallback()`, `setShowMultipleLoginAlert()`, `registerCC()` | |
There was a problem hiding this comment.
"Hook" can be changed to "hook" and moved out of bold marker
| | Component | SDK Methods Used | SDK Events Subscribed | Store Methods Used | | ||
| |-----------|------------------|----------------------|-------------------| | ||
| | **useStationLogin Hook** | `stationLogin()`, `stationLogout()`, `updateAgentProfile()`, `deregister()` | `AGENT_STATION_LOGIN_SUCCESS`, `AGENT_LOGOUT_SUCCESS` | `setCCCallback()`, `removeCCCallback()`, `setShowMultipleLoginAlert()`, `registerCC()` | | ||
| | **Store** | All SDK methods | All SDK events | N/A | |
There was a problem hiding this comment.
Can we update with more specific details ?
There was a problem hiding this comment.
Ideally we would want the Store methods to be looked up in the store/ai-docs/agents.md, Thats the the reference is there. So we are consciously avoiding to add SDK methods and events here
| ├── package.json # Dependencies and scripts | ||
| ├── tsconfig.json # TypeScript config | ||
| ├── webpack.config.js # Webpack build config | ||
| ├── jest.config.js # Jest test config | ||
| └── eslint.config.mjs # ESLint config |
There was a problem hiding this comment.
We also have babel.config.js file
| ```mermaid | ||
| graph TB | ||
| subgraph "Presentation Layer" | ||
| Widget[StationLogin Widget] | ||
| Component[StationLoginComponent] | ||
| end | ||
|
|
||
| subgraph "Business Logic Layer" | ||
| Hook[useStationLogin Hook<br/>helper.ts] | ||
| end | ||
|
|
||
| subgraph "State Management Layer" | ||
| Store[Store Singleton] | ||
| end | ||
|
|
||
| subgraph "SDK Layer" |
There was a problem hiding this comment.
Let's add a screenshot of this flow in the PR description
| ```mermaid | ||
| sequenceDiagram | ||
| actor User | ||
| participant Widget as StationLogin Widget | ||
| participant Hook as useStationLogin Hook | ||
| participant Component as StationLoginComponent | ||
| participant Store | ||
| participant SDK | ||
|
|
||
| User->>Widget: Load widget | ||
| activate Widget | ||
| Widget->>Hook: useStationLogin() |
There was a problem hiding this comment.
Same here, we can add the screenshot in the PR description.
Applicable for all the mermaid sequence diagrams
|
|
||
| --- | ||
|
|
||
| ## Troubleshooting Guide |
There was a problem hiding this comment.
Do we want to keep this inside the architecture file ?
There was a problem hiding this comment.
We have kept all the troubleshooting in the architecture. This is just as a POC, if we find that troubleshooting is not working in architecture.md then we will move it somewhere else, but for now we have made a decision to put it in the architecture.md
…o docs/ai-docs-station-login
3 participants
COMPLETES N/A - Documentation Enhancement
This pull request addresses
Adding AI-optimized documentation for the station-login widget to help AI assistants understand the agent login workflow with team and device selection.
by making the following changes
packages/contact-center/station-login/ai-docs/AGENTS.md- Usage documentation, props, and examplespackages/contact-center/station-login/ai-docs/ARCHITECTURE.md- Technical implementation and component flowChange Type
The following scenarios were tested
The GAI Coding Policy And Copyright Annotation Best Practices
Checklist before merging
Make sure to have followed the contributing guidelines before submitting.