15 |

18 |

19 |

20 |

21 | {title} 22 |

23 |

24 |

25 |

26 |

27 |

31 |           {children}
32 |         </div>
33 |       </div>
34 |     </div>
35 |   </div>
36 | )
37 |

--------------------------------------------------------------------------------
/pages/api/call.ts:
--------------------------------------------------------------------------------
 1 | import { startEndpoint, stopEndpoint } from '../../integrations/symbl/utils'
 2 | 
 3 | async function onSpeechDetected(data: any) {
 4 |   const { type } = data
 5 |   console.log('Response type:', type)
 6 | }
 7 | 
 8 | export default (req: any, res: any) => {
 9 |   res.statusCode = 200
10 |   res.setHeader('Content-Type', 'application/json')
11 |   const {
12 |     phoneNumber,
13 |     dtmf,
14 |     type,
15 |     summaryEmails,
16 |     start,
17 |     connectionId,
18 |     insightTypes,
19 |   } = JSON.parse(req.body)
20 | 
21 |   if (start) {
22 |     console.log('Calling ', phoneNumber)
23 |     startEndpoint(
24 |       { phoneNumber, dtmf, type, summaryEmails, insightTypes },
25 |       onSpeechDetected
26 |     ).then((connectionId: string) => {
27 |       console.log('Connection Started', connectionId)
28 |       res.end(JSON.stringify({ connectionId }))
29 |     })
30 |   } else {
31 |     if (connectionId) {
32 |       console.log('Connection Stopped', connectionId)
33 |       stopEndpoint(connectionId).then((connection) => {
34 |         res.end(JSON.stringify(connection))
35 |       })
36 |     }
37 |   }
38 | }
39 |

--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | // _document is only rendered on the server side and not on the client side
 2 | // Event handlers like onClick can't be added to this file
 3 | 
 4 | // ./pages/_document.js
 5 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 6 | 
 7 | // Required for @emotion/css
 8 | import { extractCritical } from '@emotion/server'
 9 | 
10 | export default class MyDocument extends Document {
11 |   static async getInitialProps(ctx: any) {
12 |     const initialProps = await Document.getInitialProps(ctx)
13 |     const page = await ctx.renderPage()
14 |     const styles = extractCritical(page.html)
15 |     return { ...initialProps, ...page, ...styles }
16 |   }
17 | 
18 |   props: any
19 | 
20 |   render() {
21 |     return (
22 |       <Html lang="en">
23 |         <Head>
24 |           <style
25 |             data-emotion-css={this.props.ids.join(' ')}
26 |             dangerouslySetInnerHTML={{ __html: this.props.css }}
27 |           />
28 |           <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
29 |         </Head>
30 |         <body>
31 |           <Main />
32 |           <NextScript />
33 |         </body>
34 |       </Html>
35 |     )
36 |   }
37 | }
38 |

--------------------------------------------------------------------------------
/components/ProtectedPage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css } from '@emotion/css'
 3 | import tw from '@tailwindcssinjs/macro'
 4 | import { Button } from './Button'
 5 | import { useAuth } from '../hooks'
 6 | 
 7 | export const ProtectedPage: React.FC = ({ children }) => {
 8 |   const { token, setToken } = useAuth()
 9 | 
10 |   async function loginToSymbl() {
11 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
12 |       method: 'POST',
13 |       headers: {
14 |         'Content-Type': 'application/json',
15 |       },
16 |       mode: 'cors',
17 |       body: JSON.stringify({
18 |         type: 'application',
19 |         appId: process.env.APP_ID,
20 |         appSecret: process.env.APP_SECRET,
21 |       }),
22 |     })
23 |     const json = await response.json()
24 |     console.log('Access Token is: ', json)
25 |     setToken(json.accessToken)
26 |   }
27 | 
28 |   if (!token) {
29 |     return (
30 |       <div className={css(tw`h-screen mt-6`)}>
31 |         <div className={css(tw`text-gray-100`)}>
32 |           Credentials are within next-config.js file. Log in to generate access
33 |           token
34 |         </div>
35 |         <Button onClick={() => loginToSymbl()}>Log In</Button>
36 |       </div>
37 |     )
38 |   }
39 |   return <>{children}</>
40 | }
41 |

--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "plugins": ["@typescript-eslint"],
 4 |   "extends": [
 5 |     "eslint:recommended",
 6 |     "plugin:react/recommended",
 7 |     "plugin:@typescript-eslint/recommended"
 8 |     // Uncomment the following lines to enable eslint-config-prettier
 9 |     // Is not enabled right now to avoid issues with the Next.js repo
10 |     // "prettier",
11 |     // "prettier/@typescript-eslint"
12 |   ],
13 |   "env": {
14 |     "es6": true,
15 |     "browser": true,
16 |     "jest": true,
17 |     "node": true
18 |   },
19 |   "rules": {
20 |     "react/react-in-jsx-scope": 0,
21 |     "react/display-name": 0,
22 |     "react/prop-types": 0,
23 |     "@typescript-eslint/explicit-function-return-type": 0,
24 |     "@typescript-eslint/explicit-member-accessibility": 0,
25 |     "@typescript-eslint/indent": 0,
26 |     "@typescript-eslint/member-delimiter-style": 0,
27 |     "@typescript-eslint/no-explicit-any": 0,
28 |     "@typescript-eslint/no-var-requires": 0,
29 |     "@typescript-eslint/no-use-before-define": 0,
30 |     "@typescript-eslint/explicit-module-boundary-types": 0,
31 |     "@typescript-eslint/no-unused-vars": [
32 |       1,
33 |       {
34 |         "argsIgnorePattern": "^_"
35 |       }
36 |     ],
37 |     "no-console": [
38 |       2,
39 |       {
40 |         "allow": ["log", "warn", "error"]
41 |       }
42 |     ]
43 |   }
44 | }
45 |

--------------------------------------------------------------------------------
/components/UrlFileToggle.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css } from '@emotion/css'
 3 | import tw from '@tailwindcssinjs/macro'
 4 | 
 5 | type UrlFileToggle = {
 6 |   type: string
 7 |   setType: (type: string) => void
 8 | }
 9 | 
10 | export const UrlFileToggle: React.FC<UrlFileToggle> = ({ type, setType }) => {
11 |   return (
12 |     <label
13 |       htmlFor="toogleA"
14 |       className={css(tw`p-4 flex items-center cursor-pointer`)}
15 |     >
16 |       <div className={css(tw`relative`)}>
17 |         <input
18 |           id="toogleA"
19 |           type="checkbox"
20 |           className={css(tw`hidden`)}
21 |           onChange={() => (type === 'url' ? setType('file') : setType('url'))}
22 |         />
23 |         <div
24 |           className={css(tw`w-10 h-4 bg-gray-400 rounded-full shadow-inner`)}
25 |         ></div>
26 |         <div
27 |           className={css(
28 |             tw`absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0`,
29 |             `top: -.25rem;
30 |             left: -.25rem;
31 |             transition: all 0.3s ease-in-out;`,
32 |             type === 'file'
33 |               ? ``
34 |               : `  transform: translateX(100%);
35 |             background-color: #48bb78;`
36 |           )}
37 |         ></div>
38 |       </div>
39 |       <div className={css(tw`ml-3 text-blue-400 font-medium`)}>Url</div>
40 |     </label>
41 |   )
42 | }
43 |

--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import Head from 'next/head'
 3 | import '../styles/base.css'
 4 | import { AppProps } from 'next/app'
 5 | import { css } from '@emotion/css'
 6 | import { Header } from '../components/Header'
 7 | import { Container } from '../components/Container'
 8 | import { ConnectionProvider } from '../hooks'
 9 | import tw from '@tailwindcssinjs/macro'
10 | import { apiBase, appId, appSecret } from '../integrations/symbl/config'
11 | import { SymblProvider } from '@symblai/react-elements'
12 | 
13 | export default function MyApp({ Component, pageProps }: AppProps) {
14 |   const [menuOpen, setMenuOpen] = useState(false)
15 |   return (
16 |     <ConnectionProvider>
17 |       <Head>
18 |         <title>Symbl.ai NextJS app</title>
19 |       </Head>
20 |       <div
21 |         onClick={() => {
22 |           setMenuOpen(false)
23 |         }}
24 |         className={[
25 |           'bg-black-alt',
26 |           css(tw`min-h-screen font-sans leading-normal tracking-normal`),
27 |         ].join(' ')}
28 |       >
29 |         <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
30 |         <Container>
31 |           <SymblProvider
32 |             config={{
33 |               appId,
34 |               appSecret,
35 |               basePath: apiBase,
36 |             }}
37 |           >
38 |             <Component {...pageProps} />
39 |           </SymblProvider>
40 |         </Container>
41 |       </div>
42 |     </ConnectionProvider>
43 |   )
44 | }
45 |

--------------------------------------------------------------------------------
/components/VideoMessages.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { useMessages, useConversation } from '../hooks'
 3 | import { css } from '@emotion/css'
 4 | import tw from '@tailwindcssinjs/macro'
 5 | import { Card, Button } from '../components'
 6 | type VideoMessagesProps = {
 7 |   setPlaybackTime: any
 8 | }
 9 | export const VideoMessages: React.FC<VideoMessagesProps> = ({
10 |   setPlaybackTime,
11 | }) => {
12 |   const { conversationData } = useConversation()
13 |   const { data: messages, fetchData } = useMessages()
14 |   const transcriptItemClicked = async (data: any) => {
15 |     console.log('on list item click', data, setPlaybackTime)
16 |     if (data && data.length > 2) {
17 |       setPlaybackTime(data[2])
18 |     }
19 |   }
20 | 
21 |   return (
22 |     <Card title="Transcript">
23 |       <div>
24 |         <ul>
25 |           {messages &&
26 |             (messages as any[]).map((data, index) => (
27 |               <div
28 |                 className={css(tw`text-blue-400 cursor-pointer`)}
29 |                 onClick={() => transcriptItemClicked(data)}
30 |                 key={`data-${index}`}
31 |               >
32 |                 {data[1]}
33 |               </div>
34 |             ))}
35 |         </ul>
36 |         {conversationData && conversationData.conversationId ? (
37 |           <Button
38 |             onClick={() =>
39 |               fetchData(conversationData ? conversationData.conversationId : '')
40 |             }
41 |           >
42 |             Show transcription
43 |           </Button>
44 |         ) : null}
45 |       </div>
46 |     </Card>
47 |   )
48 | }
49 |

--------------------------------------------------------------------------------
/components/FileOrUrlInput.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, MutableRefObject } from 'react'
 2 | import { css } from '@emotion/css'
 3 | import tw from '@tailwindcssinjs/macro'
 4 | import { Button, UrlFileToggle } from './'
 5 | 
 6 | export type FileOrUrlInputSubmitType = {
 7 |   file?: File
 8 |   url?: string
 9 |   type: 'url' | 'file'
10 | }
11 | 
12 | export const FileOrUrlInput = ({
13 |   onSubmit,
14 | }: {
15 |   onSubmit: (data: FileOrUrlInputSubmitType) => void
16 | }) => {
17 |   const inputRef = useRef()
18 |   const [type, setType] = useState('file')
19 |   const [url, setUrl] = useState('')
20 |   return (
21 |     <div>
22 |       <UrlFileToggle type={type} setType={setType} />
23 |       <div className={css(tw`flex`)}>
24 |         {type === 'url' ? (
25 |           <input
26 |             className={css(
27 |               tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-64`
28 |             )}
29 |             type="text"
30 |             id="input"
31 |             value={url}
32 |             onChange={(e) => setUrl(e.target.value)}
33 |           />
34 |         ) : (
35 |           <input
36 |             className={css(
37 |               tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-64`
38 |             )}
39 |             type="file"
40 |             id="input"
41 |             accept="audio/*, video/*"
42 |             ref={inputRef as MutableRefObject<any>}
43 |           />
44 |         )}
45 |         <Button
46 |           onClick={() => {
47 |             onSubmit({
48 |               type: type as 'file' | 'url',
49 |               url,
50 |               file: (inputRef as any)?.current?.files[0],
51 |             })
52 |           }}
53 |         >
54 |           {`Submit ${type === 'file' ? 'File' : 'Url'} for processing`}
55 |         </Button>
56 |       </div>
57 |     </div>
58 |   )
59 | }
60 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-symblai-showcase",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "deploy": "serverless",
 9 |     "build:base-css": "tailwindcss build ./styles/tailwind.base.css -o ./styles/base.css",
10 |     "type-check": "tsc --pretty --noEmit",
11 |     "format": "prettier --write \"**/*.{js,ts,tsx}\"",
12 |     "lint": "eslint . --ext ts --ext tsx --ext js"
13 |   },
14 |   "dependencies": {
15 |     "@emotion/babel-preset-css-prop": "^10.2.0",
16 |     "@emotion/core": "^10.0.35",
17 |     "@emotion/css": "^11.0.0-next.12",
18 |     "@emotion/react": "^11.0.0-next.12",
19 |     "@emotion/server": "^11.0.0-rc.0",
20 |     "@emotion/styled": "^11.0.0-next.12",
21 |     "@ffmpeg/ffmpeg": "^0.8.3",
22 |     "@symblai/react-elements": "^0.4.0",
23 |     "@types/react-typist": "^2.0.1",
24 |     "@types/socket.io": "^2.1.11",
25 |     "@types/socket.io-client": "^1.4.33",
26 |     "awesome-phonenumber": "^2.38.0",
27 |     "clsx": "^1.1.1",
28 |     "copy-to-clipboard": "^3.3.1",
29 |     "date-fns": "^2.16.1",
30 |     "dotenv": "^8.2.0",
31 |     "emotion": "^10.0.27",
32 |     "emotion-theming": "^10.0.27",
33 |     "next": "latest",
34 |     "react": "16.13.1",
35 |     "react-content-loader": "^5.1.2",
36 |     "react-dom": "16.13.1",
37 |     "react-error-boundary": "^3.0.2",
38 |     "react-markdown": "^4.3.1",
39 |     "react-typist": "^2.0.5",
40 |     "socket.io": "^2.3.0",
41 |     "socket.io-client": "^2.3.0",
42 |     "symbl-node": "^1.0.10",
43 |     "valid-url": "^1.0.9"
44 |   },
45 |   "devDependencies": {
46 |     "@babel/core": "^7.9.0",
47 |     "@tailwindcss/ui": "^0.2.2",
48 |     "@tailwindcssinjs/macro": "^0.3.1",
49 |     "@types/node": "^14.6.4",
50 |     "@types/react": "^16.9.56",
51 |     "@typescript-eslint/eslint-plugin": "^4.0.1",
52 |     "@typescript-eslint/parser": "^4.0.1",
53 |     "babel-plugin-macros": "2.8.0",
54 |     "eslint": "^7.8.1",
55 |     "eslint-config-prettier": "^6.11.0",
56 |     "eslint-plugin-react": "^7.20.6",
57 |     "prettier": "^2.1.1",
58 |     "tailwindcss": "^1.6.0",
59 |     "typescript": "^4.0.2"
60 |   },
61 |   "license": "MIT"
62 | }
63 |

