How to use SMS with a Chat Messaging Service

$ git clone https://github.com/GetStream/stream-chat-chatty-web web

$ cd web && yarn

REACT_APP_STREAM_KEY=YOUR_STREAM_KEY
REACT_APP_AUTH_ENDPOINT=YOUR_AUTH_ENDPOINT
REACT_APP_TWILIO_NUMBER=YOUR_TWILIO_NUMBER
REACT_APP_CHANNEL_TYPE=messaging
REACT_APP_CHANNEL_NAME=chatty-kathy

$ brew install mongodb

$ brew services start mongodb

mongodb://localhost

$ git clone git@github.com:GetStream/stream-chat-chatty-serverless.git serverless

$ cd serverless && yarn

environment:
    DB_CONN: YOUR_MONGODB_CONNECTION_STRING
    DB_NAME: CHATTY
    DB_COL: users
    TWILIO_SID: YOUR_TWILIO_SID
    TWILIO_TOKEN: YOUR_TWILIO_TOKEN
    TWILIO_NUMBER: YOUR_TWILIO_NUMBER
    STREAM_KEY: YOUR_STREAM_KEY
    STREAM_SECRET: YOUR_STREAM_SECRET
    CHANNEL_TYPE: messaging
    CHANNEL_NAME: chatty-kathy

$ ngrok http 8000

import React, { Component } from "react";
import InputMask from "react-input-mask";
import mobile from "is-mobile";
import axios from "axios";

import "./App.css";

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      name: "",
      number: ""
    };

    this.initStream = this.initStream.bind(this);
  }

  async initStream() {
    await this.setState({
      loading: true
    });

    const auth = await axios.post(process.env.REACT_APP_AUTH_ENDPOINT, {
      name: this.state.name
        .split(" ")
        .join("_")
        .toLowerCase(),
      number: this.state.number
    });

    if (mobile()) {
      return window.open(
        `sms://${process.env.REACT_APP_TWILIO_NUMBER}?body=Hi, ${
          auth.data.user.name
        } here! How is everyone doing?`,
        "_system"
      );
    }

    sessionStorage.setItem("userData", JSON.stringify(auth.data.user));
    sessionStorage.setItem("tokenData", auth.data.token);

    await this.setState({
      loading: false
    });

    this.props.history.push("/");
  }

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  render() {
    return (
      <div className="login-root">
        <div className="login-card">
          <h1>Chatty</h1>
          <InputMask
            type="text"
            placeholder="Username"
            name="name"
            onChange={e => this.handleChange(e)}
          />
          <br />
          <InputMask
            {...this.props}
            type="tel"
            placeholder="Phone Number"
            name="number"
            onChange={e => this.handleChange(e)}
            mask="+1\ 999-999-9999"
            maskChar=" "
          />
          <br />
          <button onClick={this.initStream}>Start</button>
        </div>
      </div>
    );
  }
}

export default Login;

import React, { Component } from "react";
import {
  Chat,
  Channel,
  ChannelHeader,
  Thread,
  Window,
  MessageList,
  MessageInput
} from "stream-chat-react";
import { StreamChat } from "stream-chat";

import "./App.css";
import "stream-chat-react/dist/css/index.css";

class App extends Component {
  constructor(props) {
    super(props);

    const { id, name, image } = JSON.parse(sessionStorage.getItem("userData"));

    this.client = new StreamChat(process.env.REACT_APP_STREAM_KEY);

    this.client.setUser(
      {
        id,
        name,
        image
      },
      sessionStorage.getItem("tokenData")
    );

    this.channel = this.client.channel(
      process.env.REACT_APP_CHANNEL_TYPE,
      process.env.REACT_APP_CHANNEL_NAME,
      {
        image: "https://i.imgur.com/LmW57kB.png",
        name: "Kathy is Feeling Chatty About Kanye"
      }
    );
  }

  render() {
    return (
      <Chat client={this.client} theme={"messaging light"}>
        <Channel channel={this.channel}>
          <Window>
            <ChannelHeader />
            <MessageList />
            <MessageInput />
          </Window>
          <Thread />
        </Channel>
      </Chat>
    );
  }
}

export default App;

async function connect(uri) {
    // check if database connection is cached
    if (cached && cached.serverConfig.isConnected()) {
        return Promise.resolve(cached);
    }

    // database name
    const dbName = process.env.DB_NAME;

    // connect to database
    return MongoClient.connect(uri, { useNewUrlParser: true }).then(client => {
        // store in cache and return cached variable for re-use
        cached = client.db(dbName);
        return cached;
    });
}

export const auth = async event => {
    // extract params from body
    const { name, number } = JSON.parse(event.body);

    // establish database connection (cached)
    const db = await connect(process.env.DB_CONN);

    const phoneNumber = phone(number)[0];

    // initialize stream chat
    const stream = new StreamChat(
        process.env.STREAM_KEY,
        process.env.STREAM_SECRET
    );

    if (!name || !number) {
        // respond with 200
        return {
            statusCode: 400,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify({ error: 'Missing name or number.' }),
        };
    }

    try {
        // create or update the user based on their phone number
        const { value } = await db
            .collection(process.env.DB_COL)
            .findOneAndUpdate(
                {
                    number: phoneNumber,
                },
                {
                    $setOnInsert: {
                        name,
                        number: phoneNumber,
                        active: true,
                        updated: new Date(),
                    },
                },
                {
                    upsert: true, // important so that it creates a user if they don't exist
                    returnOriginal: false, // important so that it always returns the data
                }
            );

        // add index to phone number
        await db
            .collection(process.env.DB_COL)
            .createIndex({ number: 1 }, { unique: true });

        // setup user object for storage
        const user = {
            id: value._id.toString(),
            name: value.name,
            number: value.number,
            role: 'user',
            image: 'https://i.imgur.com/Y7reRnC.png',
        };

        // generate token and update users
        const token = stream.createToken(user.id);
        await stream.updateUsers([user]);

        // respond with 200
        return {
            statusCode: 200,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify({ user, token }),
        };
    } catch (error) {
        console.log(error);
        return error;
    }
};

