<commit_before># Webex Teams Recents Widget _(@ciscospark/widget-recents)_

> The Webex Teams Recents Widget allows developers to easily incorporate Cisco Webex Teams (formerly Cisco Spark) Recents list and events into an application.

## Table of Contents

- [Background](#background)
- [Install](#install)
  - [CDN](#cdn)
  - [Build from Source](#build-from-source)
- [Usage](#usage)
  - [Quick Start](#quick-start)
  - [HTML](#html)
    - [Data API](#data-api)
    - [Browser Globals](#browser-globals)
  - [JSX](#jsx)
  - [Events](#events)
- [Browser Support](#browser-support)

## Background

This widget handles coordination between your application and the Webex Teams APIs, and provides components of the Webex Teams recents list experience without having to build all of the front end UI yourself. Furthermore, the widget functions as a central point of contact for all other widgets by providing a robust [events api](#events) that allows a developer to listen to realtime events on the Webex platform and react to those events.

Our widget is built using [React](https://github.com/facebook/react), [Redux](https://github.com/reactjs/redux), and the [Webex Teams JavaScript SDK](https://github.com/webex/spark-js-sdk).

This widget supports:

- Listing all Spaces that the authenticated user is in.
- Listening for incoming messages, calls, and membership events and provided those details to the developer.

## Install

Depending on how comfortable you are with these frameworks, there are are a number of ways you can "install" our code.

### Webex for Developers

If you haven't already, go to Cisco Webex for Developers (<https://developer.webex.com>) and sign up for an account. Once you've created an account you can get your developer access [here](https://developer.webex.com/getting-started.html#authentication).

When you want to eventually create an integration and have your own users take advantage of the widget, you'll need to create an integration with the following scopes:

```txt
spark:all
```

Head over to the Webex for Developers Documentation for more information about how to setup OAuth for your app: <https://developer.webex.com/authentication.html>

### CDN

Using our CDN requires the least amount of work to get started. Add the following into your HTML file:

```html
<!-- Production compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/production/main.css">

<!-- Production compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/production/bundle.js"></script>
```

For the latest builds that are pulled from the head of the master branch:

```html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/latest/main.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/latest/bundle.js"></script>
```

### Build from Source

1. Follow these instructions to checkout and build the `react-ciscospark` repo <https://github.com/webex/react-ciscospark/blob/master/README.md>

1. To build the Recents Widget, run the following from the root directory:

  ```sh
  npm run build:package widget-recents
  ```

## Usage

### Quick Start

If you would just like to get running immediately, follow these instructions to get a webpack-dev-server running with the widget.

1. Create a `.env` file in the root of the React project with the following lines, replacing the Xs with the appropriate value:

    ```txt
    CISCOSPARK_ACCESS_TOKEN=XXXXXXXXXXXXXXX
    ```

1. From the root directory run: `npm run start:package widget-recents`

### Configuration

When loading the widgets there are some configuration options you can provide:

**Authentication methods:**

| Name | Data API  | Description |
|:--|:-------|---|
| `accessToken` | `data-access-token` | Access token for the user account initiating the messaging session. <br>For testing purposes you can use a developer access token from <https://developer.webex.com>. |
| `guestToken` | `data-guest-token` | Guest Access token for the user account initiating the messaging session. <br>A guest issuer application is required to generate a guest token. <https://developer.webex.com/guest-issuer.html>. <br>Currently in *restricted access*|

**Optional configurations:**

| Name | Data API  | Description |
|:--|:-------|---|
| `logLevel` | `data-log-level` | (default: `silent`) When present, widget will log debug information to console. This can be set to: `error`, `warn`, `debug`, `info`, `trace`, or `silent` |
| `enableSpaceListFilter` | `data-enable-space-list-filter` | (default: true) This enables a search term input box for filtering the recents widget's space list.  To disable, set this to `false`. |
| `spaceTypeFilter` | `data-space-type-filter` | (default: `all`)  This filters the list of spaces by type. This can be set to: `direct` for one-on-one conversations, `all` for everything, or `group` for group spaces. |

### HTML

The easiest way to get the Webex Teams Recents Widget into your web site is to add the built resources and attach data attributes to your a container.

If you're using our CDN, skip to the next section.

- Copy the resources in the `dist` directory to own project.
- Add a `<script />` tag to your page to include the `bundle.js`
- Add a `<link />` tag to include `main.css`

#### Data API

If you would like to embed with the widget without any additional behaviors into your page, use this data api. The `div` containing our `data-toggle` attribute must exist on the page before our javascript bundle loads.

Create a container where you would like to embed the widget and add the required [configuration options](#configuration). Be sure to include `data-toggle="ciscospark-recents"`.
<commit_msg>docs(widget-recents): remove spaceTypeFilter config<commit_after># Webex Teams Recents Widget _(@ciscospark/widget-recents)_

> The Webex Teams Recents Widget allows developers to easily incorporate Cisco Webex Teams (formerly Cisco Spark) Recents list and events into an application.

## Table of Contents

- [Background](#background)
- [Install](#install)
  - [CDN](#cdn)
  - [Build from Source](#build-from-source)
- [Usage](#usage)
  - [Quick Start](#quick-start)
  - [HTML](#html)
    - [Data API](#data-api)
    - [Browser Globals](#browser-globals)
  - [JSX](#jsx)
  - [Events](#events)
- [Browser Support](#browser-support)

## Background

This widget handles coordination between your application and the Webex Teams APIs, and provides components of the Webex Teams recents list experience without having to build all of the front end UI yourself. Furthermore, the widget functions as a central point of contact for all other widgets by providing a robust [events api](#events) that allows a developer to listen to realtime events on the Webex platform and react to those events.

Our widget is built using [React](https://github.com/facebook/react), [Redux](https://github.com/reactjs/redux), and the [Webex Teams JavaScript SDK](https://github.com/webex/spark-js-sdk).

This widget supports:

- Listing all Spaces that the authenticated user is in.
- Listening for incoming messages, calls, and membership events and provided those details to the developer.

## Install

Depending on how comfortable you are with these frameworks, there are are a number of ways you can "install" our code.

### Webex for Developers

If you haven't already, go to Cisco Webex for Developers (<https://developer.webex.com>) and sign up for an account. Once you've created an account you can get your developer access [here](https://developer.webex.com/getting-started.html#authentication).

When you want to eventually create an integration and have your own users take advantage of the widget, you'll need to create an integration with the following scopes:

```txt
spark:all
```

Head over to the Webex for Developers Documentation for more information about how to setup OAuth for your app: <https://developer.webex.com/authentication.html>

### CDN

Using our CDN requires the least amount of work to get started. Add the following into your HTML file:

```html
<!-- Production compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/production/main.css">

<!-- Production compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/production/bundle.js"></script>
```

For the latest builds that are pulled from the head of the master branch:

```html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://code.s4d.io/widget-recents/latest/main.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.s4d.io/widget-recents/latest/bundle.js"></script>
```

### Build from Source

1. Follow these instructions to checkout and build the `react-ciscospark` repo <https://github.com/webex/react-ciscospark/blob/master/README.md>

1. To build the Recents Widget, run the following from the root directory:

  ```sh
  npm run build:package widget-recents
  ```

## Usage

### Quick Start

If you would just like to get running immediately, follow these instructions to get a webpack-dev-server running with the widget.

1. Create a `.env` file in the root of the React project with the following lines, replacing the Xs with the appropriate value:

    ```txt
    CISCOSPARK_ACCESS_TOKEN=XXXXXXXXXXXXXXX
    ```

1. From the root directory run: `npm run start:package widget-recents`

### Configuration

When loading the widgets there are some configuration options you can provide:

**Authentication methods:**

| Name | Data API  | Description |
|:--|:-------|---|
| `accessToken` | `data-access-token` | Access token for the user account initiating the messaging session. <br>For testing purposes you can use a developer access token from <https://developer.webex.com>. |
| `guestToken` | `data-guest-token` | Guest Access token for the user account initiating the messaging session. <br>A guest issuer application is required to generate a guest token. <https://developer.webex.com/guest-issuer.html>. <br>Currently in *restricted access*|

**Optional configurations:**

| Name | Data API  | Description |
|:--|:-------|---|
| `logLevel` | `data-log-level` | (default: `silent`) When present, widget will log debug information to console. This can be set to: `error`, `warn`, `debug`, `info`, `trace`, or `silent` |
| `enableSpaceListFilter` | `data-enable-space-list-filter` | (default: true) This enables a search term input box for filtering the recents widget's space list.  To disable, set this to `false`. |

### HTML

The easiest way to get the Webex Teams Recents Widget into your web site is to add the built resources and attach data attributes to your a container.

If you're using our CDN, skip to the next section.

- Copy the resources in the `dist` directory to own project.
- Add a `<script />` tag to your page to include the `bundle.js`
- Add a `<link />` tag to include `main.css`

#### Data API

If you would like to embed with the widget without any additional behaviors into your page, use this data api. The `div` containing our `data-toggle` attribute must exist on the page before our javascript bundle loads.

Create a container where you would like to embed the widget and add the required [configuration options](#configuration). Be sure to include `data-toggle="ciscospark-recents"`.

{'fraction_non_alphanumeric': 0.10756170138281113, 'fraction_numerical': 0.0014003150708909505, 'mean_word_length': 4.359756097560975, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 45, 'https://': 26, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1215295', 'n_tokens_mistral': 3216, 'n_tokens_neox': 3079, 'n_words': 1386}