--------------------------------------------------------------------------------
/components/ConversationCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react'
 2 | import { css } from '@emotion/css'
 3 | import tw from '@tailwindcssinjs/macro'
 4 | import { Button, Card } from '../components'
 5 | import { useAuth } from '../hooks'
 6 | const CONVERSATION_API = 'https://api.symbl.ai/v1/conversations'
 7 | 
 8 | export const ConversationCard = ({
 9 |   title,
10 |   children,
11 |   conversationId: cId,
12 |   type,
13 | }: {
14 |   title: string
15 |   conversationId: string
16 |   children: JSX.Element
17 |   type:
18 |     | 'messages'
19 |     | 'insights'
20 |     | 'topics'
21 |     | 'members'
22 |     | 'questions'
23 |     | 'follow-ups'
24 |     | 'action-items'
25 | }) => {
26 |   const { token } = useAuth()
27 |   const [conversationId, setConverstationId] = useState(cId)
28 |   const [responseData, setResponseData] = useState()
29 | 
30 |   const endpoint = type ? type : ''
31 |   const fetchData = async () => {
32 |     const res = await fetch(
33 |       `${CONVERSATION_API}/${conversationId}/${endpoint}`,
34 |       {
35 |         method: 'GET',
36 |         headers: {
37 |           'x-api-key': token as string,
38 |           'Content-Type': 'application/json',
39 |         },
40 |         mode: 'cors',
41 |       }
42 |     )
43 | 
44 |     const json = await res.json()
45 |     setResponseData(json)
46 |   }
47 | 
48 |   useEffect(() => {
49 |     if (cId) {
50 |       setConverstationId(cId)
51 |     }
52 |   }, [cId])
53 |   return (
54 |     <Card title={title}>
55 |       <>
56 |         {children}
57 |         <div className={css(tw`flex`)}>
58 |           <input
59 |             onChange={(e) => setConverstationId(e.target.value)}
60 |             type="text"
61 |             value={conversationId}
62 |             placeholder="conversationId"
63 |             className={css(
64 |               tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-64`
65 |             )}
66 |           />
67 |           <Button
68 |             onClick={() => {
69 |               if (conversationId) {
70 |                 fetchData()
71 |               } else
72 |                 alert(
73 |                   'No conversationId provided, please provide conversationId'
74 |                 )
75 |             }}
76 |           >
77 |             Fetch Data from API
78 |           </Button>
79 |         </div>
80 |         <textarea
81 |           className={css(tw`h-32 w-full bg-black p-4 mt-4`)}
82 |           value={JSON.stringify(responseData, null, 2)}
83 |         />
84 |       </>
85 |     </Card>
86 |   )
87 | }
88 |

--------------------------------------------------------------------------------
/components/AsyncParamsUI.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { css } from '@emotion/css'
 3 | import tw from '@tailwindcssinjs/macro'
 4 | 
 5 | export const AsyncParamsUI = ({
 6 |   enableSpeakerDiarization,
 7 |   setEnableSpeakerDiarization,
 8 |   diarizationSpeakerCount,
 9 |   setDiarizationSpeakerCount,
10 |   customVocabulary,
11 |   setCustomVocabulary,
12 |   detectActionPhraseForMessages,
13 |   setDetectActionPhraseForMessages,
14 | }: any) => {
15 |   return (
16 |     <div className={css(tw`p-2`)}>
17 |       <input
18 |         type="checkbox"
19 |         id="enableSpeakerDiarization"
20 |         name="enableSpeakerDiarization"
21 |         checked={enableSpeakerDiarization}
22 |         onClick={(e) => {
23 |           setEnableSpeakerDiarization(!enableSpeakerDiarization)
24 |         }}
25 |       />
26 |       <label
27 |         className={css(tw`text-gray-400 p-2`)}
28 |         htmlFor="enableSpeakerDiarization"
29 |       >
30 |         enableSpeakerDiarization
31 |       </label>
32 |       {enableSpeakerDiarization && (
33 |         <div>
34 |           <label
35 |             className={css(tw`text-gray-400 p-2 `)}
36 |             htmlFor="diarizationSpeakerCount"
37 |           >
38 |             DiarizationSpeakerCount
39 |           </label>
40 |           <input
41 |             className={css(
42 |               tw`inline-block bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-64`
43 |             )}
44 |             type="number"
45 |             id="diarizationSpeakerCount"
46 |             name="diarizationSpeakerCount"
47 |             value={diarizationSpeakerCount}
48 |             onChange={(e) => {
49 |               setDiarizationSpeakerCount(+e.target.value)
50 |             }}
51 |           />
52 |         </div>
53 |       )}
54 |       <div>
55 |         <label className={css(tw`text-gray-400 p-2`)}>
56 |           custom vocabulary array in json format
57 |         </label>
58 |         <input
59 |           type="text"
60 |           value={customVocabulary}
61 |           className={css(
62 |             tw`inline-block bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-64`
63 |           )}
64 |           name="customVocabulary"
65 |           onChange={(e) => {
66 |             setCustomVocabulary(e.target.value)
67 |           }}
68 |         />
69 |       </div>
70 |       <div>
71 |         <input
72 |           type="checkbox"
73 |           id="detectActionPhraseForMessages"
74 |           name="detectActionPhraseForMessages"
75 |           checked={detectActionPhraseForMessages}
76 |           onClick={(e) => {
77 |             setDetectActionPhraseForMessages(!detectActionPhraseForMessages)
78 |           }}
79 |         />
80 |         <label
81 |           className={css(tw`text-gray-400 p-2`)}
82 |           htmlFor="detectActionPhraseForMessages"
83 |         >
84 |           detectActionPhraseForMessages
85 |         </label>
86 |       </div>
87 |     </div>
88 |   )
89 | }
90 |

--------------------------------------------------------------------------------
/integrations/symbl/utils.ts:
--------------------------------------------------------------------------------
  1 | import { apiBase, intents } from './config'
  2 | import { sdk } from 'symbl-node'
  3 | 
  4 | let stopEndpointTimeoutRef: any = null
  5 | 
  6 | const sdkInit = async () => {
  7 |   await sdk.init({
  8 |     appId: process.env.APP_ID,
  9 |     appSecret: process.env.APP_SECRET,
 10 |     basePath: apiBase,
 11 |   })
 12 | }
 13 | 
 14 | export const stopEndpoint = async (connectionId: string) => {
 15 |   console.log('Stopping connection for ' + connectionId)
 16 | 
 17 |   if (stopEndpointTimeoutRef) {
 18 |     clearTimeout(stopEndpointTimeoutRef)
 19 |     stopEndpointTimeoutRef = null
 20 |   }
 21 | 
 22 |   try {
 23 |     const connection = await sdk.stopEndpoint({
 24 |       connectionId,
 25 |     })
 26 | 
 27 |     console.log('Summary Info:', connection.summaryInfo)
 28 |     console.log('Conversation ID:', connection.conversationId)
 29 | 
 30 |     return {
 31 |       summaryInfo: connection.summaryInfo,
 32 |       conversationId: connection.conversationId,
 33 |     }
 34 |   } catch (e) {
 35 |     console.error('Error while stopping the connection.', e)
 36 |     throw e
 37 |   }
 38 | }
 39 | 
 40 | export const startEndpoint = async (
 41 |   {
 42 |     type,
 43 |     phoneNumber,
 44 |     dtmf,
 45 |     summaryEmails,
 46 |     insightTypes,
 47 |   }: {
 48 |     type: string
 49 |     phoneNumber: string
 50 |     dtmf: string
 51 |     summaryEmails: string
 52 |     insightTypes: string
 53 |   },
 54 |   callback: (data: any) => Promise<void>,
 55 |   endCallAfterInSeconds = 300
 56 | ): Promise<any> => {
 57 |   try {
 58 |     await sdkInit()
 59 |     const phoneNumberOrUri =
 60 |       type === 'sip' ? { uri: phoneNumber } : { phoneNumber }
 61 |     const connection = await sdk.startEndpoint(
 62 |       {
 63 |         endpoint: {
 64 |           type,
 65 |           ...phoneNumberOrUri,
 66 |           dtmf,
 67 |         },
 68 |         intents,
 69 |         insightTypes,
 70 |         actions: [
 71 |           {
 72 |             invokeOn: 'stop',
 73 |             name: 'sendSummaryEmail',
 74 |             parameters: {
 75 |               emails: summaryEmails.split(','),
 76 |             },
 77 |           },
 78 |         ],
 79 |         data: {
 80 |           session: {
 81 |             name: `Live Intent Detection NextJS demo - ${phoneNumber}`,
 82 |           },
 83 |         },
 84 |       },
 85 |       callback
 86 |     )
 87 |     const connectionId = connection.connectionId
 88 |     console.log('Call established for connectionId: ' + connectionId)
 89 | 
 90 |     stopEndpointTimeoutRef = setTimeout(async () => {
 91 |       clearTimeout(stopEndpointTimeoutRef)
 92 |       stopEndpointTimeoutRef = null
 93 |       await stopEndpoint(connectionId)
 94 |     }, endCallAfterInSeconds * 1000)
 95 |     return connectionId
 96 |   } catch (e) {
 97 |     console.error('Error in establishing startEndpoint call with SDK', e)
 98 |     throw e
 99 |   }
100 | }
101 | 
102 | export async function subscribeToRealtimeEvents(
103 |   connectionId: string,
104 |   handler: (data: any) => void
105 | ) {
106 |   console.log(`Subscribe to events of connection: ${connectionId}`)
107 |   await sdkInit()
108 |   sdk.subscribeToConnection(connectionId, handler)
109 | }
110 |

--------------------------------------------------------------------------------
/pages/text/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import { css } from '@emotion/css'
  3 | import tw from '@tailwindcssinjs/macro'
  4 | import {
  5 |   Link,
  6 |   FlexWrap,
  7 |   TypingIntro,
  8 |   Divider,
  9 |   Button,
 10 |   JsonPayloadCard,
 11 |   Card,
 12 |   ProtectedPage,
 13 |   ChatComponent,
 14 | } from '../../components'
 15 | import { useConnection, useConversation, useTextAsyncAPI } from '../../hooks'
 16 | import { Transcripts, Topics } from '@symblai/react-elements'
 17 | 
 18 | const Index = () => {
 19 |   const [connectionId] = useConnection()
 20 |   const { conversationData } = useConversation()
 21 |   const [text, setText] = useState()
 22 |   const [textToProcess, setTextToProcess] = useState('')
 23 |   const { jobStatus, sentForProcessing } = useTextAsyncAPI(textToProcess)
 24 | 
 25 |   return (
 26 |     <ProtectedPage>
 27 |       <TypingIntro>Get insights from text format</TypingIntro>
 28 |       <Divider />
 29 |       <Link href="https://docs.symbl.ai/#text-api">
 30 |         The Async Text API allows you to process any text payload to get the
 31 |         transcription and conversational insights. It can be useful in any use
 32 |         case where you have access to the textual content of a type of
 33 |         conversation, and you want to extract the insightful items supported by
 34 |         the Conversation API. If you want to add more content to the same
 35 |         conversation, use PUT Async Text API. You can read more about Text API
 36 |       </Link>
 37 |       {connectionId ? (
 38 |         <label
 39 |           className={css(tw`text-indigo-300`)}
 40 |         >{`connectionId ${connectionId}`}</label>
 41 |       ) : null}
 42 |       <FlexWrap>
 43 |         <ChatComponent
 44 |           payload={JSON.stringify(text)}
 45 |           onChange={(jsonPayload: any) => {
 46 |             setText(jsonPayload)
 47 |           }}
 48 |         />
 49 |         <div className={css(tw`w-1/2 flex-1`)}>
 50 |           <textarea
 51 |             className={css(
 52 |               tw`bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 pl-10 appearance-none leading-normal m-3 w-full h-full`
 53 |             )}
 54 |             value={JSON.stringify(text, null, 2)}
 55 |             onChange={(e) => setText(JSON.parse(e.target.value))}
 56 |           >

57 |

58 | 59 | 69 | 70 | 71 | 72 |

Job Processing data

73 | 74 | 75 |

76 | Here you will see Connection data. To check out API check here: 77 | 83 | here 84 | 85 |

86 | 87 | 88 | 89 | 90 | 91 |

92 |

93 | This transcript are using predefined Transcripts element from{' '} 94 | 98 | @symblai/react-elements 99 | 100 |

101 | {jobStatus && (jobStatus as any).status === 'completed' && ( 102 | 103 | )} 104 |

105 | 106 | 107 |

108 |

109 | This transcript are using predefined Transcripts element from{' '} 110 | 114 | @symblai/react-elements 115 | 116 |

117 | {jobStatus && (jobStatus as any).status === 'completed' && ( 118 | 119 | )} 120 |

121 | 122 | 123 | 124 | 125 | ) 126 | } 127 | 128 | export default Index 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Symbl.ai Next.js Demo 2 | 3 | [![telephony](https://img.shields.io/badge/symbl-telephony-blue)](https://docs.symbl.ai/docs/telephony/overview/post-api) 4 | [![async-text](https://img.shields.io/badge/symbl-async--text-9cf)](https://docs.symbl.ai/docs/async-api/overview/text/post-text) 5 | [![async-video](https://img.shields.io/badge/symbl-async--video-%231F618D)](https://docs.symbl.ai/docs/async-api/overview/video/post-video) 6 | [![async-audio](https://img.shields.io/badge/symbl-async--audio-%2358D68D)](https://docs.symbl.ai/docs/async-api/overview/audio/post-audio) 7 | [![symbl-react-elements](https://img.shields.io/badge/symbl-react--elements-yellow)](https://docs.symbl.ai/docs/symbl-elements) 8 | [![sdk](https://img.shields.io/badge/symbl-sdk-blueviolet)](https://docs.symbl.ai/docs/javascript-sdk/overview/introduction) 9 | 10 | 11 | Symbl's APIs empower developers to enable: 12 | - **Real-time** analysis of free-flowing discussions to automatically surface highly relevant summary discussion topics, contextual insights, suggestive action items, follow-ups, decisions, and questions. 13 | - **Voice APIs** that makes it easy to add AI-powered conversational intelligence to either [telephony][telephony] or [WebSocket][websocket] interfaces. 14 | - **Conversation APIs** that provide a REST interface for managing and processing your conversation data. 15 | - **Summary UI** with a fully customizable and editable reference experience that indexes a searchable transcript and shows generated actionable insights, topics, timecodes, and speaker information. 16 | 17 |

18 | 19 | ## This is a Demo app showcasing Symbl.ai capabilities using [ReactJS](https://reactjs.org/), [Typescript](https://www.typescriptlang.org/), and [NextJS](https://nextjs.org/) 20 | 21 |

22 | 23 | * [Setup](#setup) 24 | * [Integration](#integration) 25 | * [Conclusion](#conclusion) 26 | * [Community](#community) 27 | 28 | ## Setup 29 | The first step to getting setup is to [sign up][signup] with Symbl.ai. 30 | 31 | ### Authorization 32 | 33 | 1. Create a .env file in the root directory using the [.env.sample](./.env.sample) as an example. 34 | 2. Update the .env file with the following: 35 | * Your App Id that you can get from [Platform](https://platform.symbl.ai) 36 | * Your App Secret that you can get from [Platform](https://platform.symbl.ai) 37 | 38 | ### Install & Deploy 39 | 40 | 1. Run `yarn install` or `npm install`. 41 | 2. To run the app use `yarn dev`. 42 | 3. Navigate to `localhost:3000` to view the app. 43 | 44 | 45 | ## Integration 46 | 47 | ### Project Structure 48 | 49 | * `pages` In Next.js, a page is a React Component exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the pages directory. Each page is associated with a route based on its file name. You can read more about how works with [pages](https://nextjs.org/docs/basic-features/pages). Each tab in the application corresponds to the following pages subdirectories 50 | * `pages/api` => Phone Call 51 | * `pages/audio` => Phone(Client Only) 52 | * `pages/conversations` => Conversation data 53 | * `pages/text` => Text 54 | * `pages/audio` => Audio 55 | * `pages/video` => Video 56 | 57 | ## Conclusion 58 | 59 | When implemented this application offers options to explore the following Symbl.ai features accessible via tabs at the top of the page. 60 | 61 | 1. PSTN call implemented with the [NodeSDK] featuring real time transcription and insights. 62 | 2. PSTN call implemented with the [Telephony API][telephony] featuring real time transcription, insights, and [Symbl React Elements][reactelements]. 63 | 3. Processed conversation data accessed from the [Conversation API](https://docs.symbl.ai/docs/conversation-api/overview/introduction) featuring participants and insights. 64 | 4. [Async Text API](https://docs.symbl.ai/docs/async-api/overview/text/post-text) featuring [Symbl React Elements][reactelements], transcription, and insights. 65 | 5. [Async Audio API](https://docs.symbl.ai/docs/async-api/overview/audio/post-audio) featuring [Symbl React Elements][reactelements], transcription, and insights. 66 | 6. [Async Video API](https://docs.symbl.ai/docs/async-api/overview/video/post-video) featuring [Symbl React Elements][reactelements], transcription, and insights. 67 | 68 | ## Community 69 | 70 | If you have any questions, feel free to reach out to us at devrelations@symbl.ai, through our Community [Slack][slack], or [developer community][developer_community] 71 | 72 | This guide is actively developed, and we love to hear from you! Please feel free to [create an issue][issues] or [open a pull request][pulls] with your questions, comments, suggestions and feedback. If you liked our integration guide, please star our repo! 73 | 74 | This library is released under the [MIT License][license] 75 | 76 | [license]: LICENSE.txt 77 | [telephony]: https://docs.symbl.ai/docs/telephony/overview/post-api 78 | [websocket]: https://docs.symbl.ai/docs/streamingapi/overview/introduction 79 | [developer_community]: https://community.symbl.ai/?_ga=2.134156042.526040298.1609788827-1505817196.1609788827 80 | [signup]: https://platform.symbl.ai/?_ga=2.63499307.526040298.1609788827-1505817196.1609788827 81 | [issues]: https://github.com/symblai/symbl-for-zoom/issues 82 | [pulls]: https://github.com/symblai/symbl-for-zoom/pulls 83 | [slack]: https://join.slack.com/t/symbldotai/shared_invite/zt-4sic2s11-D3x496pll8UHSJ89cm78CA 84 | [NodeSDK]: https://docs.symbl.ai/docs/javascript-sdk/overview/introduction 85 | [reactelements]: https://docs.symbl.ai/docs/symbl-elements 86 | -------------------------------------------------------------------------------- /pages/phone/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef } from 'react' 2 | import { PhoneConfigurations } from '../../components/PhoneConfigurations' 3 | import { css } from '@emotion/css' 4 | import tw from '@tailwindcssinjs/macro' 5 | import { 6 | Card, 7 | JsonPayloadCard, 8 | TypingIntro, 9 | FlexWrap, 10 | Divider, 11 | ProtectedPage, 12 | ConnectionLabel, 13 | Link, 14 | } from '../../components' 15 | import { Transcripts, Topics } from '@symblai/react-elements' 16 | import { useConnection, useConversation, useAuth } from '../../hooks' 17 | 18 | const INSIGHT_TYPES = ['question', 'action_item'] 19 | const Index = () => { 20 | const [connectionId, setConnectionId] = useConnection() 21 | const { token } = useAuth() 22 | const { conversationData, setConversationData } = useConversation() 23 | const [liveTranscript, setLiveTranscript] = useState({}) 24 | const [realtimeData, setRealTimeData] = useState({}) 25 | const [messages, setMessages] = useState([]) 26 | const messagesList = useRef(messages) 27 | 28 | useEffect(() => { 29 | messagesList.current = messages 30 | }, [messages]) 31 | 32 | function handleConnection(data: any) { 33 | console.log('Connection Data', data) 34 | setConnectionId(data.connectionId) 35 | setConversationData(data) 36 | } 37 | 38 | useEffect(() => { 39 | let ws: any = null 40 | 41 | if (conversationData && !ws) { 42 | ws = new WebSocket( 43 | `wss://api.symbl.ai/session/subscribe/${connectionId}?access_token=${token}` 44 | ) 45 | 46 | ws.onmessage = (event: MessageEvent) => { 47 | const data = JSON.parse(event.data) 48 | if (data.type === 'message_response') { 49 | const oldMsgs = messagesList.current 50 | setMessages([...oldMsgs, ...data.messages]) 51 | } 52 | if (data.type === 'transcript_response') { 53 | console.log(data.payload.content) 54 | setLiveTranscript(data) 55 | } 56 | 57 | setRealTimeData(data) 58 | console.log('Realtime data', data) 59 | } 60 | } 61 | 62 | // cleanup method which will be called before next execution. in your case unmount. 63 | return () => { 64 | ws && ws.close 65 | } 66 | }, [conversationData]) 67 | 68 | return ( 69 | 70 | 71 | This is automatic calling machine to showcase Symbl.ai REST telephony 72 | API. 73 | 74 | 75 | 76 | You can use Symbl REST API to call to your phone. You can test it there. 77 | After calling a phone you will get a conversationId that will help you 78 | retrieve bunch of insights from live coversation 79 | 80 | 81 | 86 | 87 | 88 | 89 |

90 |

91 | here you see live transcripts as they are parsed by symbl. 92 | Meaningful ones will be parsed as messages and appear in messages 93 | stream 94 |

95 |

96 | {liveTranscript.payload && liveTranscript.payload.content} 97 |

98 |

99 | 100 | 101 |

102 |

103 | Meaningful messages that are parsed from transcriptions 104 |

105 |

108 | {message.payload && message.payload.content} 109 |

112 |

113 | 114 | 115 | 116 |

117 | Symbl React Elements library 118 |

119 | 120 | 121 | 122 |

123 |

124 | This UI is using predefined Transcripts element from{' '} 125 | 129 | @symblai/react-elements 130 | 131 |

132 |

133 | {messages && } 134 |

135 |

136 | 137 | 138 |

139 |

140 | This UI is using predefined Topics element from{' '} 141 | 145 | @symblai/react-elements 146 | 147 |

148 |

149 | {conversationData && conversationData.conversationId && ( 150 | 151 | )} 152 |

153 |

154 | 155 | 156 | 157 | 158 |

159 | Raw Data 160 |

161 | 162 | 163 | 167 |

Realtime data

168 | 169 | 170 |

Connection data

171 | 172 | 173 | 174 | ) 175 | } 176 | 177 | export default Index 178 | -------------------------------------------------------------------------------- /components/ChatComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { css } from '@emotion/css' 3 | import tw from '@tailwindcssinjs/macro' 4 | import { Button } from '../components' 5 | 6 | const Chat = ({ messages }: any) => { 7 | return ( 8 |

11 |
12 |
18 | from: {message.from.name} 19 |
userId: {message.from.userId}
20 |
21 |
26 | {message.payload.content} 27 |
28 |
29 |

32 | ) 33 | } 34 | 35 | export const ChatComponent = ({ 36 | onChange, 37 | payload, 38 | }: { 39 | onChange: (jsonPayload: any) => void 40 | payload: string 41 | }) => { 42 | const [speaker, setSpeaker] = useState('') 43 | const [userId, setUserId] = useState('') 44 | const [message, setMessage] = useState('') 45 | const [ 46 | detectActionPhraseForMessages, 47 | setDetectActionPhraseForMessages, 48 | ] = useState(false) 49 | const [conversationType, setConversationType] = useState('') 50 | const jsonPayload = JSON.parse(payload || '{}') 51 | 52 | const addMessage = () => { 53 | const messages = jsonPayload.messages || [] 54 | if (!message || !speaker) { 55 | alert('No Speaker or Message') 56 | } else { 57 | const metadata = conversationType 58 | ? { 59 | metadata: { 60 | conversationType: conversationType.split(','), 61 | }, 62 | } 63 | : {} 64 | const newData = { 65 | ...metadata, 66 | detectActionPhraseForMessages, 67 | confidenceThreshold: 0.5, 68 | messages: [ 69 | ...messages, 70 | { 71 | payload: { 72 | content: message, 73 | }, 74 | from: { 75 | userId, 76 | name: speaker, 77 | }, 78 | duration: { 79 | startTime: new Date().toISOString(), 80 | endTime: new Date().toISOString(), 81 | }, 82 | }, 83 | ], 84 | } 85 | onChange(newData) 86 | } 87 | } 88 | return ( 89 |

90 |

95 |

96 |

97 |

98 | Chat Example 99 |

100 | { 109 | setConversationType(e.target.value) 110 | }} 111 | /> 112 | { 116 | setDetectActionPhraseForMessages(!detectActionPhraseForMessages) 117 | }} 118 | > 119 | 124 | detectActionPhraseForMessages 125 | 126 |

127 |

128 |

129 | {jsonPayload.messages && } 130 |

131 |

132 | { 141 | setSpeaker(e.target.value) 142 | }} 143 | /> 144 | { 153 | setUserId(e.target.value) 154 | }} 155 | /> 156 |

{
164 |               setMessage(e.target.value)
165 |             }}
166 |           />
167 |         </div>
168 |         <Button
169 |           className={css(tw`text-gray-400`)}
170 |           onClick={() => {
171 |             addMessage()
172 |           }}
173 |         >
174 |           Add Message
175 |         </Button>
176 |       </div>
177 |     </div>
178 |   )
179 | }
180 |