export const sms = async event => {
    // extract body (querystring format coming from twilio)
    const { From, Body } = qs.parse(event.body);

    // establish database connection
    const db = await connect(process.env.DB_CONN);

    // initialize twilio client
    const client = new twilio(process.env.TWILIO_SID, process.env.TWILIO_TOKEN);

    // initialize stream client
    const stream = new StreamChat(
        process.env.STREAM_KEY,
        process.env.STREAM_SECRET
    );

    // create the channel
    const channel = stream.channel(
        process.env.CHANNEL_TYPE,
        process.env.CHANNEL_NAME
    );

    try {
        // lookup the user based on their incoming phone number
        const user = await db.collection(process.env.DB_COL).findOne({
            number: From,
        });

        // only trigger response if the incoming message includes start
        if (Body && Body.toLowerCase().includes('start')) {
            await client.messages.create({
                body: 'Get started at https://bit.ly/stream-chatty',
                to: From,
                from: process.env.TWILIO_NUMBER,
            });

            // respond with 200
            return {
                statusCode: 200,
                headers: {
                    'Access-Control-Allow-Origin': '*',
                },
                body: JSON.stringify({ status: 'OK' }),
            };
        }

        // deactivate user
        if (Body && Body.toLowerCase().includes('stop')) {
            // set user active status to false so they don't get any additional texts
            await db
                .collection(process.env.DB_COL)
                .updateOne({ _id: From }, { $set: { active: false } });

            // let the user know that they have been removed
            await client.messages.create({
                body: 'Sorry to see you go!', // message body for sms
                to: From, // incoming twilio number
                from: process.env.TWILIO_NUMBER, // twilio outbound phone number
            });

            // respond with 200
            return {
                statusCode: 200,
                headers: {
                    'Access-Control-Allow-Origin': '*',
                },
                body: JSON.stringify({ status: 'OK' }),
            };
        }

        // update acting user
        await stream.updateUsers([
            {
                id: user._id,
                name: user.name,
                role: 'user',
            },
        ]);

        // send a message
        await channel.sendMessage({
            text: Body,
            user: {
                id: user._id,
                name: user.name,
                image: 'https://i.imgur.com/Y7reRnC.png',
            },
            number: user.number,
            context: 'sms',
        });

        // respond with 200
        return {
            statusCode: 200,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify({ status: 'OK' }),
        };
    } catch (error) {
        console.log(error);
        return error;
    }
};

export const chat = async event => {
    // extract the message body and setup the database
    const data = JSON.parse(event.body);

    // establish database connection (cached)
    const db = await connect(process.env.DB_CONN);

    // initialize twilio messages
    const client = new twilio(process.env.TWILIO_SID, process.env.TWILIO_TOKEN);

    // initialize stream chat
    const stream = new StreamChat(
        process.env.STREAM_KEY,
        process.env.STREAM_SECRET
    );

    // create the channel
    const channel = stream.channel(
        process.env.CHANNEL_TYPE,
        process.env.CHANNEL_NAME
    );

    try {
        // only allow events that are not read, etc.
        if (data.type !== 'messages.read' && data.message) {
            const message = data.message;

            // and only allow @ mentions (check if mentioned users array has mentions)
            if (message.mentioned_users.length > 0) {
                const mentioned = message.mentioned_users;

                // loop through all of the messaged users
                for (const mention in mentioned) {
                    // run a quick lookup against their user id
                    const user = await db
                        .collection(process.env.DB_COL)
                        .findOne({
                            _id: new ObjectID(mentioned[mention].id),
                        });

                    // only attempt to send a message if the user is active
                    if (user.active && message.user.id !== user._id) {
                        // send sms with twilio
                        await client.messages.create({
                            body: `Chat from @${data.user.name}:\n\n${
                                message.text
                            }`, // from user with message text on newline
                            to: user.number, // phone number from database
                            from: process.env.TWILIO_NUMBER, // twilio outbound phone number
                        });
                    }
                }
            }

            if (data.user.id !== 'kathy') {
                // send a random response
                const random = await axios.get('https://api.kanye.rest');

                // send a message
                await channel.sendMessage({
                    user: {
                        id: 'kathy',
                        name: 'Chatty Kathy',
                        image: 'https://i.imgur.com/LmW57kB.png',
                    },
                    text: `@${data.user.name} Here's a Kayne quote for you – "${
                        random.data.quote
                    }"`,
                    mentioned_users: [data.user.id],
                    context: 'random',
                });
            }
        }

        // respond with 200
        return {
            statusCode: 200,
            headers: {
                'Access-Control-Allow-Origin': '*',
            },
            body: JSON.stringify({ status: 200 }),
        };
    } catch (error) {
        console.log(error);
        return error;
    }
};