# Talk

> Talk is a web app built by react for handling POD chating use cases

[![Preview of Talk][preview_image]][preview_image_url]

## Installation

```
npm install podchatweb --save
```

## Development

####    

```
git clone https://github.com/act1gmr/talk.git
npm install
```

#### Required Post installation (UI kit)

```
git clone https://github.com/act1gmr/talk-ui-kit.git
npm install
```

#### After packages installation:

<pre>
__
  |_ Talk
  |_ Talk-ui-kit
</pre>

```bash
npm run start
```

## Usage

React component:

```jsx
import {ReactTalk} from "podchatweb";

class MyApp extends Component {
  render() {
    const {token} = this.props;
    return <ReactTalk token={token}/>
  }
}
```

### Programmatic calling:

#### Module loader:

```jsx
import {Talk} from "podchatweb"

class MyApp extends Component {

  componentDidMount() {
    const {token} = this.props;
    Talk({token}, "myChat")
  }

  render() {
    return <div id="myChat"/>
  }
}
```

#### Old school:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="dist/index-old-school.js"/>
</head>

<body>
<div id="app"></div>
<script>
    Talk({token: "YOUR_INITIAL_TOKEN", ...ANOTHER_OPTIONS }, "app" /*div ID*/, function (instance) {
        //SET TOKEN WHEN YOU GOT FRESH TOKEN
        instance.setToken("REFRESH_TOKEN")
    });
</script>
</body>
</html>
```

#### Support mode

You can use *Talk* as support mode module with this simple config.<br/><br/>
<img src="https://podspace.pod.ir/api/files/9KN6ZMKN33T44AX1" width="200">

```jsx
import {ReactTalk} from "podchatweb";

class MyApp extends Component {
  render() {
    const {token} = this.props;
    const supportMode = {
      threadId: 0,
      autoShowing: true,
      hideBadge: false,
      onClose() {
        console.log("Closed")
      },
      onOpen() {
        console.log("Opened")
      },
      onLoading(result) {
        //result === false: loading stoper || result === true: loading for getting thread
        console.log("Loading", result)
      },
      onReady(chatFunctions) {
        //store chatFunctions function then you can use it later
        /*
        * you have:
        * chatFunctions.open() || open chat programmatically
        * chatFunctions.close() || close chat programmatically
        * chatFunctions.changeThread(newThreadId) || change thread by thread if
        * chatFunctions.setToken(newThreadId) ||  set token when you got fresh token
        * */
        window.chatFunctions = chatFunctions;
      }
    }
    return <ReactTalk supportMode={supportMode} //SUPPORT THREAD ID
                       token={token}/>
  }
}
```

Or in old school mode:

```html
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="dist/index-old-school.js"></script>
</head>

<body>
<div id="app"></div>
<script>
    window.Talk({
        token: "TOKEN",
        supportMode: {
            threadId: 0,
            autoShowing: true,
            hideBadge: false,
            onClose() {
                console.log("Closed")
            },
            onOpen() {
                console.log("Opened")
            },
            onLoading(result) {
                //result === false: loading stoper || result === true: loading for getting thread
                console.log("Loading", result)
            },
            onReady(chatFunctions) {
                //store chatFunctions function then you can use it later
                /*
                * you have:
                * chatFunctions.open() || open chat programmatically
                * chatFunctions.close() || close chat programmatically
                * chatFunctions.changeThread(newThreadId) || change thread by thread if
                * chatFunctions.setToken(newThreadId) ||  set token when you got fresh token
                * */
                window.chatFunctions = chatFunctions;
            }
        }
    }, "app" /*div ID*/);
</script>
</body>
</html>
```

## Props

<table>
<thead><th>Prop</th><th>Usage</th><th>Type</th></thead>
<tbody>

<tr>
<td>supportMode</td><td> <a href="#support-mode">Mentioned earlier</a> </td><td>Object</td>
</tr>

<tr>
<td>small</td><td>Look like loading Talk on mobile device</td><td>Boolean</td>
</tr>

<tr>
<td>disableNotification</td><td>No notification</td><td>Boolean</td>
</tr>

<tr>
<td>routerLess</td><td>No changes on browser route by chat</td><td>Boolean</td>
</tr>
<tr>
<td>onRetryHook</td><td>While retrying for a new connection if you set this prop chat will call your function and wait for a Promise return. Resolve that promise with a fresh token </td><td>Func</td>
</tr>
<tr>
<td>onSignOutHook</td><td>Click on sign out button and this props will make you a decision maker to what to do after that.</td><td>Func</td>
</tr>
<tr>
<td>onTypingHook</td><td>While typing in a thread you will get the content</td><td>Func</td>
</tr>
<tr>
<td>onNotificationClickHook</td><td>You can make yourself notify when a user click on a browser default notification that generated by chat.</td><td>Func</td>
</tr>
</tbody>
</table>

#### Destroy talk

You can destroy *Talk* by using a global variable<br/><br/>

```js
window.DestroyTalk();
```

## License

This project is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).


[//]: # (LINKS)

[preview_image]: https://podspace.pod.ir/api/files/HWK78J4OSYK6N4WU "Preview of podchat web"

[preview_image_url]: https://podspace.pod.ir/api/files/HWK78J4OSYK6N4WU

[support_mode]: https://podspace.pod.ir/api/files/9KN6ZMKN33T44AX1 "Support mode"

[support_mode_url]: https://podspace.pod.ir/api/files/9KN6ZMKN33T44AX1