--------------------------------------------------------------------------------
/docs/how-to-conversation-data.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide we will dive into how we can use Symbl AI Async API to retrieve data from conversation processed by Symbl. You can check other How To guides to see how to obtain conversationId that we will use to get Symbl insights. This guide is somewhat specific to React ecosystem and you can see the full code of how it's implemented within NextJS demo app [here](https://github.com/symblai/nextjs-symblai-demo).
  4 | 
  5 | The demo, that we will use in this How To has two parts. One is calling to our phone number and getting conversationId, which is described in details in [this How To guide](./how-to-next-telephony-rest.md). This can be done using this UI:
  6 | 
  7 | ![conversational ui](./imgs/conversational.png)
  8 | 
  9 | You can enter your phone number, and and click ![](./imgs/submitbutton.png).
 10 | 
 11 | When submitting a phone number, the phone will be dialed and conversation will start. You will see in the UI bunch of JSON data that contributes to conversation. One of which will be conversationId. That Id can be used to retrieve conversational insights using [Conversation API](https://docs.symbl.ai/#conversation-api)
 12 | 
 13 | In the following UI, once conversation will start conversationId in input fields will be updated
 14 | ![conversational ui](./imgs/conversational2.png)
 15 | 
 16 | And you will be able to click on ![](./imgs/fetch.png) and get the data.
 17 | 
 18 | If you don't want to use telephony API to call your phone number you also can just paste conversationId that you've obtained in other methods and get the data.
 19 | 
 20 | ## Get Started
 21 | 
 22 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 23 | 
 24 | #### Retrieve your credentials
 25 | 
 26 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 27 | 
 28 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 29 | 
 30 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 31 | 
 32 | ```javascript
 33 | module.exports = {
 34 |   env: {
 35 |     APP_ID: '',
 36 |     APP_SECRET: '',
 37 |   },
 38 | }
 39 | ```
 40 | 
 41 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 42 | 
 43 | Page you are looking for this tutorial is `/conversations` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/conversations/index.tsx)
 44 | 
 45 | At first you will see the following. ![](./imgs/notlogged.png)
 46 | 
 47 | In order to see the app we will need to login.
 48 | 
 49 | ### Authenticating
 50 | 
 51 | When using REST API, we would need to pass auth token in header. For that we've created component `ProtectedPage`. This component executes Symbl specific REST endpoint, to retrieve auth token and store it in context.
 52 | 
 53 | Later on we can retrieve this token from the helper hook `useAuth` which is basically a wrapper for `useContext`.
 54 | 
 55 | `export const useAuth = () => useContext(AuthContext)`
 56 | 
 57 | This is how we would retrieve the token:
 58 | 
 59 | ```javascript
 60 | async function loginToSymbl() {
 61 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
 62 |       method: 'POST',
 63 |       headers: {
 64 |         'Content-Type': 'application/json',
 65 |       },
 66 |       mode: 'cors',
 67 |       body: JSON.stringify({
 68 |         type: 'application',
 69 |         appId: process.env.APP_ID,
 70 |         appSecret: process.env.APP_SECRET,
 71 |       }),
 72 |     })
 73 |     const json = await response.json()
 74 |     console.log('Access Token is: ', json)
 75 |     setToken(json.accessToken)
 76 | ```
 77 | 
 78 | Later on in any place in application we can use `const { token } = useAuth()` to get the token.
 79 | 
 80 | ## Getting data from Conversation API
 81 | 
 82 | In order to get data from conversation API we will need to get **`conversationId`**. We can either use a demo id: `6055920157065216` or we can initiate the phone call using either Symbl Node SDK or Symbl REST api. Both flows will update `conversationId` parameter in the app and we will be able to retrieve data that we want.
 83 | 
 84 | In this demo app we have `<ConversationCard/>` component that will accept the following parameters:
 85 | 
 86 | ```typescript
 87 | const ConversationCard = ({
 88 |   title,
 89 |   children,
 90 |   conversationId: cId,
 91 |   type,
 92 | }: {
 93 |   title: string
 94 |   conversationId: string
 95 |   children: JSX.Element
 96 |   type:
 97 |     | 'messages'
 98 |     | 'insights'
 99 |     | 'topics'
100 |     | 'members'
101 |     | 'questions'
102 |     | 'follow-ups'
103 |     | 'action-items'
104 | }) => {}
105 | ```
106 | 
107 | This card component can render different data retrieved from Conversation API. The functionality is rather simple. Based on different types, card will render different data retrieved from Conversation API.
108 | 
109 | ```typescript
110 | const fetchData = async () => {
111 |   const res = await fetch(
112 |     `https://api.symbl.ai/v1/conversations/${conversationId}/${endpoint}`,
113 |     {
114 |       method: 'GET',
115 |       headers: {
116 |         'x-api-key': token as string,
117 |         'Content-Type': 'application/json',
118 |       },
119 |       mode: 'cors',
120 |     }
121 |   )
122 | 
123 |   const json = await res.json()
124 |   setResponseData(json)
125 | }
126 | ```
127 | 
128 | You can read more about conversation API [here](https://docs.symbl.ai/#conversation-api)
129 | 
130 | ## Summary
131 | 
132 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to get your conversational insights.
133 | Even though the code shared in this How To is React specific, The general flow can be used with any framework
134 | 
135 | 1. Authenticate and get the token
136 | 2. Get `conversationId` either using telephony API or using async API explained in other How Tos
137 | 3. Use [Conversation API](https://docs.symbl.ai/#conversation-api) to get insights about your conversation.
138 | 
139 | ```javascript
140 | const endpoint =
141 |   '`https://api.symbl.ai/v1/conversations/${conversationId}/${type}`'
142 | ```
143 | 
144 | while the type can be:
145 | 
146 | ```
147 |   type:
148 |     | 'messages'
149 |     | 'insights'
150 |     | 'topics'
151 |     | 'members'
152 |     | 'questions'
153 |     | 'follow-ups'
154 |     | 'action-items'
155 | ```
156 | 
157 | You can read more about Conversation API [here](https://docs.symbl.ai/#conversation-api)
158 |

--------------------------------------------------------------------------------
/components/PhoneConfigurations.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import { css } from '@emotion/css'
  3 | import tw from '@tailwindcssinjs/macro'
  4 | import PhoneNumber from 'awesome-phonenumber'
  5 | import { Button, ParamsToggle } from '../components'
  6 | import { useConnection, useConversation, useAuth } from '../hooks'
  7 | 
  8 | export const PhoneConfigurations = ({
  9 |   insightTypes,
 10 |   clientOnly,
 11 |   connectionResponseHandler,
 12 | }: {
 13 |   insightTypes: string[]
 14 |   clientOnly?: boolean
 15 |   connectionResponseHandler?: (data: any) => void
 16 | }) => {
 17 |   const { token } = useAuth()
 18 |   const [phone, setPhone] = useState('')
 19 |   const [connectionId, setConnectionId] = useConnection()
 20 |   const { setConversationData } = useConversation()
 21 |   const [phoneError, setPhoneError] = useState('')
 22 |   const [dtmf, setDtmf] = useState('')
 23 |   const [type, setType] = useState('pstn')
 24 |   const [summaryEmails, setSummaryEmails] = useState('')
 25 |   const [calling, setCalling] = useState(false)
 26 |   async function startCall() {
 27 |     if (!phone) {
 28 |       setPhoneError('Cannot be empty')
 29 |     }
 30 |     const pn = new PhoneNumber(phone)
 31 | 
 32 |     let _phoneNumber = phone
 33 |     if (pn.isValid()) {
 34 |       _phoneNumber = pn.getNumber('e164')
 35 |     } else {
 36 |       setPhoneError('Invalid Number')
 37 |       return
 38 |     }
 39 | 
 40 |     setPhoneError('')
 41 |     console.log(`call: ${phone}`)
 42 |     setCalling(true)
 43 |     if (!clientOnly) {
 44 |       const res = await fetch('/api/call', {
 45 |         method: 'POST',
 46 |         body: JSON.stringify({
 47 |           phoneNumber: _phoneNumber,
 48 |           dtmf: dtmf,
 49 |           type,
 50 |           insightTypes,
 51 |           summaryEmails,
 52 |           start: true,
 53 |         }),
 54 |       })
 55 | 
 56 |       const json = await res.json()
 57 |       setConnectionId(json.connectionId)
 58 |     } else {
 59 |       const phoneNumberOrUri =
 60 |         type === 'sip' ? { uri: _phoneNumber } : { phoneNumber: _phoneNumber }
 61 |       const res = await fetch('https://api.symbl.ai/v1/endpoint:connect', {
 62 |         method: 'POST',
 63 |         headers: {
 64 |           'x-api-key': token as string,
 65 |           'Content-Type': 'application/json',
 66 |         },
 67 |         mode: 'cors',
 68 |         body: JSON.stringify({
 69 |           operation: 'start',
 70 |           endpoint: {
 71 |             type,
 72 |             ...phoneNumberOrUri,
 73 |             dtmf,
 74 |           },
 75 |           insightTypes,
 76 |           actions: [
 77 |             {
 78 |               invokeOn: 'stop',
 79 |               name: 'sendSummaryEmail',
 80 |               parameters: {
 81 |                 emails: summaryEmails.split(','),
 82 |               },
 83 |             },
 84 |           ],
 85 |           data: {
 86 |             session: {
 87 |               name: 'Call from nextjs Phone(Client only)',
 88 |             },
 89 |           },
 90 |         }),
 91 |       })
 92 | 
 93 |       const json = await res.json()
 94 |       connectionResponseHandler && connectionResponseHandler(json)
 95 |     }
 96 |     setCalling(false)
 97 |   }
 98 | 
 99 |   async function endCall() {
100 |     console.log('Stoping the call')
101 |     if (!clientOnly) {
102 |       const response = await fetch('/api/call', {
103 |         method: 'POST',
104 |         body: JSON.stringify({
105 |           connectionId,
106 |           start: false,
107 |         }),
108 |       })
109 |       const json = await response.json()
110 |       setConversationData(json)
111 |     }
112 |     setConnectionId(null)
113 |   }
114 | 
115 |   return (
116 |     <div>
117 |       <div>
118 |         <label className={css(tw`m-3 text-gray-400`)}>Phone number</label>
119 |         <div className={css(tw`flex ml-4`)}>
120 |           <span className={css(tw`flex text-gray-400 items-center`)}>
121 |             Type:
122 |           </span>
123 |           <select
124 |             className={css(
125 |               tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2  appearance-none leading-normal m-3 w-14`
126 |             )}
127 |             id="type"
128 |             value={type}
129 |             onChange={(e) => setType(e.target.value)}
130 |           >
131 |             <option value="pstn">
132 |               PSTN (Public Switched Telephone Networks)
133 |             </option>
134 |             <option value="sip">SIP (Session Initiation Protocol)</option>
135 |           </select>
136 |           <input
137 |             disabled={!!connectionId || calling}
138 |             onChange={(e) => setPhone(e.target.value)}
139 |             type="text"
140 |             value={phone}
141 |             placeholder={
142 |               type === 'pstn' ? 'Enter US phone number' : 'Enter SIP uri'
143 |             }
144 |             className={css(
145 |               tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2  appearance-none leading-normal m-3 w-64`
146 |             )}
147 |           />
148 |           <Button
149 |             disabled={calling}
150 |             onClick={() => {
151 |               connectionId ? endCall() : startCall()
152 |             }}
153 |           >
154 |             {connectionId ? 'End Call' : 'Call'}
155 |           </Button>
156 |         </div>
157 |         <ParamsToggle>
158 |           <>
159 |             <label className={css(tw`m-3 text-gray-400`)}>Params</label>
160 | 
161 |             <input
162 |               disabled={!!connectionId || calling}
163 |               onChange={(e) => setDtmf(e.target.value)}
164 |               type="text"
165 |               value={dtmf}
166 |               placeholder="DTMF (Joining code)"
167 |               className={css(
168 |                 tw`flex flex-wrap bg-gray-900 text-sm text-gray-400 placeholder-gray-600 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 appearance-none leading-normal m-3 w-40`
169 |               )}
170 |             />
171 |             <input
172 |               disabled={!!connectionId || calling}
173 |               onChange={(e) => setSummaryEmails(e.target.value)}
174 |               type="text"
175 |               value={summaryEmails}
176 |               placeholder="Summary Emails list (comma separated)"
177 |               className={css(
178 |                 tw`flex flex-wrap bg-gray-900 text-sm text-gray-400  placeholder-gray-600 transition border border-gray-800 focus:outline-none focus:border-gray-600 rounded py-1 px-2 appearance-none leading-normal m-3 w-80`
179 |               )}
180 |             />
181 |           </>
182 |         </ParamsToggle>
183 |         {phoneError !== '' ? (
184 |           <label className={css(tw`text-red-300`)}>{phoneError}</label>
185 |         ) : null}
186 |       </div>
187 |     </div>
188 |   )
189 | }
190 |

--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef } from 'react'
  2 | import { PhoneConfigurations } from '../components/PhoneConfigurations'
  3 | import { css } from '@emotion/css'
  4 | import tw from '@tailwindcssinjs/macro'
  5 | import io from 'socket.io-client'
  6 | import {
  7 |   Link,
  8 |   Card,
  9 |   TypingIntro,
 10 |   Divider,
 11 |   FlexWrap,
 12 |   JsonPayloadCard,
 13 | } from '../components'
 14 | import { useConnection, useConversation } from '../hooks'
 15 | import { Transcripts, Topics } from '@symblai/react-elements'
 16 | 
 17 | const Index = () => {
 18 |   const [connectionId] = useConnection()
 19 |   const [liveTranscript, setLiveTranscript] = useState('')
 20 |   const [realtimeData, setRealTimeData] = useState({})
 21 |   const [messages, setMessages] = useState<any[]>([])
 22 |   const [insights, setInsights] = useState<any[]>([])
 23 |   const messagesList = useRef(messages)
 24 |   const insightsList = useRef(insights)
 25 |   const { conversationData, setConversationData } = useConversation()
 26 |   useEffect(() => {
 27 |     messagesList.current = messages
 28 |     insightsList.current = insights
 29 |   }, [messages, insights])
 30 | 
 31 |   let socket: any
 32 |   useEffect(() => {
 33 |     console.log('Connection Id:', connectionId)
 34 |     if (connectionId) {
 35 |       fetch('/api/subscribeToPhoneEvents', {
 36 |         method: 'POST',
 37 |       }).finally(() => {
 38 |         socket = io()
 39 |         socket.on('connect', () => {
 40 |           console.log('connect')
 41 |           socket.emit('subscribeToEvents', { connectionId })
 42 |         })
 43 | 
 44 |         socket.on('realtimeEvent', (data: any) => {
 45 |           console.log('Real time event', data)
 46 |           setRealTimeData(data)
 47 |           setConversationData(data)
 48 |           if (data.type === 'transcript_response') {
 49 |             setLiveTranscript(data.payload.content)
 50 |           }
 51 |           if (data.type === 'message_response') {
 52 |             const oldMsgs = messagesList.current
 53 |             setMessages([...oldMsgs, ...data.messages])
 54 |           }
 55 |           if (data.type === 'insight_response') {
 56 |             const oldInsights = insightsList.current
 57 |             setInsights([...oldInsights, ...data.insights])
 58 |           }
 59 |         })
 60 | 
 61 |         socket.on('disconnect', () => {
 62 |           console.log('disconnect')
 63 |         })
 64 |       })
 65 |     }
 66 |   }, [connectionId])
 67 | 
 68 |   return (
 69 |     <>
 70 |       <TypingIntro>
 71 |         This is automatic calling machine to showcase Symbl.ai telephony API.
 72 |         This example is using Symbl Node SDK on server side and socket.io
 73 |         connection on the client side
 74 |       </TypingIntro>
 75 |       <Divider />
 76 |       <Link href="https://docs.symbl.ai/#get-live-transcription-phone-call-node-js-telephony">
 77 |         On this page you can see how to initiate a phone call using Symbl Node
 78 |         SDK. There is a call from this page to api/call endpoint that executes
 79 |         the call on the NodeJS side. Connection to the client is via websockets
 80 |         using socket.io. You can read more about how to use Symbl.ai in Node
 81 |       </Link>
 82 |       <Divider />
 83 |       <PhoneConfigurations insightTypes={['question', 'action_item']} />
 84 |       {connectionId ? (
 85 |         <label
 86 |           className={css(tw`text-indigo-300`)}
 87 |         >{`connectionId ${connectionId}`}</label>
 88 |       ) : null}
 89 |       <Divider />
 90 | 
 91 |       <FlexWrap>
 92 |         <Card title="Live Transcriptions">
 93 |           <div>
 94 |             <div className="text-gray-500">
 95 |               Live transcripts will show live transcription process.
 96 |             </div>
 97 |             <div>{liveTranscript}</div>
 98 |           </div>
 99 |         </Card>
100 |         <Card title="Messages">
101 |           <div>
102 |             <div className="text-gray-500">
103 |               Meaningful messages that are parsed from transcriptions
104 |             </div>
105 |             <ul>
106 |               {messages.map((message, index) => (
107 |                 <li key={`${message}-${index}`}>{message.payload.content}</li>
108 |               ))}
109 |             </ul>
110 |           </div>
111 |         </Card>
112 |         <Card title="Insights">
113 |           <div>
114 |             <div className="text-gray-500">
115 |               Insights of different types will be presented here. For example
116 |               action items, questions, tasks etc
117 |             </div>
118 |             <ul>
119 |               {insights.map((insight, index) => (
120 |                 <li key={`${insight}-${index}`}>{insight.text}</li>
121 |               ))}
122 |             </ul>
123 |           </div>
124 |         </Card>
125 |       </FlexWrap>
126 |       <Divider />
127 |       <h1 className={css(tw`text-white text-xl p-8 justify-center flex`)}>
128 |         Symbl React Elements library
129 |       </h1>
130 |       <Divider />
131 |       <FlexWrap>
132 |         <Card title="Transcriptions using Symbl react elements">
133 |           <div>
134 |             <div className="text-gray-500">
135 |               This UI is using predefined Transcripts element from{' '}
136 |               <a
137 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
138 |                 className={css(tw`text-blue-400`)}
139 |               >
140 |                 @symblai/react-elements
141 |               </a>
142 |             </div>
143 |             <div className={css(tw`pt-4`)}>
144 |               {messages && <Transcripts messages={messages} />}
145 |             </div>
146 |           </div>
147 |         </Card>
148 |         <Card title="Topics using Symbl react elements">
149 |           <div>
150 |             <div className="text-gray-500">
151 |               This UI is using predefined Topics element from{' '}
152 |               <a
153 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
154 |                 className={css(tw`text-blue-400`)}
155 |               >
156 |                 @symblai/react-elements
157 |               </a>
158 |             </div>
159 |             <div className={css(tw`pt-4`)}>
160 |               {conversationData && conversationData.conversationId && (
161 |                 <Topics conversationId={conversationData.conversationId} />
162 |               )}
163 |             </div>
164 |           </div>
165 |         </Card>
166 |       </FlexWrap>
167 |       <Divider />
168 |       <h1 className={css(tw`text-white text-xl p-8 justify-center flex`)}>
169 |         Raw Data
170 |       </h1>
171 |       <Divider />
172 |       <FlexWrap>
173 |         <JsonPayloadCard
174 |           json={realtimeData}
175 |           title="Realtime data from websocket"
176 |         >
177 |           <div>Realtime data</div>
178 |         </JsonPayloadCard>
179 |         <JsonPayloadCard json={conversationData} title="Connection data">
180 |           <div>Connection data</div>
181 |         </JsonPayloadCard>
182 |       </FlexWrap>
183 |     </>
184 |   )
185 | }
186 | 
187 | export default Index
188 |

--------------------------------------------------------------------------------
/pages/conversations/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import { PhoneConfigurations } from '../../components/PhoneConfigurations'
  3 | import { css } from '@emotion/css'
  4 | import tw from '@tailwindcssinjs/macro'
  5 | import {
  6 |   Card,
  7 |   FlexWrap,
  8 |   ConversationCard,
  9 |   TypingIntro,
 10 |   Divider,
 11 |   ProtectedPage,
 12 |   Link,
 13 | } from '../../components'
 14 | import { useConnection, useConversation, useAuth } from '../../hooks'
 15 | 
 16 | const INSIGHT_TYPES = ['question', 'action_item']
 17 | const Index = () => {
 18 |   const [connectionId, setConnectionId] = useConnection()
 19 |   const { conversationData, setConversationData } = useConversation()
 20 | 
 21 |   function handleConnection(data: any) {
 22 |     setConnectionId(data.connectionId)
 23 |     setConversationData(data)
 24 |   }
 25 | 
 26 |   return (
 27 |     <ProtectedPage>
 28 |       <TypingIntro>
 29 |         This page showcasing what you can do with Conversation API
 30 |       </TypingIntro>
 31 |       <Divider />
 32 |       <div className={css(tw`text-red-400 p-2`)}>
 33 |         You can use test conversationId:{' '}
 34 |         <span className={css(tw`text-blue-400`)}>6055920157065216</span> or call
 35 |         your phone and get conversationId from conversationData
 36 |       </div>
 37 |       <Link href="https://docs.symbl.ai/#conversation-api">
 38 |         You can use Conversations API to retrieve lots of data from the
 39 |         conversation. Here you can either call your phone number or enter
 40 |         conversationId and retrieve different types of data for existing
 41 |         conversation.
 42 |       </Link>
 43 |       <Divider />
 44 |       <PhoneConfigurations
 45 |         clientOnly
 46 |         connectionResponseHandler={handleConnection}
 47 |         insightTypes={INSIGHT_TYPES}
 48 |       />
 49 |       {conversationData && conversationData.conversationId ? (
 50 |         <label
 51 |           className={css(tw`text-indigo-300`)}
 52 |         >{`conversationId ${conversationData.conversationId}`}</label>
 53 |       ) : null}
 54 |       <Divider />
 55 |       <FlexWrap>
 56 |         <Card title="ConnectionData">
 57 |           <div>
 58 |             <textarea
 59 |               className={css(tw`h-32 w-full bg-black p-4 mt-4`)}
 60 |               value={JSON.stringify(conversationData, null, 2)}
 61 |             />
 62 |             <div>
 63 |               Here you will see connection data. To check out API check here:
 64 |               <a
 65 |                 className={css(tw`text-blue-400 p-4`)}
 66 |                 href="https://docs.symbl.ai/#conversation-api"
 67 |                 target="_blank"
 68 |                 rel="noreferrer"
 69 |               >
 70 |                 here
 71 |               </a>
 72 |             </div>
 73 |           </div>
 74 |         </Card>
 75 |         <ConversationCard
 76 |           title="Messages"
 77 |           type="messages"
 78 |           conversationId={
 79 |             (conversationData && conversationData.conversationId) || ''
 80 |           }
 81 |         >
 82 |           <div>
 83 |             <div className="text-gray-500">
 84 |               Transcribed messages from conversation
 85 |               <span className="text-blue-400 p-2">
 86 |                 api.symbl.ai/v1/conversations/[conversationId]/messages
 87 |               </span>
 88 |             </div>
 89 |           </div>
 90 |         </ConversationCard>
 91 |         <ConversationCard
 92 |           title="Participants"
 93 |           type="members"
 94 |           conversationId={
 95 |             (conversationData && conversationData.conversationId) || ''
 96 |           }
 97 |         >
 98 |           <div>
 99 |             <div className="text-gray-500">
100 |               Get Participants or attendees of conversation
101 |               <span className="text-blue-400 p-2">
102 |                 api.symbl.ai/v1/conversations/[conversationId]/members
103 |               </span>
104 |             </div>
105 |           </div>
106 |         </ConversationCard>
107 |         <ConversationCard
108 |           title="Insights"
109 |           type="insights"
110 |           conversationId={
111 |             (conversationData && conversationData.conversationId) || ''
112 |           }
113 |         >
114 |           <div>
115 |             <div className="text-gray-500">
116 |               Get Insights from conversation
117 |               <span className="text-blue-400 p-2">
118 |                 api.symbl.ai/v1/conversations/[conversationId]/insights
119 |               </span>
120 |             </div>
121 |           </div>
122 |         </ConversationCard>
123 |         <ConversationCard
124 |           title="Topics"
125 |           type="topics"
126 |           conversationId={
127 |             (conversationData && conversationData.conversationId) || ''
128 |           }
129 |         >
130 |           <div>
131 |             <div className="text-gray-500">
132 |               Topics of conversation
133 |               <span className="text-blue-400 p-2">
134 |                 api.symbl.ai/v1/conversations/[conversationId]/topics
135 |               </span>
136 |             </div>
137 |           </div>
138 |         </ConversationCard>
139 |         <ConversationCard
140 |           title="Questions"
141 |           type="questions"
142 |           conversationId={
143 |             (conversationData && conversationData.conversationId) || ''
144 |           }
145 |         >
146 |           <div>
147 |             <div className="text-gray-500">
148 |               Questions that were asked during conversation
149 |             </div>
150 |             <div className="text-blue-400 p-2">
151 |               api.symbl.ai/v1/conversations/[conversationId]/questions
152 |             </div>
153 |           </div>
154 |         </ConversationCard>
155 |         <ConversationCard
156 |           title="Follow ups"
157 |           type="follow-ups"
158 |           conversationId={
159 |             (conversationData && conversationData.conversationId) || ''
160 |           }
161 |         >
162 |           <div>
163 |             <div className="text-gray-500">
164 |               Insights of different types will be presented here. For example
165 |               action items, questions, tasks etc
166 |             </div>
167 |             <span className="text-blue-400 p-2">
168 |               api.symbl.ai/v1/conversations/[conversationId]/follow-ups
169 |             </span>
170 |           </div>
171 |         </ConversationCard>
172 |         <ConversationCard
173 |           title="Action items"
174 |           type="action-items"
175 |           conversationId={
176 |             (conversationData && conversationData.conversationId) || ''
177 |           }
178 |         >
179 |           <div>
180 |             <div className="text-gray-500">
181 |               Action Items parsed from the conversation
182 |             </div>
183 |             <span className="text-blue-400 p-2">
184 |               api.symbl.ai/v1/conversations/[conversationId]/action-items
185 |             </span>
186 |           </div>
187 |         </ConversationCard>
188 |       </FlexWrap>
189 |     </ProtectedPage>
190 |   )
191 | }
192 | 
193 | export default Index
194 |

--------------------------------------------------------------------------------
/docs/how-to-nextjs-telephony-rest.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide, we will see how we can use Symbl [telephony API](https://docs.symbl.ai/#real-time-telephony-api) to call on the phone or meeting url and get live transcription in NextJS app. Symbl comes with NodeJS api, so same thing we can get by using NodeJS SDK on the server side since there are some use cases that you would want to use particularly server side.For example if you want to do some business logic decisions based on the data received from symbl.
  4 | 
  5 | The main flow that we want to achieve is that you can enter your phone number in UI and hit on ![](./imgs/call.png) button.
  6 | 
  7 | This is how the UI of the demo app will look like:
  8 | 
  9 | ![text page screenshot](./imgs/nodeui.png)
 10 | 
 11 | In addition to phone number, you can actually select whether you want to use Public Switched Telephony Networks (PSTN) or Session Initaition Protocol (SIP). You will be also able to add advanced params such as DTMF code or Summary email, where to send insights summary once conversation is finished
 12 | 
 13 | ## Get Started
 14 | 
 15 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 16 | 
 17 | #### Retrieve your credentials
 18 | 
 19 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 20 | 
 21 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 22 | 
 23 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 24 | 
 25 | ```javascript
 26 | module.exports = {
 27 |   env: {
 28 |     APP_ID: '',
 29 |     APP_SECRET: '',
 30 |   },
 31 | }
 32 | ```
 33 | 
 34 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 35 | 
 36 | Page you are looking for this tutorial is `/phone` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/phone/index.tsx)
 37 | 
 38 | At first you will see the following. ![](./imgs/notlogged.png)
 39 | 
 40 | In order to see the app we will need to login.
 41 | 
 42 | ### Authenticating
 43 | 
 44 | When using REST API, we would need to pass auth token in header. For that we've created component `ProtectedPage`. This component executes Symbl specific REST endpoint, to retrieve auth token and store it in context.
 45 | 
 46 | Later on we can retrieve this token from the helper hook `useAuth` which is basically a wrapper for `useContext`.
 47 | 
 48 | `export const useAuth = () => useContext(AuthContext)`
 49 | 
 50 | This is how we would retrieve the token:
 51 | 
 52 | ```javascript
 53 | async function loginToSymbl() {
 54 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
 55 |       method: 'POST',
 56 |       headers: {
 57 |         'Content-Type': 'application/json',
 58 |       },
 59 |       mode: 'cors',
 60 |       body: JSON.stringify({
 61 |         type: 'application',
 62 |         appId: process.env.APP_ID,
 63 |         appSecret: process.env.APP_SECRET,
 64 |       }),
 65 |     })
 66 |     const json = await response.json()
 67 |     console.log('Access Token is: ', json)
 68 |     setToken(json.accessToken)
 69 | ```
 70 | 
 71 | Later on in any place in application we can use `const { token } = useAuth()` to get the token.
 72 | 
 73 | ## Calling phone or meeting using REST API
 74 | 
 75 | First of all what we need to do is to collect parameters from the user to send to Symbl Telephoni REST API, so Symbl will know how to initiate the call and how to process the conversation.
 76 | 
 77 | - `type` - Symbl supports two meetings types. `PSTN` and `SIP`
 78 | - `phoneNumber` - Naturally we need to have a phone number to call, but in case of `SIP` type we will need to call url. Something like `sip:124@domain.com`. For simplicity we will pass this data under `phoneNumber` parameter.
 79 | - `dtmf` - This will be meeting code, which we need to pass in case meeting has such a code
 80 | - `summaryEmail` - you can pass a list of emails which will get summary of the call email.
 81 | - `insightTypes` - there are several insight types that we can pass to Symbl.
 82 | 
 83 | Collecting these parameters is basically a set of React controlled input fields. You can check component `PhoneConfigurations.tsx` if you are curious how it's implemented.
 84 | 
 85 | This component have two different behaviours. One is calling `api/call` route, that we've covered in (how-to-nextjs-node-sdk.md)[./how-to-nextjs-node-sdk.md] guide. The other version of it is basically instead of calling `api/call` with user entered parameters, to call
 86 | 
 87 | `https://api.symbl.ai/v1/endpoint:connect`
 88 | 
 89 | This will look like this:
 90 | 
 91 | ```typescript
 92 | const phoneNumberOrUri =
 93 |   type === 'sip' ? { uri: _phoneNumber } : { phoneNumber: _phoneNumber }
 94 | const res = await fetch('https://api.symbl.ai/v1/endpoint:connect', {
 95 |   method: 'POST',
 96 |   headers: {
 97 |     'x-api-key': token as string,
 98 |     'Content-Type': 'application/json',
 99 |   },
100 |   mode: 'cors',
101 |   body: JSON.stringify({
102 |     operation: 'start',
103 |     endpoint: {
104 |       type,
105 |       ...phoneNumberOrUri,
106 |       dtmf,
107 |     },
108 |     insightTypes,
109 |     actions: [
110 |       {
111 |         invokeOn: 'stop',
112 |         name: 'sendSummaryEmail',
113 |         parameters: {
114 |           emails: summaryEmails.split(','),
115 |         },
116 |       },
117 |     ],
118 |     data: {
119 |       session: {
120 |         name: 'Call from nextjs Phone(Client only)',
121 |       },
122 |     },
123 |   }),
124 | })
125 | ```
126 | 
127 | When we will execute `fetch` call to `endpoint:connect` endpoint, you will get a phone call either on your phone or `sip` url according to what you've chosen in UI.
128 | 
129 | What we also need to do is to actually get a response of api call and set our connectionId in the app. We will do that by calling `connectionResponseHandler` callback function that we pass to `PhoneConfigurations.tsx` component. There we will set our response as `conversationData` in our app.
130 | 
131 | ## Connecting via websockets to get live transcriptions
132 | 
133 | Now when we've got our phone call, we need to have a way to get realtime insights on the ongoing conversation. What we will do is monitor `conversationData` changes and if it changes, we will start our websocket.
134 | 
135 | ```typescript
136 | useEffect(() => {
137 |   let ws: any = null
138 | 
139 |   //Check if we have conversationData and if we haven't already started websocket connection
140 |   if (conversationData && !ws) {
141 |     ws = new WebSocket(
142 |       `wss://api.symbl.ai/session/subscribe/${connectionId}?access_token=${token}`
143 |     )
144 |     ws.onmessage = (event: MessageEvent) => {
145 |       const data = JSON.parse(event.data)
146 |       if (data.type === 'message_response') {
147 |         setMessages(data.messages)
148 |       }
149 |       if (data.type === 'transcript_response') {
150 |         setLiveTranscript(data)
151 |       }
152 |       setRealTimeData(data)
153 |     }
154 |   }
155 | 
156 |   // cleanup method which will be called before next execution. in your case unmount.
157 |   return () => {
158 |     ws && ws.close
159 |   }
160 | }, [conversationData])
161 | ```
162 | 
163 | Here we will subscribe to Symbl websocket url `wss://api.symbl.ai/session/subscribe/${connectionId}?access_token=${token}` to get realtime insights on ongoing conversation.
164 | 
165 | We will get either `transcript_response` type or `message_response` type or `insight_response` type. For example `message_response` will look like this:
166 | 
167 | ```json
168 | {
169 |   "type": "message_response",
170 |   "messages": [
171 |     {
172 |       "from": {},
173 |       "payload": {
174 |         "content": "Yeah, tell us sir.",
175 |         "contentType": "text/plain"
176 |       },
177 |       "duration": {
178 |         "startTime": "2020-10-22T15:32:14.500Z",
179 |         "endTime": "2020-10-22T15:32:16.000Z"
180 |       }
181 |     }
182 |   ]
183 | }
184 | ```
185 | 
186 | Now what is left is to render UI based on what data we get.
187 | 
188 | ## Summary
189 | 
190 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to use [Symbl Telephony API](https://docs.symbl.ai/#real-time-telephony-api) and start a phone call and subscribe to real time updates.
191 | Even though the code shared in this How To is React specific, The general flow can be used with any framework
192 | 
193 | 1. Authenticate and get the token
194 | 2. Call Telephoni API REST endpoint with correct parameters
195 | 
196 | ```javascript
197 | const endpoint = 'https://api.symbl.ai/v1/endpoint:connect'
198 | ```
199 | 
200 | 3. Get as a response `conversationId`
201 | 4. Use [Conversation API](https://docs.symbl.ai/#conversation-api) to get insights about the text.
202 | 
203 | You can read more about Telephoni API [here](https://docs.symbl.ai/#real-time-telephony-api)
204 |

--------------------------------------------------------------------------------
/pages/audio/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef, MutableRefObject, useMemo } from 'react'
  2 | import { css } from '@emotion/css'
  3 | import tw from '@tailwindcssinjs/macro'
  4 | import {
  5 |   Card,
  6 |   ConversationCard,
  7 |   TypingIntro,
  8 |   Divider,
  9 |   ProtectedPage,
 10 |   FileOrUrlInput,
 11 |   FileOrUrlInputSubmitType,
 12 |   FlexWrap,
 13 |   JsonPayloadCard,
 14 |   Link,
 15 |   ParamsToggle,
 16 |   AsyncParamsUI,
 17 | } from '../../components'
 18 | 
 19 | import {
 20 |   useConversation,
 21 |   useAudioAsyncAPI,
 22 |   useAsyncApiParams,
 23 | } from '../../hooks'
 24 | import { Transcripts, Topics } from '@symblai/react-elements'
 25 | 
 26 | const Index = () => {
 27 |   const { conversationData } = useConversation()
 28 |   const [file, setFile] = useState()
 29 |   const [audioUrl, setAudioUrl] = useState('')
 30 | 
 31 |   const asyncApiParams = useAsyncApiParams()
 32 |   const { jobStatus, sentForProcessing } = useAudioAsyncAPI(
 33 |     audioUrl !== '' ? audioUrl : file,
 34 |     asyncApiParams.query
 35 |   )
 36 | 
 37 |   const onAudioSubmit = async (data: FileOrUrlInputSubmitType) => {
 38 |     if (data.type === 'file') {
 39 |       setFile(data?.file as any)
 40 |     } else {
 41 |       setAudioUrl(data?.url as string)
 42 |     }
 43 |   }
 44 | 
 45 |   const shouldRenderInput =
 46 |     (jobStatus as any)?.status !== 'in_progress' &&
 47 |     !jobStatus &&
 48 |     !sentForProcessing
 49 | 
 50 |   const transcodingCaption =
 51 |     sentForProcessing && !jobStatus
 52 |       ? 'Transcoding...'
 53 |       : jobStatus && (jobStatus as any).status === 'in_progress'
 54 |       ? `Processing with Symbl...`
 55 |       : 'Processed and ready'
 56 | 
 57 |   return (
 58 |     <ProtectedPage>
 59 |       <TypingIntro>
 60 |         This page showcasing what you can do with Async Audio and Conversation
 61 |         API
 62 |       </TypingIntro>
 63 |       <Divider />
 64 |       <Link href="https://docs.symbl.ai/#audio-api">
 65 |         You can also process audio files or urls with Symbl and get insights.
 66 |         You can check out the docs on more API info
 67 |       </Link>
 68 |       <Divider />
 69 |       <div className={css(tw`text-red-400 p-2`)}>
 70 |         You can use either mp3 or wav url or upload a file
 71 |       </div>
 72 |       {shouldRenderInput ? (
 73 |         <FileOrUrlInput onSubmit={onAudioSubmit} />
 74 |       ) : (
 75 |         <div className={css(tw`text-blue-400 p-2`)}>{transcodingCaption}</div>
 76 |       )}
 77 |       <Divider />
 78 |       <ParamsToggle>
 79 |         <AsyncParamsUI {...asyncApiParams} />
 80 |       </ParamsToggle>
 81 |       <Divider />
 82 |       <FlexWrap>
 83 |         <JsonPayloadCard title="Job Processing data" json={jobStatus}>
 84 |           <div>Job Processing data</div>
 85 |         </JsonPayloadCard>
 86 |         <JsonPayloadCard title="ConnectionData" json={conversationData}>
 87 |           <div>
 88 |             Here you will see Connection data. To check out API check here:
 89 |             <a
 90 |               className={css(tw`text-blue-400 p-4`)}
 91 |               href="https://docs.symbl.ai/#conversation-api"
 92 |               target="_blank"
 93 |               rel="noreferrer"
 94 |             >
 95 |               here
 96 |             </a>
 97 |           </div>
 98 |         </JsonPayloadCard>
 99 |       </FlexWrap>
100 |       <Divider />
101 |       <FlexWrap>
102 |         <Card title="Transcriptions using Symbl react elements">
103 |           <div>
104 |             <div className="text-gray-500">
105 |               This transcript are using predefined Transcripts element from{' '}
106 |               <a
107 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
108 |                 className={css(tw`text-blue-400`)}
109 |               >
110 |                 @symblai/react-elements
111 |               </a>
112 |             </div>
113 |             {jobStatus && (jobStatus as any).status === 'completed' && (
114 |               <Transcripts conversationId={conversationData.conversationId} />
115 |             )}
116 |           </div>
117 |         </Card>
118 |         <Card title="Topics using Symbl react elements">
119 |           <div>
120 |             <div className="text-gray-500">
121 |               This transcript are using predefined Transcripts element from{' '}
122 |               <a
123 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
124 |                 className={css(tw`text-blue-400`)}
125 |               >
126 |                 @symblai/react-elements
127 |               </a>
128 |             </div>
129 |             {jobStatus && (jobStatus as any).status === 'completed' && (
130 |               <Topics conversationId={conversationData.conversationId} />
131 |             )}
132 |           </div>
133 |         </Card>
134 |       </FlexWrap>
135 |       <Divider />
136 |       <FlexWrap>
137 |         <ConversationCard
138 |           title="Messages"
139 |           type="messages"
140 |           conversationId={
141 |             (conversationData && conversationData.conversationId) || ''
142 |           }
143 |         >
144 |           <div>
145 |             <div className="text-gray-500">
146 |               Transcribed messages from conversation
147 |               <span className="text-blue-400 p-2">
148 |                 api.symbl.ai/v1/conversations/[conversationId]/messages
149 |               </span>
150 |             </div>
151 |           </div>
152 |         </ConversationCard>
153 |         <ConversationCard
154 |           title="Participants"
155 |           type="members"
156 |           conversationId={
157 |             (conversationData && conversationData.conversationId) || ''
158 |           }
159 |         >
160 |           <div>
161 |             <div className="text-gray-500">
162 |               Get Participants or attendees of conversation
163 |               <span className="text-blue-400 p-2">
164 |                 api.symbl.ai/v1/conversations/[conversationId]/members
165 |               </span>
166 |             </div>
167 |           </div>
168 |         </ConversationCard>
169 |         <ConversationCard
170 |           title="Insights"
171 |           type="insights"
172 |           conversationId={
173 |             (conversationData && conversationData.conversationId) || ''
174 |           }
175 |         >
176 |           <div>
177 |             <div className="text-gray-500">
178 |               Get Insights from conversation
179 |               <span className="text-blue-400 p-2">
180 |                 api.symbl.ai/v1/conversations/[conversationId]/insights
181 |               </span>
182 |             </div>
183 |           </div>
184 |         </ConversationCard>
185 |         <ConversationCard
186 |           title="Topics"
187 |           type="topics"
188 |           conversationId={
189 |             (conversationData && conversationData.conversationId) || ''
190 |           }
191 |         >
192 |           <div>
193 |             <div className="text-gray-500">
194 |               Topics of conversation
195 |               <span className="text-blue-400 p-2">
196 |                 api.symbl.ai/v1/conversations/[conversationId]/topics
197 |               </span>
198 |             </div>
199 |           </div>
200 |         </ConversationCard>
201 |         <ConversationCard
202 |           title="Questions"
203 |           type="questions"
204 |           conversationId={
205 |             (conversationData && conversationData.conversationId) || ''
206 |           }
207 |         >
208 |           <div>
209 |             <div className="text-gray-500">
210 |               Questions that were asked during conversation
211 |             </div>
212 |             <div className="text-blue-400 p-2">
213 |               api.symbl.ai/v1/conversations/[conversationId]/questions
214 |             </div>
215 |           </div>
216 |         </ConversationCard>
217 |         <ConversationCard
218 |           title="Follow ups"
219 |           type="follow-ups"
220 |           conversationId={
221 |             (conversationData && conversationData.conversationId) || ''
222 |           }
223 |         >
224 |           <div>
225 |             <div className="text-gray-500">
226 |               Insights of different types will be presented here. For example
227 |               action items, questions, tasks etc
228 |             </div>
229 |             <span className="text-blue-400 p-2">
230 |               api.symbl.ai/v1/conversations/[conversationId]/follow-ups
231 |             </span>
232 |           </div>
233 |         </ConversationCard>
234 |         <ConversationCard
235 |           title="Action items"
236 |           type="action-items"
237 |           conversationId={
238 |             (conversationData && conversationData.conversationId) || ''
239 |           }
240 |         >
241 |           <div>
242 |             <div className="text-gray-500">
243 |               Action Items parsed from the conversation
244 |             </div>
245 |             <span className="text-blue-400 p-2">
246 |               api.symbl.ai/v1/conversations/[conversationId]/action-items
247 |             </span>
248 |           </div>
249 |         </ConversationCard>
250 |       </FlexWrap>
251 |     </ProtectedPage>
252 |   )
253 | }
254 | 
255 | export default Index
256 |

--------------------------------------------------------------------------------
/docs/how-to-text-processing.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide we will dive into how we can use Symbl AI Async API to retrieve insights about conversation. Conversation should be in the format compliant with [Messages API](https://docs.symbl.ai/#get-messages-transcript). This guide is somewhat specific to React ecosystem and you can see the full code of how it's implemented within NextJS demo app [here](https://github.com/symblai/nextjs-symblai-demo).
  4 | 
  5 | The main flow that we want to achieve is that you can submit a text in JSON format an input field and click ![](./imgs/submitbutton.png).
  6 | 
  7 | This is how the UI of the demo app will look like:
  8 | 
  9 | ![text page screenshot](./imgs/text.png)
 10 | 
 11 | On the left side there is a textfield where you can paste JSON in correct format, but for the convenience in this demo we've created UI, that helps you to construct messages in correct format by writing name and, message. userId and conversation type are optional.
 12 | 
 13 | You also have a flag `detectActionPhraseForMessages`. When true is passed it shows Actionable Phrases in each sentence of conversation.
 14 | 
 15 | ![text page screenshot](./imgs/text2.png)
 16 | 
 17 | When Text will be sent to processing, You will see in the UI bunch of JSON data that contributes to text processing and once processing is finished you can check out Text Transcripts, rendered using package `@symblai/react-elements`
 18 | 
 19 | ![text processed](./imgs/text3.png)
 20 | 
 21 | ## Get Started
 22 | 
 23 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 24 | 
 25 | #### Retrieve your credentials
 26 | 
 27 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 28 | 
 29 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 30 | 
 31 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 32 | 
 33 | ```javascript
 34 | module.exports = {
 35 |   env: {
 36 |     APP_ID: '',
 37 |     APP_SECRET: '',
 38 |   },
 39 | }
 40 | ```
 41 | 
 42 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 43 | 
 44 | Page you are looking for this tutorial is `/text` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/text/index.tsx)
 45 | 
 46 | At first you will see the following. ![](./imgs/notlogged.png)
 47 | 
 48 | In order to see the app we will need to login.
 49 | 
 50 | ### Authenticating
 51 | 
 52 | When using REST API, we would need to pass auth token in header. For that we've created component `ProtectedPage`. This component executes Symbl specific REST endpoint, to retrieve auth token and store it in context.
 53 | 
 54 | Later on we can retrieve this token from the helper hook `useAuth` which is basically a wrapper for `useContext`.
 55 | 
 56 | `export const useAuth = () => useContext(AuthContext)`
 57 | 
 58 | This is how we would retrieve the token:
 59 | 
 60 | ```javascript
 61 | async function loginToSymbl() {
 62 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
 63 |       method: 'POST',
 64 |       headers: {
 65 |         'Content-Type': 'application/json',
 66 |       },
 67 |       mode: 'cors',
 68 |       body: JSON.stringify({
 69 |         type: 'application',
 70 |         appId: process.env.APP_ID,
 71 |         appSecret: process.env.APP_SECRET,
 72 |       }),
 73 |     })
 74 |     const json = await response.json()
 75 |     console.log('Access Token is: ', json)
 76 |     setToken(json.accessToken)
 77 | ```
 78 | 
 79 | Later on in any place in application we can use `const { token } = useAuth()` to get the token.
 80 | 
 81 | ### Using Symbl Text Async API
 82 | 
 83 | The Async Text API allows you to process any text payload to get the transcription and conversational insights. It can be useful in any use case where you have access to the textual content of a type of conversation, and you want to extract the insightful items supported by the Conversation API. If you want to add more content to the same conversation, use [PUT Async Text API](https://docs.symbl.ai/#text-api).
 84 | 
 85 | Symbl Text async API will return `jobId` which we can monitor for completion by using polling mechanism. Once job is completed, we will get `conversationId` which we can use to retrieve data with Conversation API.
 86 | 
 87 | #### Text upload and processing
 88 | 
 89 | Text async API is built for particular format of messages list that you can upload and parse to get conversational insights. The format should look something like that:
 90 | 
 91 | ```json
 92 | [
 93 |   {
 94 |     "payload": {
 95 |       "content": "Hi Mike, Natalia here. Hope you don’t mind me reaching out. Who would be the best possible person to discuss internships and student recruitment at ABC Corp? Would you mind pointing me toward the right person and the best way to reach them? Thanks in advance for your help, I really appreciate it!"
 96 |     },
 97 |     "from": {
 98 |       "userId": "natalia@example.com",
 99 |       "name": "Natalia"
100 |     },
101 |     "duration": {
102 |       "startTime": "2020-07-21T16:02:19.01Z",
103 |       "endTime": "2020-07-21T16:04:19.99Z"
104 |     }
105 |   },
106 |   {
107 |     "payload": {
108 |       "content": "Hey Natalia, thanks for reaching out. I am connecting you with Steve who handles recruitements for us."
109 |     },
110 |     "from": {
111 |       "userId": "mike@abccorp.com",
112 |       "name": "Mike"
113 |     },
114 |     "duration": {
115 |       "startTime": "2020-07-21T16:04:19.99Z",
116 |       "endTime": "2020-07-21T16:04:20.99Z"
117 |     }
118 |   }
119 | ]
120 | ```
121 | 
122 | So we will have a textarea on the page where you can paste you content. Then in order to process it, you need to click ![](./imgs/submitbutton.png) button.
123 | For convenience we will also have "chat like" UI which we can use to build the json in the format mentioned above and submit it for processing.
124 | 
125 | ![](./imgs/chat.png)
126 | 
127 | Once you submit text for processing, there are several things that happen
128 | 
129 | #### 1. Get Relevant params for Text
130 | 
131 | You will see the following params defined within `useEffect`
132 | 
133 | ```typescript
134 | const requestTextOptions = {
135 |   method: 'POST',
136 |   headers: {
137 |     'x-api-key': token,
138 |     'Content-Type': 'application/json',
139 |   },
140 |   body: JSON.stringify({
141 |     messages: JSON.parse(data),
142 |   }),
143 | }
144 | 
145 | const requestOptions = {
146 |   method: 'GET',
147 |   headers: {
148 |     'x-api-key': token,
149 |   },
150 | }
151 | ```
152 | 
153 | 3. #### Use Job API to poll for job status.
154 | 
155 | Previously we mentioned that there should be some kind of polling mechanism to check whether the job is finished or not. Symbl has [Job API](https://docs.symbl.ai/#job-api) That we can use for that.
156 | 
157 | ```typescript
158 | async function check(jobId: string) {
159 |   const checkJob = await fetch(
160 |     `https://api.symbl.ai/v1/job/${jobId}`,
161 |     requestOptions
162 |   )
163 |   const checkJobJson = await checkJob.json()
164 |   setJobStatus(checkJobJson)
165 |   if (checkJobJson.status === 'in_progress') {
166 |     check(jobId)
167 |     return
168 |   } else {
169 |     setSentForProcessing(false)
170 |   }
171 | }
172 | ```
173 | 
174 | In this function we are polling the Job API endpoint passing a Job Id, which we've received as a response to from text async api. We will poll untill we get `completed` status.
175 | 
176 | 4. Send text to processing
177 | 
178 | ```typescript
179 | // Execute the request
180 | const processingResponse = await fetch(
181 |   'https://api.symbl.ai/v1/process/text',
182 |   requestTextOptions
183 | )
184 | const processingResponseJson = await processingResponse.json()
185 | // Check Job Status
186 | check(processingResponseJson.jobId)
187 | ```
188 | 
189 | After Job is finished we can get data from Conversation API. We will do that by using `<ConversationCard/>`component.
190 | 
191 | On this page you will also see this component `<Transcripts conversationId={conversationData.conversationId} />`
192 | 
193 | This is prebuilt component from `@symblai/react-elements` package. As soon as you provide it with `conversationId`, It will nicely render conversation transcripts. There is also `<Topics conversationId={conversationData.conversationId}/>` component that will do the same but for topics.
194 | 
195 | ## Summary
196 | 
197 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to send your text to processing and get insights on what was the conversation about. Conversation should be sent in a format of messages [Messages API](https://docs.symbl.ai/#get-messages-transcript). For that we've built a helper UI that helps creating messages in this format. It also supports pasting JSON.
198 | Even though the code shared in this How To is React specific, The general flow can be used with any framework
199 | 
200 | 1. Authenticate and get the token
201 | 2. Send text in correct format to correct endpoint
202 | 
203 | ```javascript
204 | const endpoint = 'https://api.symbl.ai/v1/process/text'
205 | ```
206 | 
207 | 3. Get as a response `jobId`
208 | 4. Poll Job API endpoint to get processing status
209 |    `https://api.symbl.ai/v1/job/${jobId}`
210 | 5. Get the `conversationId` back when processing is completed
211 | 6. Use [Conversation API](https://docs.symbl.ai/#conversation-api) to get insights about the text.
212 | 
213 | You can read more about Async Text API [here](https://docs.symbl.ai/#text-api)
214 |

--------------------------------------------------------------------------------
/docs/how-to-audio-processing.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide we will dive into how we can use Symbl AI Async API to retrieve insights on Audio File or URL. This guide is somewhat specific to React ecosystem and you can see the full code of how it's implemented within NextJS demo app [here](https://github.com/symblai/nextjs-symblai-demo).
  4 | 
  5 | The main flow that we want to achieve is that you can upload an audio file or paste a URL within an input field and click ![](./imgs/submitbutton.png).
  6 | 
  7 | This is how the UI of the demo app will look like:
  8 | 
  9 | ![audio page screenshot](./imgs/audio.png)
 10 | 
 11 | When Audio will be sent to processing, You will see in the UI bunch of JSON data that contributes to audio processing and once processing is finished you will get transcripts for the audio. You also can query Symbl [Conversation API](https://docs.symbl.ai/#conversation-api) to get different insights on the audio.
 12 | 
 13 | ![audio processed](./imgs/audioprocessed.png)
 14 | ![audio processed](./imgs/audioconversational.png)
 15 | 
 16 | ## Get Started
 17 | 
 18 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 19 | 
 20 | #### Retrieve your credentials
 21 | 
 22 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 23 | 
 24 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 25 | 
 26 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 27 | 
 28 | ```javascript
 29 | module.exports = {
 30 |   env: {
 31 |     APP_ID: '',
 32 |     APP_SECRET: '',
 33 |   },
 34 | }
 35 | ```
 36 | 
 37 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 38 | 
 39 | Page you are looking for this tutorial is `/audio` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/audio/index.tsx)
 40 | 
 41 | At first you will see the following. ![](./imgs/notlogged.png)
 42 | 
 43 | In order to see the app we will need to login.
 44 | 
 45 | ### Authenticating
 46 | 
 47 | When using REST API, we would need to pass auth token in header. For that we've created component `ProtectedPage`. This component executes Symbl specific REST endpoint, to retrieve auth token and store it in context. Later on we can retrieve this token from the helper hook `useAuth`
 48 | 
 49 | This is how we would retrieve the token:
 50 | 
 51 | ```javascript
 52 | async function loginToSymbl() {
 53 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
 54 |       method: 'POST',
 55 |       headers: {
 56 |         'Content-Type': 'application/json',
 57 |       },
 58 |       mode: 'cors',
 59 |       body: JSON.stringify({
 60 |         type: 'application',
 61 |         appId: process.env.APP_ID,
 62 |         appSecret: process.env.APP_SECRET,
 63 |       }),
 64 |     })
 65 |     const json = await response.json()
 66 |     console.log('Access Token is: ', json)
 67 |     setToken(json.accessToken)
 68 | ```
 69 | 
 70 | As you can see there is a specific endpoint to generate the token by providing correct `APP_ID` or `APP_SECRET`
 71 | 
 72 | Later on in any place in application we can use `const { token } = useAuth()` to get the token.
 73 | 
 74 | ### Using Symbl audio Async API
 75 | 
 76 | Symbl Audio async API is used to process audio file or url and return `jobId` which we can monitor for completion using [Job API](https://docs.symbl.ai/#job-api) by using polling mechanism and checking job status. Once job is completed, we will get `conversationId` which we can use to retrieve data with the help of [Conversation API](https://docs.symbl.ai/#conversation-api).
 77 | 
 78 | #### File Upload and processing.
 79 | 
 80 | If you look at `pages/audio/index.tsx` file, you will notice that for file upload we are using
 81 | 
 82 | ```typescript
 83 | <FileOrUrlInput onSubmit={onAudioSubmit} />
 84 | ```
 85 | 
 86 | We won't dive into how it's implemented but basically the idea is to toggle between URL or file input. Once you click on the button ![](./imgs/submitbutton.png), it will call `onAudioSubmit` function passing either URL or file.
 87 | 
 88 | ```typescript
 89 | const onAudioSubmit = async (data: FileOrUrlInputSubmitType) => {
 90 |   if (data.type === 'file') {
 91 |     setFile(data?.file as any)
 92 |   } else {
 93 |     setAudioUrl(data?.url as string)
 94 |   }
 95 | }
 96 | ```
 97 | 
 98 | This will set our state.
 99 | All the processing is done within `useAudioAsyncAPI` hook. This hook monitors the state change
100 | 
101 | ```typescript
102 | const { jobStatus, sentForProcessing } = useAudioAsyncAPI(
103 |   audioUrl !== '' ? audioUrl : file,
104 |   asyncApiParams.query
105 | )
106 | ```
107 | 
108 | This hook monitors the state change using dependency array of `useEffect` and when state is changed it will start the flow.
109 | 
110 | 1. #### Get Request parameters for either file or url
111 | 
112 | First we need to get relevant parameters for the Audio URL or file. the difference is mainly the `Content-Type`.
113 | 
114 | You will see the following function defined within `useEffect`
115 | 
116 | ```typescript
117 | async function getFileOrUrlOptions() {
118 |   if (isFile) {
119 |     const file = data
120 |     const requestOptionsAudio = {
121 |       method: 'POST',
122 |       headers: {
123 |         'x-api-key': token,
124 |         'Content-Type': MIME_TYPES['mp3'],
125 |       },
126 |       body: file,
127 |     }
128 |     return requestOptionsAudio
129 |   } else {
130 |     const url = data
131 |     const requestOptionsAudio = await {
132 |       method: 'POST',
133 |       headers: {
134 |         'x-api-key': token,
135 |         'Content-Type': 'application/json',
136 |       },
137 |       body: JSON.stringify({
138 |         url: url,
139 |         confidenceThreshold: 0.6,
140 |         timezoneOffset: 0,
141 |       }),
142 |     }
143 |     return requestOptionsAudio
144 |   }
145 | }
146 | ```
147 | 
148 | Here we define a function to conditionally get different request parameters that we need to send in our REST call. After all there is a difference whether we send a file or URL
149 | 
150 | 2. Getting Symbl async Audio API endpoint.
151 | 
152 | Async API endpoint for audio processing will change based on whether it's url or file:
153 | 
154 | ```javascript
155 | const urlAudio = isFile
156 |   ? `https://api.symbl.ai/v1/process/audio${query}`
157 |   : `https://api.symbl.ai/v1/process/audio/url${query}`
158 | ```
159 | 
160 | We will use this endpoint to send audio url or audio file for processing. This endpoint will also accept a query string which we will use later on to pass parameters.
161 | 
162 | 3. #### Use Job API to poll for job status.
163 | 
164 | Previously we mentioned that there should be some kind of polling mechanism to check whether the job is finished or not. Symbl has [Job API](https://docs.symbl.ai/#job-api) That we can use for that.
165 | 
166 | ```typescript
167 | async function check(jobId: string) {
168 |   const checkJob = await fetch(
169 |     `https://api.symbl.ai/v1/job/${jobId}`,
170 |     requestOptions
171 |   )
172 |   const checkJobJson = await checkJob.json()
173 |   setJobStatus(checkJobJson)
174 |   if (checkJobJson.status === 'in_progress') {
175 |     check(jobId)
176 |     return
177 |   } else {
178 |     setSentForProcessing(false)
179 |   }
180 | }
181 | ```
182 | 
183 | In this function we are polling the Job API endpoint passing a Job Id, which we've received as a response from audio async api. We will poll untill we get `completed` status
184 | 
185 | 4.  Send audio to processing
186 | 
187 | ```typescript
188 | //Transcode and get Parameters
189 | const requestOptionsAudio = await getFileOrUrlOptions()
190 | // Execute the request
191 | const processingResponse = await fetch(urlAudio, requestOptionsAudio)
192 | const processingResponseJson = await processingResponse.json()
193 | // Check Job Status
194 | check(processingResponseJson.jobId)
195 | ```
196 | 
197 | After Job is finished we can get data from [Conversation API](https://docs.symbl.ai/#conversation-api). We will do that by using `<ConversationCard/>`component.
198 | 
199 | On this page you will also see this component `<Transcripts conversationId={conversationData.conversationId} />`
200 | 
201 | This is prebuilt component from `@symblai/react-elements` package. As soon as you provide it with `conversationId`, It will nicely render conversation transcripts. There is also `<Topics conversationId={conversationData.conversationId}/>` component that will do the same but for topics.
202 | 
203 | ### Passing additional Async API parameters to get more granular insights
204 | 
205 | We can pass various parameters to improve processing of audio files. These parameters can be passed as a query string.
206 | Such parameters include:
207 | 
208 | - `customVocabulary` - Contains a list of words and phrases that provide hints to the speech recognition task.
209 | - `detectActionPhraseForMessages` - Accepted values are true & false. It shows Actionable Phrases in each sentence of conversation. These sentences can be found in the Conversation's [Messages API](https://docs.symbl.ai/#get-messages-transcript).
210 | 
211 | Diarization parameters. You can read more about them [here](https://docs.symbl.ai/#audio-api)
212 | 
213 | ## Summary
214 | 
215 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to send your audio to processing and get insights on what was the conversation in the audio about. Even though the code shared in this How To is React specific, The general flow can be used with any framework
216 | 
217 | 1. Authenticate and get the token
218 | 2. Send audio url/file to correct endpoint
219 | 
220 | ```javascript
221 | const endpoint = isFile
222 |   ? `https://api.symbl.ai/v1/process/audio${query}`
223 |   : `https://api.symbl.ai/v1/process/audio/url${query}`
224 | ```
225 | 
226 | 3. Get as a response `jobId`
227 | 4. Poll Job API endpoint to get processing status
228 |    `https://api.symbl.ai/v1/job/${jobId}`
229 | 5. Get the `conversationId` back when processing is completed
230 | 6. Use [Conversation API](https://docs.symbl.ai/#conversation-api) to get insights about the audio.
231 |

--------------------------------------------------------------------------------
/pages/video/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef } from 'react'
  2 | import { css } from '@emotion/css'
  3 | import tw from '@tailwindcssinjs/macro'
  4 | import {
  5 |   TypingIntro,
  6 |   FileOrUrlInput,
  7 |   FileOrUrlInputSubmitType,
  8 |   Divider,
  9 |   FlexWrap,
 10 |   Card,
 11 |   Link,
 12 |   ProtectedPage,
 13 |   JsonPayloadCard,
 14 |   ConversationCard,
 15 |   VideoMessages,
 16 |   AsyncParamsUI,
 17 |   ParamsToggle,
 18 | } from '../../components'
 19 | import { Transcripts, Topics } from '@symblai/react-elements'
 20 | import {
 21 |   useConnection,
 22 |   useAuth,
 23 |   useConversation,
 24 |   useAsyncApiParams,
 25 |   useAsyncVideoApi,
 26 | } from '../../hooks'
 27 | 
 28 | const Index = () => {
 29 |   const [connectionId] = useConnection()
 30 |   const { conversationData, setConversationData } = useConversation()
 31 |   const [playbackTime, setPlaybackTime] = useState(0)
 32 |   const [file, setFile] = useState('')
 33 |   const [videoSrc, setVideoSrc] = useState('')
 34 |   const [videoUrl, setVideoUrl] = useState('')
 35 | 
 36 |   const asyncApiParams = useAsyncApiParams()
 37 | 
 38 |   const { jobStatus, sentForProcessing } = useAsyncVideoApi(
 39 |     videoUrl !== '' ? videoUrl : file,
 40 |     asyncApiParams.query
 41 |   )
 42 | 
 43 |   const videoRef = useRef<HTMLVideoElement>(null)
 44 | 
 45 |   const setMediaTime = (_newTime: any) => {
 46 |     console.log('setting Time ', _newTime)
 47 |     if (_newTime && typeof _newTime === 'number') {
 48 |       const videoElement = videoRef.current as HTMLVideoElement
 49 |       videoElement.currentTime = _newTime
 50 |       setPlaybackTime(_newTime)
 51 |     }
 52 |   }
 53 | 
 54 |   const shouldRenderInput =
 55 |     (jobStatus as any)?.status !== 'in_progress' &&
 56 |     !jobStatus &&
 57 |     !sentForProcessing
 58 | 
 59 |   const caption =
 60 |     sentForProcessing && !jobStatus
 61 |       ? 'Sending...'
 62 |       : jobStatus && (jobStatus as any).status === 'in_progress'
 63 |       ? `Processing with Symbl...`
 64 |       : 'Processed and ready'
 65 | 
 66 |   useEffect(() => {
 67 |     const src = URL.createObjectURL(new Blob([file], { type: 'video/mp4' }))
 68 |     setVideoSrc(src)
 69 |   }, [file])
 70 | 
 71 |   useEffect(() => {
 72 |     setVideoSrc(videoUrl)
 73 |   }, [videoUrl])
 74 | 
 75 |   const onVideoSubmit = async (data: FileOrUrlInputSubmitType) => {
 76 |     setConversationData(null)
 77 |     if (data.type === 'file') {
 78 |       setFile(data?.file as any)
 79 |     } else {
 80 |       setVideoUrl(data?.url as string)
 81 |     }
 82 |   }
 83 | 
 84 |   return (
 85 |     <ProtectedPage>
 86 |       <TypingIntro>
 87 |         This page uses Video Async API. Upload the video or provide a url to get
 88 |         insights
 89 |       </TypingIntro>
 90 |       <Link href="https://docs.symbl.ai/#video-api">
 91 |         You can also process video files or urls with Symbl and get insights.
 92 |         You can check out the docs on more API info. Make sure to also check out
 93 |         the Transcription component where you can click on individual
 94 |         transcriptions and get to specific point in the video, where the phrase
 95 |         was said
 96 |       </Link>
 97 |       <Divider />
 98 |       {connectionId ? (
 99 |         <label
100 |           className={css(tw`text-indigo-300`)}
101 |         >{`connectionId ${connectionId}`}</label>
102 |       ) : null}
103 |       {shouldRenderInput ? (
104 |         <FileOrUrlInput onSubmit={onVideoSubmit} />
105 |       ) : (
106 |         <div className={css(tw`text-blue-400 p-2`)}>{caption}</div>
107 |       )}
108 |       <ParamsToggle>
109 |         <AsyncParamsUI {...asyncApiParams} />
110 |       </ParamsToggle>
111 |       <FlexWrap>
112 |         <video
113 |           id="video-summary"
114 |           autoPlay
115 |           ref={videoRef}
116 |           controls
117 |           src={videoSrc}
118 |           className={css(tw`w-1/2`)}
119 |         />
120 |         <VideoMessages setPlaybackTime={setMediaTime} />
121 |         <JsonPayloadCard title="Job Processing data" json={jobStatus}>
122 |           <div>Job Processing data</div>
123 |         </JsonPayloadCard>
124 |         <JsonPayloadCard title="ConnectionData" json={conversationData}>
125 |           <div>
126 |             Here you will see Connection data. To check out API check here:
127 |             <a
128 |               className={css(tw`text-blue-400 p-4`)}
129 |               href="https://docs.symbl.ai/#conversation-api"
130 |               target="_blank"
131 |               rel="noreferrer"
132 |             >
133 |               here
134 |             </a>
135 |           </div>
136 |         </JsonPayloadCard>
137 |       </FlexWrap>
138 |       <Divider />
139 |       <FlexWrap>
140 |         <Card title="Transcriptions using Symbl react elements">
141 |           <div>
142 |             <div className="text-gray-500">
143 |               This transcript are using predefined Transcripts element from{' '}
144 |               <a
145 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
146 |                 className={css(tw`text-blue-400`)}
147 |               >
148 |                 @symblai/react-elements
149 |               </a>
150 |             </div>
151 |             {jobStatus && (jobStatus as any).status === 'completed' && (
152 |               <Transcripts conversationId={conversationData.conversationId} />
153 |             )}
154 |           </div>
155 |         </Card>
156 |         <Card title="Topics using Symbl react elements">
157 |           <div>
158 |             <div className="text-gray-500">
159 |               This transcript are using predefined Transcripts element from{' '}
160 |               <a
161 |                 href="https://www.npmjs.com/package/@symblai/react-elements"
162 |                 className={css(tw`text-blue-400`)}
163 |               >
164 |                 @symblai/react-elements
165 |               </a>
166 |             </div>
167 |             {jobStatus && (jobStatus as any).status === 'completed' && (
168 |               <Topics conversationId={conversationData.conversationId} />
169 |             )}
170 |           </div>
171 |         </Card>
172 |       </FlexWrap>
173 |       <Divider />
174 |       <FlexWrap>
175 |         <ConversationCard
176 |           title="Messages"
177 |           type="messages"
178 |           conversationId={
179 |             (conversationData && conversationData.conversationId) || ''
180 |           }
181 |         >
182 |           <div>
183 |             <div className="text-gray-500">
184 |               Transcribed messages from conversation
185 |               <span className="text-blue-400 p-2">
186 |                 api.symbl.ai/v1/conversations/[conversationId]/messages
187 |               </span>
188 |             </div>
189 |           </div>
190 |         </ConversationCard>
191 |         <ConversationCard
192 |           title="Participants"
193 |           type="members"
194 |           conversationId={
195 |             (conversationData && conversationData.conversationId) || ''
196 |           }
197 |         >
198 |           <div>
199 |             <div className="text-gray-500">
200 |               Get Participants or attendees of conversation
201 |               <span className="text-blue-400 p-2">
202 |                 api.symbl.ai/v1/conversations/[conversationId]/members
203 |               </span>
204 |             </div>
205 |           </div>
206 |         </ConversationCard>
207 |         <ConversationCard
208 |           title="Insights"
209 |           type="insights"
210 |           conversationId={
211 |             (conversationData && conversationData.conversationId) || ''
212 |           }
213 |         >
214 |           <div>
215 |             <div className="text-gray-500">
216 |               Get Insights from conversation
217 |               <span className="text-blue-400 p-2">
218 |                 api.symbl.ai/v1/conversations/[conversationId]/insights
219 |               </span>
220 |             </div>
221 |           </div>
222 |         </ConversationCard>
223 |         <ConversationCard
224 |           title="Topics"
225 |           type="topics"
226 |           conversationId={
227 |             (conversationData && conversationData.conversationId) || ''
228 |           }
229 |         >
230 |           <div>
231 |             <div className="text-gray-500">
232 |               Topics of conversation
233 |               <span className="text-blue-400 p-2">
234 |                 api.symbl.ai/v1/conversations/[conversationId]/topics
235 |               </span>
236 |             </div>
237 |           </div>
238 |         </ConversationCard>
239 |         <ConversationCard
240 |           title="Questions"
241 |           type="questions"
242 |           conversationId={
243 |             (conversationData && conversationData.conversationId) || ''
244 |           }
245 |         >
246 |           <div>
247 |             <div className="text-gray-500">
248 |               Questions that were asked during conversation
249 |             </div>
250 |             <div className="text-blue-400 p-2">
251 |               api.symbl.ai/v1/conversations/[conversationId]/questions
252 |             </div>
253 |           </div>
254 |         </ConversationCard>
255 |         <ConversationCard
256 |           title="Follow ups"
257 |           type="follow-ups"
258 |           conversationId={
259 |             (conversationData && conversationData.conversationId) || ''
260 |           }
261 |         >
262 |           <div>
263 |             <div className="text-gray-500">
264 |               Insights of different types will be presented here. For example
265 |               action items, questions, tasks etc
266 |             </div>
267 |             <span className="text-blue-400 p-2">
268 |               api.symbl.ai/v1/conversations/[conversationId]/follow-ups
269 |             </span>
270 |           </div>
271 |         </ConversationCard>
272 |         <ConversationCard
273 |           title="Action items"
274 |           type="action-items"
275 |           conversationId={
276 |             (conversationData && conversationData.conversationId) || ''
277 |           }
278 |         >
279 |           <div>
280 |             <div className="text-gray-500">
281 |               Action Items parsed from the conversation
282 |             </div>
283 |             <span className="text-blue-400 p-2">
284 |               api.symbl.ai/v1/conversations/[conversationId]/action-items
285 |             </span>
286 |           </div>
287 |         </ConversationCard>
288 |       </FlexWrap>
289 |     </ProtectedPage>
290 |   )
291 | }
292 | 
293 | export default Index
294 |

--------------------------------------------------------------------------------
/docs/how-to-video-processing.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide we will dive into how we can use Symbl AI Async API to retrieve insights on Video File or URL. This guide is somewhat specific to React ecosystem and you can see the full code of how it's implemented within NextJS demo app [here](https://github.com/symblai/nextjs-symblai-demo).
  4 | 
  5 | The main flow that we want to achieve is that you can upload a video file or paste a URL within an input field and click ![](./imgs/submitbutton.png).
  6 | 
  7 | This is how the UI of the demo app will look like:
  8 | 
  9 | ![video page screenshot](./imgs/video.png)
 10 | 
 11 | When Video will be sent to processing, You will see in the UI bunch of JSON data that contributes to video processing and once processing is finished you can check out Video Transcripts and even navigate these transcripts to move to specific part of the video by clicking on the transcript.
 12 | 
 13 | ![video processed](./imgs/videoprocessed.png)
 14 | 
 15 | ## Get Started
 16 | 
 17 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 18 | 
 19 | #### Retrieve your credentials
 20 | 
 21 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 22 | 
 23 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 24 | 
 25 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 26 | 
 27 | ```javascript
 28 | module.exports = {
 29 |   env: {
 30 |     APP_ID: '',
 31 |     APP_SECRET: '',
 32 |   },
 33 | }
 34 | ```
 35 | 
 36 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 37 | 
 38 | Page you are looking for this tutorial is `/video` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/video/index.tsx)
 39 | 
 40 | At first you will see the following. ![](./imgs/notlogged.png)
 41 | 
 42 | In order to see the app we will need to login.
 43 | 
 44 | ### Authenticating
 45 | 
 46 | When using REST API, we would need to pass auth token in header. For that we've created component `ProtectedPage`. This component executes Symbl specific REST endpoint, to retrieve auth token and store it in context.
 47 | 
 48 | Later on we can retrieve this token from the helper hook `useAuth` which is basically a wrapper for `useContext`.
 49 | 
 50 | `export const useAuth = () => useContext(AuthContext)`
 51 | 
 52 | This is how we would retrieve the token:
 53 | 
 54 | ```javascript
 55 | const { token, setToken } = useAuth()
 56 | 
 57 | async function loginToSymbl() {
 58 |     const response = await fetch('https://api.symbl.ai/oauth2/token:generate', {
 59 |       method: 'POST',
 60 |       headers: {
 61 |         'Content-Type': 'application/json',
 62 |       },
 63 |       mode: 'cors',
 64 |       body: JSON.stringify({
 65 |         type: 'application',
 66 |         appId: process.env.APP_ID,
 67 |         appSecret: process.env.APP_SECRET,
 68 |       }),
 69 |     })
 70 |     const json = await response.json()
 71 |     console.log('Access Token is: ', json)
 72 |     setToken(json.accessToken)
 73 | ```
 74 | 
 75 | As you can see there is a specific endpoint to generate the token by providing correct `APP_ID` or `APP_SECRET`
 76 | 
 77 | Later on in any place in application we can use `const { token } = useAuth()` to get the token.
 78 | 
 79 | ### Using Symbl Video Async API
 80 | 
 81 | Symbl Video async API is used to process video file or url and return `jobId` which we can monitor for completion using [Job API](https://docs.symbl.ai/#job-api) by using polling mechanism and checking job status. Once job is completed, we will get `conversationId` which we can use to retrieve data with the help of [Conversation API](https://docs.symbl.ai/#conversation-api).
 82 | 
 83 | #### File Upload and processing.
 84 | 
 85 | If you look at `pages/video/index.tsx` file, you will notice that for file upload we are using
 86 | 
 87 | ```typescript
 88 | <FileOrUrlInput onSubmit={onVideoSubmit} />
 89 | ```
 90 | 
 91 | We won't dive into how it's implemented but basically the idea is to toggle between URL or file input. Once you click on the button ![](./imgs/submitbutton.png), it will call `onVideoSubmit` function passing either URL or file.
 92 | 
 93 | ```typescript
 94 | const onVideoSubmit = async (data: FileOrUrlInputSubmitType) => {
 95 |   setConversationData(null)
 96 |   if (data.type === 'file') {
 97 |     setFile(data?.file as any)
 98 |   } else {
 99 |     setVideoUrl(data?.url as string)
100 |   }
101 | }
102 | ```
103 | 
104 | This will set our state.
105 | All the processing is done within `useAsyncVideoApi` hook.
106 | 
107 | ```typescript
108 | const { jobStatus, sentForProcessing } = useAsyncVideoApi(
109 |   videoUrl !== '' ? videoUrl : file,
110 |   asyncApiParams.query
111 | )
112 | ```
113 | 
114 | This hook monitors the state change using dependency array of `useEffect` and when state is changed it will start the flow.
115 | 
116 | #### 1. Get Relevant params for Video URL or file
117 | 
118 | First we need to get relevant parameters for the Video URL or file. the difference is mainly the `Content-Type`.
119 | 
120 | You will see the following function defined within `useEffect`
121 | 
122 | ```typescript
123 | async function getFileOrUrlOptions() {
124 |   if (isFile) {
125 |     const file = data
126 |     const requestOptionsVideo = {
127 |       method: 'POST',
128 |       headers: {
129 |         'x-api-key': token,
130 |         'Content-Type': 'video/mp4',
131 |       },
132 |       body: file,
133 |       json: true,
134 |     }
135 |     return requestOptionsVideo
136 |   } else {
137 |     const url = data
138 |     const requestOptionsVideo = await {
139 |       method: 'POST',
140 |       headers: {
141 |         'x-api-key': token,
142 |         'Content-Type': 'application/json',
143 |       },
144 |       body: JSON.stringify({
145 |         url: url,
146 |         confidenceThreshold: 0.6,
147 |         timezoneOffset: 0,
148 |       }),
149 |     }
150 |     return requestOptionsVideo
151 |   }
152 | }
153 | ```
154 | 
155 | Here we define a function to conditionally get different request parameters that we need to send in our REST call. After all there is a difference whether we send a file or URL
156 | 
157 | 2. Getting Symbl async Video API endpoint.
158 | 
159 | Async API endpoint for video processing will change based on whether it's url or file:
160 | 
161 | ```javascript
162 | const urlVideo = isFile
163 |   ? `https://api.symbl.ai/v1/process/video${query}`
164 |   : `https://api.symbl.ai/v1/process/video/url${query}`
165 | ```
166 | 
167 | We will use this endpoint to send video url or video file for processing. THis endpoint will also accept a query string which we will use later on to pass parameters.
168 | 
169 | 3. #### Use Job API to poll for job status.
170 | 
171 | Previously we mentioned that there should be some kind of polling mechanism to check whether the job is finished or not. Symbl has [Job API](https://docs.symbl.ai/#job-api) That we can use for that.
172 | 
173 | ```typescript
174 | async function check(jobId: string) {
175 |   const checkJob = await fetch(
176 |     `https://api.symbl.ai/v1/job/${jobId}`,
177 |     requestOptions
178 |   )
179 |   const checkJobJson = await checkJob.json()
180 |   setJobStatus(checkJobJson)
181 |   if (checkJobJson.status === 'in_progress') {
182 |     check(jobId)
183 |     return
184 |   } else {
185 |     setSentForProcessing(false)
186 |   }
187 | }
188 | ```
189 | 
190 | In this function we are polling the Job API endpoint passing a Job Id, which we've received as a response to from video async api. We will poll untill we get `completed` status
191 | 
192 | 4. Send video to processing
193 | 
194 | ```typescript
195 | //Get request Parameters
196 | const requestOptionsVideo = await getFileOrUrlOptions()
197 | // Execute the request
198 | const processingResponse = await fetch(urlVideo, requestOptionsVideo)
199 | const processingResponseJson = await processingResponse.json()
200 | // Check Job Status
201 | check(processingResponseJson.jobId)
202 | ```
203 | 
204 | After Job is finished we can get data from Conversation API. We will do that by using `<ConversationCard/>`component.
205 | 
206 | On this page you will also see this component `<Transcripts conversationId={conversationData.conversationId} />`
207 | 
208 | This is prebuilt component from `@symblai/react-elements` package. As soon as you provide it with `conversationId`, It will nicely render conversation transcripts. There is also `<Topics conversationId={conversationData.conversationId}/>` component that will do the same but for topics, which Symbl will recognize as main topics within the conversation.
209 | 
210 | ### Passing additional Async API parameters to get more granular insights
211 | 
212 | We can pass various parameters to improve processing of video files. These parameters can be passed as a query string to video processing endpoint.
213 | Such parameters may include:
214 | 
215 | - `customVocabulary` - Contains a list of words and phrases that provide hints to the speech recognition task.
216 | - `detectActionPhraseForMessages` - Accepted values are true & false. It shows Actionable Phrases in each sentence of conversation. These sentences can be found in the Conversation's [Messages API](https://docs.symbl.ai/#get-messages-transcript).
217 | 
218 | Diarization parameters. You can read more about them [here](https://docs.symbl.ai/#audio-api)
219 | 
220 | ## Summary
221 | 
222 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to send your video to processing and get insights on what was the conversation in the video about. Even though the code shared in this How To is React specific, The general flow can be used with any framework
223 | 
224 | 1. Authenticate and get the token
225 | 2. Send video url/file to correct endpoint
226 | 
227 | ```javascript
228 | const endpoint = isFile
229 |   ? `https://api.symbl.ai/v1/process/video${query}`
230 |   : `https://api.symbl.ai/v1/process/video/url${query}`
231 | ```
232 | 
233 | 3. Get as a response `jobId`
234 | 4. Poll Job API endpoint to get processing status
235 |    `https://api.symbl.ai/v1/job/${jobId}`
236 | 5. Get the `conversationId` back when processing is completed
237 | 6. Use [Conversation API](https://docs.symbl.ai/#conversation-api) to get insights about the video.
238 | 
239 | You can read more about Async Video API [here](https://docs.symbl.ai/#video-api)
240 |

--------------------------------------------------------------------------------
/hooks/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, createContext, useContext, useEffect } from 'react'
  2 | 
  3 | export const ConnectionContext = createContext<any>(null)
  4 | export const ConversationContext = createContext<any>(null)
  5 | export const AuthContext = createContext<any>(null)
  6 | 
  7 | export const ConnectionProvider: React.FC = ({ children }) => {
  8 |   const [id, setId] = useState(null)
  9 |   const [token, setToken] = useState(null)
 10 |   const [conversationData, setConversationData] = useState(null)
 11 |   return (
 12 |     <AuthContext.Provider value={{ token, setToken }}>
 13 |       <ConnectionContext.Provider value={[id, setId]}>
 14 |         <ConversationContext.Provider
 15 |           value={{ conversationData, setConversationData }}
 16 |         >
 17 |           {children}
 18 |         </ConversationContext.Provider>
 19 |       </ConnectionContext.Provider>
 20 |     </AuthContext.Provider>
 21 |   )
 22 | }
 23 | 
 24 | export const useConnection = () => useContext(ConnectionContext)
 25 | export const useConversation = () => useContext(ConversationContext)
 26 | export const useAuth = () => useContext(AuthContext)
 27 | 
 28 | const MIME_TYPES = {
 29 |   mp3: 'audio/mpeg',
 30 |   wav: 'audio/wave',
 31 | }
 32 | 
 33 | export function useAudioAsyncAPI(
 34 |   data: File | string | undefined,
 35 |   query: string
 36 | ) {
 37 |   const { token } = useAuth()
 38 |   const { conversationData, setConversationData } = useConversation()
 39 |   const [sentForProcessing, setSentForProcessing] = useState(false)
 40 |   const [jobStatus, setJobStatus] = useState(null)
 41 |   useEffect(() => {
 42 |     const isFile = data instanceof File
 43 | 
 44 |     async function fetchData() {
 45 |       const urlAudio = isFile
 46 |         ? `https://api.symbl.ai/v1/process/audio${query}`
 47 |         : `https://api.symbl.ai/v1/process/audio/url${query}`
 48 |       const requestOptions = {
 49 |         method: 'GET',
 50 |         headers: {
 51 |           'x-api-key': token,
 52 |         },
 53 |       }
 54 |       async function getFileOrUrlOptions() {
 55 |         if (isFile) {
 56 |           const file = data
 57 |           const requestOptionsAudio = {
 58 |             method: 'POST',
 59 |             headers: {
 60 |               'x-api-key': token,
 61 |               'Content-Type': MIME_TYPES['mp3'],
 62 |             },
 63 |             body: file,
 64 |           }
 65 |           return requestOptionsAudio
 66 |         } else {
 67 |           const url = data
 68 |           const requestOptionsAudio = await {
 69 |             method: 'POST',
 70 |             headers: {
 71 |               'x-api-key': token,
 72 |               'Content-Type': 'application/json',
 73 |             },
 74 |             body: JSON.stringify({
 75 |               url: url,
 76 |               confidenceThreshold: 0.6,
 77 |               timezoneOffset: 0,
 78 |             }),
 79 |           }
 80 |           return requestOptionsAudio
 81 |         }
 82 |       }
 83 | 
 84 |       async function check(jobId: string) {
 85 |         const checkJob = await fetch(
 86 |           `https://api.symbl.ai/v1/job/${jobId}`,
 87 |           requestOptions
 88 |         )
 89 |         const checkJobJson = await checkJob.json()
 90 |         setJobStatus(checkJobJson)
 91 |         if (checkJobJson.status === 'in_progress') {
 92 |           check(jobId)
 93 |           return
 94 |         } else {
 95 |           setSentForProcessing(false)
 96 |         }
 97 |       }
 98 |       try {
 99 |         if (!jobStatus) {
100 |           setSentForProcessing(true)
101 |           const requestOptionsAudio = await getFileOrUrlOptions()
102 |           const processingResponse = await fetch(urlAudio, requestOptionsAudio)
103 |           const processingResponseJson = await processingResponse.json()
104 |           check(processingResponseJson.jobId)
105 |           setConversationData(processingResponseJson)
106 |         }
107 |       } catch (err) {
108 |         console.error(err, err.message)
109 |       }
110 |     }
111 | 
112 |     data && fetchData().catch((err) => console.log(err.message))
113 |   }, [data, conversationData, setConversationData])
114 | 
115 |   return {
116 |     jobStatus,
117 |     setJobStatus,
118 |     sentForProcessing,
119 |   }
120 | }
121 | 
122 | export function useMessages() {
123 |   const [data, setData] = useState<any[]>()
124 |   const { token } = useAuth()
125 |   function fetchData(id: string) {
126 |     const url = `https://api.symbl.ai/v1/conversations/${id}/messages`
127 |     const requestOptions = {
128 |       method: 'GET',
129 |       headers: {
130 |         'x-api-key': token,
131 |       },
132 |     }
133 |     fetch(url, requestOptions)
134 |       .then((response) => response.json())
135 |       .then((data) => {
136 |         let startTime: any
137 |         let endTime
138 |         let item
139 |         console.log('Messages', data)
140 |         if (data.messages && data.messages.length > 0) {
141 |           startTime = new Date(data.messages[0].startTime).getTime()
142 |           item = data.messages.map((item: any) => [
143 |             item.id,
144 |             item.text,
145 |             /* message start time relative to content */ (new Date(
146 |               item.startTime
147 |             ).getTime() -
148 |               startTime) /
149 |               1000,
150 |             /* message end time relative to content */ (new Date(
151 |               item.endTime
152 |             ).getTime() -
153 |               startTime) /
154 |               1000,
155 |           ])
156 |         } else {
157 |           item = data.messages.map((item: any) => [item.id, item.text, -1, -1])
158 |         }
159 |         setData(item)
160 |       })
161 |   }
162 |   return {
163 |     fetchData,
164 |     data,
165 |   }
166 | }
167 | 
168 | export const useTextAsyncAPI = (data: string) => {
169 |   const { token } = useAuth()
170 |   const { conversationData, setConversationData } = useConversation()
171 |   const [sentForProcessing, setSentForProcessing] = useState(false)
172 |   const [jobStatus, setJobStatus] = useState(null)
173 | 
174 |   useEffect(() => {
175 |     async function fetchData() {
176 |       const requestTextOptions = {
177 |         method: 'POST',
178 |         headers: {
179 |           'x-api-key': token,
180 |           'Content-Type': 'application/json',
181 |         },
182 |         body: data,
183 |       }
184 | 
185 |       const requestOptions = {
186 |         method: 'GET',
187 |         headers: {
188 |           'x-api-key': token,
189 |         },
190 |       }
191 | 
192 |       async function check(jobId: string) {
193 |         const checkJob = await fetch(
194 |           `https://api.symbl.ai/v1/job/${jobId}`,
195 |           requestOptions
196 |         )
197 |         const checkJobJson = await checkJob.json()
198 |         setJobStatus(checkJobJson)
199 |         if (checkJobJson.status === 'in_progress') {
200 |           check(jobId)
201 |           return
202 |         } else {
203 |           setSentForProcessing(false)
204 |         }
205 |       }
206 |       try {
207 |         if (!jobStatus) {
208 |           setSentForProcessing(true)
209 |           const processingResponse = await fetch(
210 |             'https://api.symbl.ai/v1/process/text',
211 |             requestTextOptions
212 |           )
213 |           console.log(processingResponse)
214 |           const processingResponseJson = await processingResponse.json()
215 |           console.log(processingResponseJson)
216 |           check(processingResponseJson.jobId)
217 |           setConversationData(processingResponseJson)
218 |         }
219 |       } catch (err) {
220 |         console.error(err, err.message)
221 |       }
222 |     }
223 | 
224 |     data && fetchData().catch((err) => console.log(err.message))
225 |   }, [data, conversationData, setConversationData])
226 | 
227 |   return {
228 |     jobStatus,
229 |     setJobStatus,
230 |     sentForProcessing,
231 |   }
232 | }
233 | 
234 | export const useAsyncVideoApi = (
235 |   data: File | string | undefined,
236 |   query: string
237 | ) => {
238 |   const { token } = useAuth()
239 |   const { conversationData, setConversationData } = useConversation()
240 |   const [sentForProcessing, setSentForProcessing] = useState(false)
241 |   const [jobStatus, setJobStatus] = useState(null)
242 |   useEffect(() => {
243 |     const isFile = data instanceof File
244 | 
245 |     async function fetchData() {
246 |       const urlVideo = isFile
247 |         ? `https://api.symbl.ai/v1/process/video${query}`
248 |         : `https://api.symbl.ai/v1/process/video/url${query}`
249 |       const requestOptions = {
250 |         method: 'GET',
251 |         headers: {
252 |           'x-api-key': token,
253 |         },
254 |       }
255 |       async function getFileOrUrlOptions() {
256 |         if (isFile) {
257 |           const file = data
258 |           const requestOptionsVideo = {
259 |             method: 'POST',
260 |             headers: {
261 |               'x-api-key': token,
262 |               'Content-Type': 'video/mp4',
263 |             },
264 |             body: file,
265 |             json: true,
266 |           }
267 |           return requestOptionsVideo
268 |         } else {
269 |           const url = data
270 |           const requestOptionsVideo = await {
271 |             method: 'POST',
272 |             headers: {
273 |               'x-api-key': token,
274 |               'Content-Type': 'application/json',
275 |             },
276 |             body: JSON.stringify({
277 |               url: url,
278 |               confidenceThreshold: 0.6,
279 |               timezoneOffset: 0,
280 |             }),
281 |           }
282 |           return requestOptionsVideo
283 |         }
284 |       }
285 | 
286 |       async function check(jobId: string) {
287 |         const checkJob = await fetch(
288 |           `https://api.symbl.ai/v1/job/${jobId}`,
289 |           requestOptions
290 |         )
291 |         const checkJobJson = await checkJob.json()
292 |         setJobStatus(checkJobJson)
293 |         if (checkJobJson.status === 'in_progress') {
294 |           check(jobId)
295 |           return
296 |         } else {
297 |           setSentForProcessing(false)
298 |         }
299 |       }
300 |       try {
301 |         if (!jobStatus) {
302 |           setSentForProcessing(true)
303 |           const requestOptionsVideo = await getFileOrUrlOptions()
304 |           const processingResponse = await fetch(urlVideo, requestOptionsVideo)
305 |           console.log(processingResponse)
306 |           const processingResponseJson = await processingResponse.json()
307 |           console.log(processingResponseJson)
308 |           check(processingResponseJson.jobId)
309 |           setConversationData(processingResponseJson)
310 |         }
311 |       } catch (err) {
312 |         console.error(err, err.message)
313 |       }
314 |     }
315 | 
316 |     data && fetchData().catch((err) => console.log(err.message))
317 |   }, [data, conversationData, setConversationData])
318 | 
319 |   return {
320 |     jobStatus,
321 |     setJobStatus,
322 |     sentForProcessing,
323 |   }
324 | }
325 | 
326 | export const useAsyncApiParams = () => {
327 |   const [customVocabulary, setCustomVocabulary] = useState('')
328 |   const [
329 |     detectActionPhraseForMessages,
330 |     setDetectActionPhraseForMessages,
331 |   ] = useState(false)
332 |   const [enableSpeakerDiarization, setEnableSpeakerDiarization] = useState(
333 |     false
334 |   )
335 |   const [diarizationSpeakerCount, setDiarizationSpeakerCount] = useState(1)
336 |   let query = enableSpeakerDiarization
337 |     ? `?enableSpeakerDiarization=true&diarizationSpeakerCount=${diarizationSpeakerCount}&customVocabulary=${customVocabulary}`
338 |     : ''
339 | 
340 |   query =
341 |     query && detectActionPhraseForMessages
342 |       ? query + '&detectActionPhraseForMessages=true'
343 |       : detectActionPhraseForMessages
344 |       ? '?detectActionPhraseForMessages=true'
345 |       : query
346 | 
347 |   return {
348 |     query,
349 |     customVocabulary,
350 |     setCustomVocabulary,
351 |     enableSpeakerDiarization,
352 |     setEnableSpeakerDiarization,
353 |     diarizationSpeakerCount,
354 |     setDiarizationSpeakerCount,
355 |     setDetectActionPhraseForMessages,
356 |   }
357 | }
358 |

--------------------------------------------------------------------------------
/docs/how-to-nextjs-node-sdk.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | In this How to guide, we will see how we can use Symbl node sdk to call on the phone or meeting url and get live transcription in NextJS app, particularly on the server side. Symbl comes with REST api, so same thing we can get by calling specific endpoint on the client side, but there are some use cases that you would want to use particularly server side.For example if you want to do some business logic decisions based on the data received from symbl.
  4 | 
  5 | The main flow that we want to achieve is that you can enter your phone number in UI and hit on ![](./imgs/call.png) button.
  6 | 
  7 | This is how the UI of the demo app will look like:
  8 | 
  9 | ![text page screenshot](./imgs/nodeui.png)
 10 | 
 11 | In addition to phone number, you can actually select whether you want to use Public Switched Telephony Networks (PSTN) or Session Initaition Protocol (SIP). You will be also able to add advanced params such as DTMF code or Summary email, where to send insights summary once conversation is finished
 12 | 
 13 | ## Get Started
 14 | 
 15 | We won't dive into all details of implementing NextJS app from scratch, so you always can check the [demo app code](https://github.com/symblai/nextjs-symblai-demo) for more info. Also feel free to open issues asking questions or writing suggestions.
 16 | 
 17 | #### Retrieve your credentials
 18 | 
 19 | In order to use Symbl API, you need to sign up and get your credentials. They include your `appId` and `appSecret`. You can find them on the home page of the platform.
 20 | 
 21 | ![](https://docs.symbl.ai/images/credentials-faf6f434.png)
 22 | 
 23 | add credentials to `next-config.js` file filling in `APP_ID` and `APP_SECRET` variables.
 24 | 
 25 | ```javascript
 26 | module.exports = {
 27 |   env: {
 28 |     APP_ID: '',
 29 |     APP_SECRET: '',
 30 |   },
 31 | }
 32 | ```
 33 | 
 34 | In order to see demo app in action, you can clone the repo, run `yarn` and then `yarn dev`.
 35 | 
 36 | Page you are looking for this tutorial is `/` or this [file](https://github.com/symblai/nextjs-symblai-demo/blob/master/pages/index.tsx)
 37 | 
 38 | ## Create NextJS API routes
 39 | 
 40 | Let's create `/api/call.ts` file which will be our api endpoint. We will use it both for calling to our phone or ending the call.
 41 | 
 42 | NextJS API endpoints will reside under `pages/api` and will have the following structure
 43 | 
 44 | ```javascript
 45 | export default (req: any, res: any) => {
 46 |   res.statusCode = 200
 47 |   res.setHeader('Content-Type', 'application/json')
 48 |   const params = JSON.parse(req.body)
 49 |   res.end(params)
 50 | }
 51 | ```
 52 | 
 53 | we will get bunch of params that we will pass from the client and will pass to Symbl node sdk. One of such params will be `start` param.
 54 | 
 55 | ```javascript
 56 | export default (req: any, res: any) => {
 57 |   res.statusCode = 200
 58 |   res.setHeader('Content-Type', 'application/json')
 59 |   const {
 60 |     phoneNumber,
 61 |     dtmf,
 62 |     type,
 63 |     summaryEmails,
 64 |     start,
 65 |     connectionId,
 66 |     insightTypes,
 67 |   } = JSON.parse(req.body)
 68 | 
 69 |   if (start) {
 70 |     console.log('Calling ', phoneNumber)
 71 |     startEndpoint(
 72 |       { phoneNumber, dtmf, type, summaryEmails, insightTypes },
 73 |       onSpeechDetected
 74 |     ).then((connectionId: string) => {
 75 |       console.log('Connection Started', connectionId)
 76 |       res.end(JSON.stringify({ connectionId }))
 77 |     })
 78 |   } else {
 79 |     if (connectionId) {
 80 |       console.log('Connection Stopped', connectionId)
 81 |       stopEndpoint(connectionId).then((connection) => {
 82 |         res.end(JSON.stringify(connection))
 83 |       })
 84 |     }
 85 |   }
 86 | }
 87 | ```
 88 | 
 89 | We will use `start` and `connectionId` parameters to determine whether we are starting or ending the call.
 90 | 
 91 | Basically what happens is every time we start the call, we will get back the `connectionId` from Symbl, that we will pass to the client. Then later if we want to end the call, we need to pass this `connectionId` along with `start: false` to end the call.
 92 | 
 93 | ### Using Symbl Node SDK
 94 | 
 95 | If you look at the code the most dominant part will be this one:
 96 | 
 97 | ```javascript
 98 | startEndpoint(
 99 |   { phoneNumber, dtmf, type, summaryEmails, insightTypes },
100 |   onSpeechDetected
101 | )
102 | ```
103 | 
104 | That is actually a function that we will write, which will pass parameters to symbl node sdk and trigger `onSpeechDetected` callback. This callback can be your custom business logic, but in our case we will simply log the response.
105 | 
106 | ```typescript
107 | async function onSpeechDetected(data: any) {
108 |   const { type } = data
109 |   console.log('Response type:', type)
110 | }
111 | ```
112 | 
113 | ### Symbl integration
114 | 
115 | Let's create a file called `integrations/symbl/utils.ts` and create `startEndpoint` and `stopEndpoint` functions, but before we need to initialize our sdk
116 | 
117 | #### Initializing sdk
118 | 
119 | ```javascript
120 | const sdkInit = async () => {
121 |   await sdk.init({
122 |     appId: process.env.APP_ID,
123 |     appSecret: process.env.APP_SECRET,
124 |     basePath: apiBase,
125 |   })
126 | }
127 | ```
128 | 
129 | We are using `.env` file in this app, so we need to add our `APP_ID` and `APP_SECRET` there.
130 | 
131 | ### `startEndpoint`
132 | 
133 | `startEndpoint` will get several parameters from the client:
134 | 
135 | - `type` - Symbl supports two meetings types. `PSTN` and `SIP`
136 | - `phoneNumber` - Naturally we need to have a phone number to call, but in case of `SIP` type we will need to call url. Something like `sip:124@domain.com`. For simplicity we will pass this data under `phoneNumber` parameter.
137 | - `dtmf` - This will be meeting code, which we need to pass in case meeting has such a code
138 | - `summaryEmail` - you can pass a list of emails which will get summary of the call email.
139 | - `insightTypes` - there are several insight types that we can pass to Symbl.
140 | 
141 | ```javascript
142 | export const startEndpoint = async (
143 |   {
144 |     type,
145 |     phoneNumber,
146 |     dtmf,
147 |     summaryEmails,
148 |     insightTypes,
149 |   }: {
150 |     type: string
151 |     phoneNumber: string
152 |     dtmf: string
153 |     summaryEmails: string
154 |     insightTypes: string
155 |   },
156 |   callback: (data: any) => Promise<void>,
157 |   endCallAfterInSeconds = 300
158 | ): Promise<any> => {
159 |   //init our sdk
160 |   await sdkInit()
161 | }
162 | ```
163 | 
164 | ### Usyng Symbl Node SDK
165 | 
166 | Now let's import `symbl-node`
167 | `import { sdk } from 'symbl-node'`
168 | 
169 | And use `startEndpoint` method by passing all the parameters we've got from the client.
170 | 
171 | ```javascript
172 | const phoneNumberOrUri = type === 'sip' ? { uri: phoneNumber } : { phoneNumber }
173 | const connection = await sdk.startEndpoint(
174 |   {
175 |     endpoint: {
176 |       type,
177 |       ...phoneNumberOrUri,
178 |       dtmf,
179 |     },
180 |     intents,
181 |     insightTypes,
182 |     actions: [
183 |       {
184 |         invokeOn: 'stop',
185 |         name: 'sendSummaryEmail',
186 |         parameters: {
187 |           emails: summaryEmails.split(','),
188 |         },
189 |       },
190 |     ],
191 |     data: {
192 |       session: {
193 |         name: `Live Intent Detection NextJS demo - ${phoneNumber}`,
194 |       },
195 |     },
196 |   },
197 |   callback
198 | )
199 | ```
200 | 
201 | You can see here in the code, that we either pass `phoneNumber` or `uri`, based on whether we have `SIP` or `PSTN` configuration
202 | 
203 | When executing this function we will initiate the call and tell Symbl to analyse it. What will be returned is `connectionId` in which we will be particalarly interested for both subscribing to events and stopping our call.
204 | 
205 | ### `stopEndpoint`
206 | 
207 | This function will get `connectionId` and call `sdk.stopEndpoint` function to stop the connection.
208 | 
209 | ```typescript
210 | const stopEndpoint = async (connectionId: string) => {
211 |   console.log('Stopping connection for ' + connectionId)
212 | 
213 |   try {
214 |     const connection = await sdk.stopEndpoint({
215 |       connectionId,
216 |     })
217 | 
218 |     console.log('Summary Info:', connection.summaryInfo)
219 |     console.log('Conversation ID:', connection.conversationId)
220 | 
221 |     return {
222 |       summaryInfo: connection.summaryInfo,
223 |       conversationId: connection.conversationId,
224 |     }
225 |   } catch (e) {
226 |     console.error('Error while stopping the connection.', e)
227 |     throw e
228 |   }
229 | }
230 | ```
231 | 
232 | ### Subscribe to events from NextJS API route
233 | 
234 | Now we want to create an endpoint that we can call to subscribe for realtime events. For our example we will use `socket.io` library to use websockets and emit changes from the server to the client.
235 | 
236 | Let's create a new endpoint by creating a file `/api/subscribeToPhoneEvents.ts`
237 | 
238 | We will use `Socket.io` specific setup within our handler
239 | 
240 | ```javascript
241 | if (!res.socket.server.io) {
242 |   const io = new Server(res.socket.server)
243 |   io.on('connection', (socket: any) => {
244 |     socket.on('subscribeToEvents', (msg: any) => {
245 |       subscribeToRealtimeEvents(msg.connectionId, (data) => {
246 |         socket.emit('realtimeEvent', data)
247 |       })
248 |     })
249 |     socket.on('endCall', (msg: any) => {
250 |       stopEndpoint(msg.connectionId)
251 |     })
252 |   })
253 | 
254 |   res.socket.server.io = io
255 | } else {
256 |   console.log('socket.io already running')
257 | }
258 | res.end()
259 | ```
260 | 
261 | So what we are doing here?
262 | 
263 | - Starting socket.io server if it doesn't exist `const io = new Server(res.socket.server)`
264 | - When client is connected, we initiate subscription:
265 | 
266 | ```javascript
267 | socket.on('subscribeToEvents', (msg: any) => {
268 |   subscribeToRealtimeEvents(msg.connectionId, (data) => {
269 |     socket.emit('realtimeEvent', data)
270 |   })
271 | })
272 | ```
273 | 
274 | Here we basically pass `connectionId` that was created after our call to telephony API to helper function `subscribeToRealtimeEvents`. We also pass a callback to trigger `realtimeEvent` that will push the event and the data from the server to client via websockets.
275 | 
276 | ### Subscribing to Symbl realtime events
277 | 
278 | To subscribe to realtime events, we will create another helper function under `integrations/symbl/utils.ts`
279 | 
280 | ```javascript
281 | export async function subscribeToRealtimeEvents(
282 |   connectionId: string,
283 |   handler: (data: any) => void
284 | ) {
285 |   console.log(`Subscribe to events of connection: ${connectionId}`)
286 |   await sdkInit()
287 |   sdk.subscribeToConnection(connectionId, handler)
288 | }
289 | ```
290 | 
291 | Here we will instantiate sdk and call `subscribeToConnection` method within NodeSDK.
292 | 
293 | ### Server side summary
294 | 
295 | At this point we both have `/api/call` api route to initiate the call and `api/subscribeToPhoneEvents` to subscribe to events using `socket.io`
296 | 
297 | ## Client side setup
298 | 
299 | In order to set up our client properly we need two parts.
300 | 
301 | 1. Creating `PhoneConfigurations` component - we won't dive into this React component, but the main idea of it is to get user input for the following parameters and call `/api/call` endpoint with these params.
302 | 
303 | ```javascript
304 | const params = {
305 |   type,
306 |   phoneNumber,
307 |   dtmf,
308 |   summaryEmails,
309 |   insightTypes,
310 | }
311 | ```
312 | 
313 | 2. Subscribing based on `connectionId`.
314 |    We've seen already that we are getting back `connectionId` from `api/call` endpoint, so in order to subscribe to real time events we will use this:
315 | 
316 | ```javascript
317 | useEffect(() => {
318 |   console.log('Connection Id:', connectionId)
319 |   if (connectionId) {
320 |     fetch('/api/subscribeToPhoneEvents', {
321 |       method: 'POST',
322 |     }).finally(() => {
323 |       socket = io()
324 |       socket.on('connect', () => {
325 |         console.log('connect')
326 |         socket.emit('subscribeToEvents', { connectionId })
327 |       })
328 | 
329 |       socket.on('realtimeEvent', (data: any) => {
330 |         console.log('Real time event', data)
331 |         if (data.type === 'transcript_response') {
332 |           setLiveTranscript(data.payload.content)
333 |         }
334 |         if (data.type === 'message_response') {
335 |           const oldMsgs = messagesList.current
336 |           setMessages([...oldMsgs, ...data.messages])
337 |         }
338 |         if (data.type === 'insight_response') {
339 |           const oldInsights = insightsList.current
340 |           setInsights([...oldInsights, ...data.insights])
341 |         }
342 |       })
343 | 
344 |       socket.on('disconnect', () => {
345 |         console.log('disconnect')
346 |       })
347 |     })
348 |   }
349 | }, [connectionId])
350 | ```
351 | 
352 | As you can see in the code, we set different state variables based on different responses we are getting from socket.io `realtimeEvent` message.
353 | 
354 | Response that we will get will be either `transcript_response` type or `message_response` type or `insight_response` type. For example `message_response` will look like this:
355 | 
356 | ```json
357 | {
358 |   "type": "message_response",
359 |   "messages": [
360 |     {
361 |       "from": {},
362 |       "payload": {
363 |         "content": "Yeah, tell us sir.",
364 |         "contentType": "text/plain"
365 |       },
366 |       "duration": {
367 |         "startTime": "2020-10-22T15:32:14.500Z",
368 |         "endTime": "2020-10-22T15:32:16.000Z"
369 |       }
370 |     }
371 |   ]
372 | }
373 | ```
374 | 
375 | Now what is left is to render UI based on what data we get.
376 | 
377 | ## Summary
378 | 
379 | In this How To we've briefly walked you through the key points and flows that should be implemented in order to use Symbl Node SDK to use Telephony API and start a phone call and subscribe to real time updates. It's up to you how to bring this data from the server to the client and even though in this example we've used socket.io to push the data from server to client, it's up to you what and how to implement passing data from server to client.
380 | Even though the code shared in this How To is React specific, The NodeJS call in generic enough to use it with any UI framework.
381 | 
382 | You can read more about Node SDK [here](https://docs.symbl.ai/#symbl-sdk-node-js)
383 |

--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react'
  2 | import { css } from '@emotion/css'
  3 | import tw from '@tailwindcssinjs/macro'
  4 | import Link from 'next/link'
  5 | import { useRouter } from 'next/router'
  6 | import { useConnection } from '../hooks'
  7 | export const Header = ({
  8 |   menuOpen,
  9 |   setMenuOpen,
 10 | }: {
 11 |   menuOpen: boolean
 12 |   setMenuOpen: any
 13 | }) => {
 14 |   const router = useRouter()
 15 | 
 16 |   const isActive = (href: string) => router.pathname === href
 17 |   const SafeLink = Link
 18 |   return (
 19 |     <nav
 20 |       id="header"
 21 |       className={css(tw`bg-gray-800 fixed w-full z-10 top-0 shadow`)}
 22 |     >
 23 |       <div
 24 |         className={css(
 25 |           tw`w-full container mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0`
 26 |         )}
 27 |       >
 28 |         <div className={css(tw`lg:w-1/2 w-full pr-0`)}>
 29 |           <div className={css(tw`flex relative w-full lg:w-auto`)}>
 30 |             <div className={css(tw`relative text-sm text-gray-100 w-1/2`)}>
 31 |               <button
 32 |                 id="userButton"
 33 |                 className={css(tw`flex items-center focus:outline-none`)}
 34 |               >
 35 |                 <svg
 36 |                   width="180"
 37 |                   height="40"
 38 |                   viewBox="0 0 180 40"
 39 |                   fill="none"
 40 |                   xmlns="http://www.w3.org/2000/svg"
 41 |                 >
 42 |                   <path
 43 |                     d="M1.58984 5.53284L24.6651 22.7827L13.2628 40L1.58984 5.53284Z"
 44 |                     fill="#1A1A1A"
 45 |                   />
 46 |                   <path
 47 |                     opacity="0.82"
 48 |                     d="M14.1091 0L24.6655 22.8154L0 34.4997L14.1091 0Z"
 49 |                     fill="#4D4D4D"
 50 |                   />
 51 |                   <path
 52 |                     d="M67.8039 12.2048C67.5333 12.3675 67.3641 12.5953 67.2287 12.8883L62.9317 22.4896C62.7626 22.8802 62.6272 23.2382 62.4919 23.5962C62.3566 23.9542 62.2889 24.182 62.1874 24.5726C62.1197 24.182 61.5784 22.8476 61.443 22.4896L56.8415 12.8557C56.74 12.6279 56.5708 12.4001 56.334 12.2048C56.0971 12.0095 55.7926 11.9119 55.3528 11.9119H51.2588L59.9543 29.0315L55.4881 38.3725H59.3791C59.8866 38.3725 60.2588 38.2748 60.4957 38.1121C60.7325 37.9168 60.9355 37.6564 61.1047 37.2984L72.8791 11.9444H68.6836C68.3791 11.9444 68.0746 12.0421 67.8039 12.2048Z"
 53 |                     fill="#FFF"
 54 |                   />
 55 |                   <path
 56 |                     d="M146.3 26.6558C146.029 26.3955 145.725 26.2002 145.352 26.07C144.98 25.9073 144.608 25.8422 144.202 25.8422C143.796 25.8422 143.39 25.9073 143.018 26.07C142.646 26.2327 142.341 26.428 142.07 26.6558C141.8 26.9162 141.597 27.2091 141.461 27.5671C141.326 27.9252 141.225 28.2832 141.225 28.6737C141.225 29.0643 141.292 29.4549 141.461 29.7803C141.597 30.1383 141.834 30.4313 142.07 30.6591C142.341 30.9195 142.646 31.1148 143.018 31.2449C143.39 31.3751 143.762 31.4728 144.202 31.4728C144.608 31.4728 144.98 31.4077 145.352 31.2449C145.725 31.1148 146.029 30.9195 146.3 30.6591C146.57 30.3987 146.773 30.1058 146.909 29.7803C147.078 29.4223 147.146 29.0643 147.146 28.6737C147.146 28.2832 147.078 27.9252 146.909 27.5671C146.74 27.2091 146.537 26.9162 146.3 26.6558Z"
 57 |                     fill="#FFF"
 58 |                   />
 59 |                   <path
 60 |                     d="M135.879 3.28723H131.041V31.2125H135.879V3.28723Z"
 61 |                     fill="#FFF"
 62 |                   />
 63 |                   <path
 64 |                     d="M179.729 5.14201C179.559 4.78399 179.323 4.45852 179.052 4.19815C178.781 3.93777 178.443 3.70994 178.071 3.57976C177.699 3.41702 177.293 3.35193 176.853 3.35193C176.447 3.35193 176.041 3.41702 175.669 3.57976C175.296 3.74249 174.992 3.93777 174.687 4.19815C174.417 4.45852 174.18 4.78399 174.044 5.14201C173.875 5.50002 173.808 5.89058 173.808 6.31369C173.808 6.70426 173.875 7.09482 174.044 7.45283C174.214 7.81085 174.417 8.10377 174.687 8.36415C174.958 8.62452 175.296 8.85235 175.669 8.98254C176.041 9.14527 176.447 9.21036 176.853 9.21036C177.293 9.21036 177.699 9.14527 178.071 8.98254C178.443 8.8198 178.781 8.62452 179.052 8.36415C179.323 8.10377 179.559 7.7783 179.729 7.45283C179.898 7.09482 179.999 6.7368 179.999 6.31369C179.999 5.92313 179.898 5.53257 179.729 5.14201Z"
 65 |                     fill="#FFF"
 66 |                   />
 67 |                   <path
 68 |                     d="M179.29 11.9445H174.451V31.2122H179.29V11.9445Z"
 69 |                     fill="#FFF"
 70 |                   />
 71 |                   <path
 72 |                     d="M169.95 19.6258C169.916 18.5192 169.713 16.4362 169.341 15.5249C168.968 14.6135 168.461 13.7999 167.784 13.1489C167.108 12.498 166.295 11.9772 165.348 11.6192C164.401 11.2612 162.675 11.0985 161.491 11.131C160.205 11.1636 158.344 11.4565 156.72 12.14C154.183 13.1815 153.168 14.1579 153.168 14.1579L155.198 17.38C155.57 17.1847 157.871 15.2319 161.559 14.8739C162.675 14.7763 164.198 15.1017 164.841 15.6876C165.957 16.7616 165.754 17.9659 165.822 18.6494C165.822 18.747 165.856 19.2027 165.889 19.8536C165.754 19.821 164.671 19.6583 164.299 19.5932C162.269 19.3979 160.882 19.3654 159.495 19.5281C153.269 20.3092 151.645 24.7682 152.965 27.8927C153.675 29.5526 155.164 30.7893 157.363 31.4077C160.104 32.1889 164.435 31.0823 166.126 28.7389C166.126 28.7714 166.363 29.9431 166.431 30.2686C166.532 30.6917 166.769 30.9521 167.04 31.0823C167.311 31.2125 167.683 31.2775 168.156 31.2775L170.525 31.245C170.525 31.245 170.085 28.5762 170.051 24.0196C170.051 23.0106 169.95 19.6258 169.95 19.6258ZM165.145 25.7446C164.908 25.9724 164.638 26.2002 164.367 26.4281C160.138 29.6827 156.957 28.153 156.653 26.1351C156.416 24.5403 158.04 22.8154 161.119 22.4573C162.032 22.3597 163.859 22.3272 165.923 22.7503C165.957 23.4663 165.957 24.2149 165.991 24.8984C165.788 25.1262 165.416 25.4842 165.145 25.7446Z"
 73 |                     fill="#FFF"
 74 |                   />
 75 |                   <path
 76 |                     d="M125.289 14.8414C124.646 13.9301 123.902 13.214 122.988 12.6607C122.109 12.1074 121.093 11.782 120.011 11.6192C118.657 11.4565 117.473 11.5541 116.458 11.8796C115.511 12.2051 114.327 12.7909 113.481 13.4419V7.42068V3.28723H108.812V31.2124H111.857C112.195 31.2124 112.432 31.1474 112.635 31.0172C112.838 30.887 112.973 30.6592 113.041 30.3337L113.244 29.0318L113.345 28.5111C113.548 28.7714 113.785 29.0318 114.022 29.2596C114.36 29.6177 114.766 29.9106 115.172 30.1709C115.578 30.4313 116.052 30.6592 116.56 30.8544C117.067 31.0497 117.609 31.1799 118.251 31.245C119.571 31.4077 120.755 31.3101 121.838 30.9521C122.921 30.5941 123.834 30.0082 124.612 29.1945C125.39 28.3809 126 27.4045 126.439 26.2328C126.879 25.0611 127.116 23.7592 127.15 22.3272C127.184 20.7649 127.048 19.3328 126.744 18.0961C126.372 16.8267 125.898 15.7201 125.289 14.8414ZM114.868 26.9163C114.259 26.6233 113.954 26.1351 113.515 25.5493V17.5753V16.5664C114.09 16.0131 114.8 15.5249 115.443 15.2645C125.289 11.8796 124.578 31.7332 114.868 26.9163Z"
 77 |                     fill="#FFF"
 78 |                   />
 79 |                   <path
 80 |                     d="M49.465 23.2058C49.1267 22.685 48.6868 22.2619 48.1455 21.8714C48.044 21.8063 47.9425 21.7412 47.841 21.6761C47.3673 21.3832 46.8598 21.1228 46.3184 20.9275C44.9312 20.4068 43.4086 20.0162 42.0214 19.6907C41.3109 19.528 40.668 19.3327 40.0928 19.1049C39.5176 18.8771 39.0439 18.6167 38.6718 18.2912C38.2996 17.9658 38.0966 17.5752 38.0627 17.1195C38.1304 16.5662 38.4688 16.078 39.0778 15.72C40.1267 15.004 42.5289 14.9389 43.8823 15.2644C44.4237 15.3945 44.9312 15.5247 45.371 15.6875C45.8109 15.8502 46.1831 15.9804 46.4876 16.078C47.0289 16.2733 47.5364 16.2733 47.8071 16.1431C47.9425 16.078 48.0778 15.9478 48.2131 15.7851L49.3635 13.7021C48.4838 13.0186 47.4011 12.4979 46.1492 12.0748C43.7808 11.2611 40.262 11.2285 37.8936 11.9771C36.8109 12.3026 35.8973 12.7583 35.1868 13.3115C34.4763 13.8648 33.9349 14.4832 33.5966 15.2318C33.2582 15.9478 33.089 16.729 33.1229 17.5101C33.1229 17.5426 33.1229 17.5752 33.1229 17.5752C33.1229 17.6403 33.1229 17.7054 33.1229 17.803C33.1567 18.6167 33.3259 19.3002 33.6642 19.8535C34.0026 20.4068 34.4424 20.895 34.9838 21.2855C35.2206 21.4483 35.4575 21.5785 35.6943 21.7086C36.0665 21.9365 36.4387 22.0992 36.8447 22.2619C37.5552 22.5223 38.2996 22.7827 39.0101 22.978C39.7545 23.1732 40.465 23.3685 41.2094 23.5313C41.9199 23.694 42.5966 23.8893 43.1718 24.1171C43.747 24.3449 44.2206 24.6053 44.5928 24.9308C44.965 25.2562 45.168 25.6794 45.2019 26.1676C45.168 26.3954 45.1003 26.6232 44.9988 26.851C44.8297 27.144 44.5928 27.4369 44.2545 27.6647C43.3748 28.218 42.3259 28.4133 41.1417 28.4458C40.262 28.4458 39.4838 28.3807 38.8748 28.218C37.8936 27.9576 37.0139 27.5671 36.2018 27.2091C35.8973 27.0789 35.6266 27.0138 35.3221 27.0138C35.0176 27.0138 34.7469 27.0789 34.5778 27.144C34.3748 27.2416 34.2056 27.3718 34.0702 27.5671L32.8184 29.7152C33.2582 30.0081 33.7319 30.301 34.2733 30.5614C34.8823 30.8543 35.559 31.1147 36.2695 31.31C36.98 31.5052 37.7244 31.7005 38.5026 31.7982C39.2808 31.9284 40.059 31.9609 40.871 31.9609C42.3936 31.9609 43.7131 31.7656 44.8635 31.4402C46.0139 31.1147 46.9613 30.6265 47.7395 30.0406C48.4838 29.4548 49.059 28.7713 49.465 27.9576C49.8372 27.1765 50.0064 26.2652 50.0064 25.3213C50.0064 25.2888 50.0064 25.2888 50.0064 25.2562C50.0064 25.1912 50.0064 25.1261 50.0064 25.061C49.9725 24.3449 49.8034 23.7265 49.465 23.2058Z"
 81 |                     fill="#FFF"
 82 |                   />
 83 |                   <path
 84 |                     d="M101.367 12.4981C100.251 11.8146 98.8973 11.4891 97.5778 11.4891C96.2244 11.4891 95.0402 11.8471 93.8898 12.5632C93.8898 12.5632 93.4161 12.8561 93.2131 13.0188C92.5364 13.5396 91.4537 14.7113 91.2168 15.1018C89.7958 11.0009 84.5176 10.4151 81.2356 13.0188C80.8296 13.3443 80.4574 13.6698 80.0852 14.0603L79.7469 12.6283C79.5439 12.075 79.104 11.7821 78.4611 11.7821H75.416V31.2451H80.4236V16.957C80.9649 16.3712 81.5401 15.9155 82.183 15.59C83.5025 14.8415 86.0063 14.9065 86.9537 15.9806C87.5288 16.5664 87.9349 17.5428 87.9349 18.9749V31.2125H91.9612H92.2995V18.9749V16.957C92.8409 16.3712 93.4161 15.9155 94.0589 15.59C95.3785 14.8415 97.8823 14.9065 98.8296 15.9806C99.4048 16.5664 99.8108 17.5428 99.8108 18.9749V31.2125H104.818V20.407C104.818 17.5103 104.48 16.0131 103.803 14.9065C103.093 13.8325 102.382 13.1165 101.367 12.4981Z"
 85 |                     fill="#FFF"
 86 |                   />
 87 |                 </svg>
 88 |               </button>
 89 |             </div>
 90 |             <div className={css(tw`block lg:hidden pr-4 fixed right-4`)}>
 91 |               <button
 92 |                 id="nav-toggle"
 93 |                 onClick={(e) => {
 94 |                   e.stopPropagation()
 95 |                   setMenuOpen(!menuOpen)
 96 |                 }}
 97 |                 className={css(
 98 |                   tw`flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none`
 99 |                 )}
100 |               >
101 |                 <svg
102 |                   className={css(tw`fill-current h-3 w-3`)}
103 |                   viewBox="0 0 20 20"
104 |                   xmlns="http://www.w3.org/2000/svg"
105 |                 >
106 |                   <title>Menu</title>
107 |                   <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
108 |                 </svg>
109 |               </button>
110 |             </div>
111 |           </div>
112 |         </div>
113 | 
114 |         <div
115 |           className={css(
116 |             tw`w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-800 z-20`,
117 |             menuOpen && tw`block`
118 |           )}
119 |           id="nav-content"
120 |         >
121 |           <ul className={css(tw`lg:flex flex-1 items-center px-4 md:px-0`)}>
122 |             <SafeLink href="/">
123 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
124 |                 <a
125 |                   href="#"
126 |                   className={css(
127 |                     isActive('/')
128 |                       ? tw`text-blue-400 border-b-2`
129 |                       : tw`text-gray-500`,
130 |                     tw`block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-blue-400 hover:border-blue-400`
131 |                   )}
132 |                 >
133 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>
134 |                     Phone call
135 |                   </span>
136 |                 </a>
137 |               </li>
138 |             </SafeLink>
139 |             <SafeLink href="/phone">
140 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
141 |                 <a
142 |                   href="#"
143 |                   className={css(
144 |                     isActive('/phone')
145 |                       ? tw`text-green-400 border-b-2 border-green-400`
146 |                       : tw`text-gray-500`,
147 |                     tw`block py-1 md:py-3 pl-1 align-middle  no-underline hover:text-gray-100  hover:border-green-400`
148 |                   )}
149 |                 >
150 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>
151 |                     Phone(Client only)
152 |                   </span>
153 |                 </a>
154 |               </li>
155 |             </SafeLink>
156 |             <SafeLink href="/conversations">
157 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
158 |                 <a
159 |                   href="#"
160 |                   className={css(
161 |                     isActive('/conversations')
162 |                       ? tw`text-pink-400 border-b-2 border-pink-400`
163 |                       : tw`text-gray-500`,
164 |                     tw`block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100   hover:border-pink-400 border-pink-400`
165 |                   )}
166 |                 >
167 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>
168 |                     Conversation data
169 |                   </span>
170 |                 </a>
171 |               </li>
172 |             </SafeLink>
173 |             <SafeLink href="/text">
174 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
175 |                 <a
176 |                   href="#"
177 |                   className={css(
178 |                     isActive('/text')
179 |                       ? tw`text-purple-400 border-b-2`
180 |                       : tw`text-gray-500`,
181 |                     tw`block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100   hover:border-purple-400 border-purple-400`
182 |                   )}
183 |                 >
184 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>Text</span>
185 |                 </a>
186 |               </li>
187 |             </SafeLink>
188 |             <SafeLink href="/audio">
189 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
190 |                 <a
191 |                   href="#"
192 |                   className={css(
193 |                     isActive('/audio')
194 |                       ? tw`text-pink-400 border-b-2`
195 |                       : tw`text-gray-500`,
196 |                     tw`block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100   hover:border-pink-400 border-pink-400`
197 |                   )}
198 |                 >
199 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>Audio</span>
200 |                 </a>
201 |               </li>
202 |             </SafeLink>
203 |             <SafeLink href="/video">
204 |               <li className={css(tw`mr-6 my-2 md:my-0`)}>
205 |                 <a
206 |                   href="#"
207 |                   className={css(
208 |                     isActive('/video')
209 |                       ? tw`text-purple-400 border-b-2`
210 |                       : tw`text-gray-500`,
211 |                     tw`block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100   hover:border-purple-400 border-purple-400`
212 |                   )}
213 |                 >
214 |                   <span className={css(tw`pb-1 md:pb-0 text-sm`)}>Video</span>
215 |                 </a>
216 |               </li>
217 |             </SafeLink>
218 |           </ul>
219 |         </div>
220 |       </div>
221 |     </nav>
222 |   )
223 | }
224 |

--------------------------------------------------------------------------------

19 | {title} 20 |

21 | {title} 22 |

117 | Symbl React Elements library 118 |

159 | Raw Data 160 |

98 | Chat Example 99 |