amazon-connect-reference-dialer 1.0.0 → 1.4.2

package/src/client/reducers/acReducer.js

@@ -0,0 +1,277 @@
+import INITIAL_STATE from '../utils/initialStateManager';
+
+export const onInitializationStateChange = (initialized = false) => {
+  console.log('-> ', 'onInitializationStateChange', initialized);
+  return {
+    type: 'onInitializationStateChange',
+    initialized
+  };
+};
+
+export const onStateChange = (currentState = undefined) => {
+  console.log('~', currentState);
+  return {
+    type: 'onStateChange',
+    currentState: currentState
+  };
+};
+
+export const onAgentStateChange = (agentState = 'unknown', duration = '00:00:00') => {
+  return {
+    type: 'onAgentStateChange',
+    agentState,
+    duration
+  };
+};
+
+export const onCCPError = (errorMessage = {}) => {
+  return {
+    type: 'onCCPError',
+    errorMessage
+  };
+};
+
+export const onPhoneNumber = (phoneNumber = null) => {
+  // console.warn('-> ', 'onPhoneNumber', who, duration);
+  return {
+    type: 'onPhoneNumber',
+    phoneNumber
+  };
+};
+
+export const onMuteToggle = (muted = false) => {
+  return {
+    type: 'onMuteToggle',
+    muted
+  };
+};
+
+// from UI events
+export const onRequestAgentStateChange = (requestAgentStateChange = 'complete') => {
+  // console.log('--> ', requestAgentStateChange);
+  return {
+    type: 'onRequestAgentStateChange',
+    requestAgentStateChange
+  };
+};
+
+export const onRequestAgentSettingsChange = (requestAgentSettingsChange = 'complete') => {
+  return {
+    type: 'onRequestAgentSettingsChange',
+    requestAgentSettingsChange
+  };
+};
+
+export const onFeedbackChange = (feedback = 4) => {
+  return {
+    type: 'onFeedbackChange',
+    feedback
+  };
+};
+
+export const onRequestReportCallIssue = (requestReportCallIssue = 'complete') => {
+  return {
+    type: 'onRequestReportCallIssue',
+    requestReportCallIssue
+  };
+};
+
+export const onRequestConnectivityCheck = (requestConnectivityCheck = 'complete') => {
+  return {
+    type: 'onRequestConnectivityCheck',
+    requestConnectivityCheck
+  };
+};
+
+export const onRequestShowDialPad = (requestShowDialPad = 'complete') => {
+  return {
+    type: 'onRequestShowDialPad',
+    requestShowDialPad
+  };
+};
+
+export const onRequestShowQuickConnects = (requestShowQuickConnects = 'complete') => {
+  return {
+    type: 'onRequestShowQuickConnects',
+    requestShowQuickConnects
+  };
+};
+
+export const onRequestShowTransferCall = (requestShowTransferCall = 'complete') => {
+  return {
+    type: 'onRequestShowTransferCall',
+    requestShowTransferCall
+  };
+};
+
+export const onChangeNetworkStrength = (networkStrength = 0) => {
+  return {
+    type: 'onChangeNetworkStrength',
+    networkStrength
+  };
+};
+
+export const onAudioLevelChange = (agentAudioLevel = 0, peerAudioLevel = 0) => {
+  return {
+    type: 'onAudioLevelChange',
+    agentAudioLevel,
+    peerAudioLevel
+  };
+};
+
+export const onAvailableStream = (stream = undefined, isLocal = true) => {
+  // console.warn('onAvailableStream', stream, isLocal);
+  return {
+    type: 'onAvailableStream',
+    stream,
+    isLocal
+  };
+};
+
+export const onRemoteStream = (remoteStream = undefined) => {
+  return {
+    type: 'onRemoteStream',
+    remoteStream
+  };
+};
+
+const acReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case 'onInitializationStateChange':
+      return {
+        ...state,
+        initialized: action.initialized
+      };
+    case 'onStateChange':
+      return {
+        ...state,
+        currentState: action.currentState
+      };
+    case 'onAgentStateChange':
+      return {
+        ...state,
+        agentState: action.agentState,
+        duration: action.duration
+      };
+    case 'onPhoneNumber':
+      return {
+        ...state,
+        phoneNumber: action.phoneNumber
+      };
+    case 'onMuteToggle':
+      return {
+        ...state,
+        muted: action.muted
+      };
+    case 'onRequestAgentStateChange':
+      return {
+        ...state,
+        requestAgentStateChange: action.requestAgentStateChange,
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: 'complete'
+      };
+    case 'onRequestAgentSettingsChange':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: action.requestAgentSettingsChange,
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: 'complete'
+      };
+    case 'onFeedbackChange':
+      return {
+        ...state,
+        feedback: action.feedback
+      };
+    case 'onRequestReportCallIssue':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: action.requestReportCallIssue,
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: 'complete'
+      };
+    case 'onRequestConnectivityCheck':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: action.requestConnectivityCheck,
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: 'complete'
+      };
+    case 'onRequestShowDialPad':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: action.requestShowDialPad,
+        requestShowQuickConnects: 'complete'
+      };
+    case 'onRequestShowQuickConnects':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: action.requestShowQuickConnects
+      };
+    case 'onRequestShowTransferCall':
+      return {
+        ...state,
+        requestAgentStateChange: 'complete',
+        requestAgentSettingsChange: 'complete',
+        requestReportCallIssue: 'complete',
+        requestConnectivityCheck: 'complete',
+        requestShowDialPad: 'complete',
+        requestShowQuickConnects: 'complete',
+        requestShowTransferCall: action.requestShowTransferCall
+      };
+    case 'onChangeNetworkStrength':
+      return {
+        ...state,
+        networkStrength: action.networkStrength
+      };
+    case 'onAudioLevelChange':
+      return {
+        ...state,
+        agentAudioLevel: action.agentAudioLevel,
+        peerAudioLevel: action.peerAudioLevel
+      };
+    case 'onAvailableStream':
+      return {
+        ...state,
+        stream: action.stream,
+        isLocal: action.isLocal
+      };
+    case 'onRemoteStream':
+      return {
+        ...state,
+        remoteStream: action.remoteStream
+      };
+    case 'onCCPError':
+      if (window.heap) {
+        window.heap.track('Dialer on CCP Error', action.errorMessage);
+      }
+      return {
+        ...state,
+        errorMessage: action.errorMessage
+      };
+    default:
+      return state;
+  }
+};
+
+export default acReducer;

package/src/client/reducers/reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import acReducer from './acReducer';
+
+const rootReducer = combineReducers({
+  acReducer: acReducer
+});
+
+export default rootReducer;

package/src/client/reducers.js

@@ -0,0 +1,2 @@
+import rootReducer from './reducers/reducer';
+export default rootReducer;

package/src/client/res/images/agent-voice-freq-icon.svg

@@ -0,0 +1,61 @@
+<svg class="lds-equalizer" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <g transform="rotate(180 50 50)">
+        <rect ng-attr-x="{{11.11111111111111 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="10.1273" fill="#ffffff" x="7.111111111111111" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="0s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{22.22222222222222 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="22.5548" fill="#ffffff" x="18.22222222222222" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.875s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{33.333333333333336 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="64.8664" fill="#ffffff" x="29.333333333333336" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.75s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{44.44444444444444 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="74.7926" fill="#ffffff" x="40.44444444444444" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.625s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{55.55555555555556 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="47.4264" fill="#ffffff" x="51.55555555555556" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.25s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{66.66666666666667 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="64.8818" fill="#ffffff" x="62.66666666666667" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.5s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{77.77777777777777 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="51.1476" fill="#ffffff" x="73.77777777777777" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.375s" dur="1">
+            </animate>
+        </rect>
+        <rect ng-attr-x="{{88.88888888888889 - config.width/2}}" y="15" ng-attr-width="{{config.width}}"
+              height="24.0037" fill="#ffffff" x="84.88888888888889" width="8">
+            <animate attributeName="height" calcMode="spline" values="50;75;10;50" times="0;0.33;0.66;1"
+                     ng-attr-dur="{{config.speed}}" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"
+                     repeatCount="indefinite" begin="-0.125s" dur="1">
+            </animate>
+        </rect>
+    </g>
+</svg>

package/src/client/res/images/change-status-icon.svg

@@ -0,0 +1,16 @@
+
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>11CE0D85-7179-4A87-B411-C2F208945791</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Afterworkcall4" transform="translate(-144.000000, -13.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="Group-8" transform="translate(144.000000, 13.000000)">
+                <g id="chevron-down" transform="translate(6.000000, 8.000000)">
+                    <polygon id="Path" points="1.41 0.58 6 5.17 10.59 0.58 12 2 6 8 0 2"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/dialer-setting-icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>863AA751-C2D4-47D9-AC9C-6A6542D18A61</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Afterworkcall4" transform="translate(-284.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="Group-9" transform="translate(284.000000, 12.000000)">
+                <g id="settings" transform="translate(2.000000, 2.000000)">
+                    <path d="M10,13.5 C8.06700338,13.5 6.5,11.9329966 6.5,10 C6.5,8.06700338 8.06700338,6.5 10,6.5 C11.9329966,6.5 13.5,8.06700338 13.5,10 C13.5,11.9329966 11.9329966,13.5 10,13.5 L10,13.5 Z M17.43,10.97 C17.47,10.65 17.5,10.33 17.5,10 C17.5,9.67 17.47,9.34 17.43,9 L19.54,7.37 C19.73,7.22 19.78,6.95 19.66,6.73 L17.66,3.27 C17.54,3.05 17.27,2.96 17.05,3.05 L14.56,4.05 C14.04,3.66 13.5,3.32 12.87,3.07 L12.5,0.42 C12.46,0.18 12.25,0 12,0 L8,0 C7.75,0 7.54,0.18 7.5,0.42 L7.13,3.07 C6.5,3.32 5.96,3.66 5.44,4.05 L2.95,3.05 C2.73,2.96 2.46,3.05 2.34,3.27 L0.34,6.73 C0.21,6.95 0.27,7.22 0.46,7.37 L2.57,9 C2.53,9.34 2.5,9.67 2.5,10 C2.5,10.33 2.53,10.65 2.57,10.97 L0.46,12.63 C0.27,12.78 0.21,13.05 0.34,13.27 L2.34,16.73 C2.46,16.95 2.73,17.03 2.95,16.95 L5.44,15.94 C5.96,16.34 6.5,16.68 7.13,16.93 L7.5,19.58 C7.54,19.82 7.75,20 8,20 L12,20 C12.25,20 12.46,19.82 12.5,19.58 L12.87,16.93 C13.5,16.67 14.04,16.34 14.56,15.94 L17.05,16.95 C17.27,17.03 17.54,16.95 17.66,16.73 L19.66,13.27 C19.78,13.05 19.73,12.78 19.54,12.63 L17.43,10.97 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/fa-circle-mark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#3885DE" fill-rule="nonzero" d="M12 19.2a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4zM12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
+</svg>

package/src/client/res/images/fa-circle-unmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000" fill-opacity=".4" fill-rule="nonzero" d="M12 19.2a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4zM12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"/>
+</svg>

package/src/client/res/images/fa-close-or-dismiss.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>6FE6C3F0-8060-46CD-B090-2262729038E6</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.4">
+        <g id="Negative-alert" transform="translate(-276.000000, -68.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group" transform="translate(12.000000, 60.000000)">
+                <g id="Group-2" transform="translate(264.000000, 8.000000)">
+                    <g id="close" transform="translate(5.000000, 5.000000)">
+                        <polygon id="Path" points="14 1.41 12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/fa-danger.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#C91922" fill-rule="nonzero" d="M12.818 13.818h-1.636v-3.273h1.636v3.273zm0 3.273h-1.636v-1.636h1.636v1.636zM3 19.545h18L12 4 3 19.545z"/>
+</svg>

package/src/client/res/images/fa-dial-button.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>2DBB0F6F-5D62-4AB9-83B6-F4623F176301</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connected" transform="translate(-121.000000, -428.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="Group" transform="translate(121.000000, 428.000000)">
+                <path d="M10,8.5 C8.8,8.5 7.6375,8.6875 6.55,9.04 L6.55,11.365 C6.55,11.665 6.3775,11.92 6.13,12.04 C5.395,12.4075 4.7275,12.88 4.1275,13.4275 C4,13.5625 3.8125,13.645 3.625,13.645 C3.4,13.645 3.2125,13.555 3.0775,13.42 L1.2175,11.56 C1.0825,11.425 1,11.2375 1,11.035 C1,10.825 1.0825,10.6375 1.2175,10.5025 C3.505,8.3275 6.595,7 10,7 C13.405,7 16.495,8.3275 18.7825,10.5025 C18.9175,10.6375 19,10.825 19,11.035 C19,11.2375 18.9175,11.425 18.7825,11.56 L16.9225,13.42 C16.7875,13.555 16.6,13.645 16.375,13.645 C16.1875,13.645 16,13.5625 15.865,13.4275 C15.2725,12.88 14.605,12.4075 13.87,12.04 C13.6225,11.92 13.45,11.665 13.45,11.365 L13.45,9.04 C12.3625,8.6875 11.2,8.5 10,8.5 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/fa-dial-number.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>8D825A64-A179-41F9-A0EC-6D680FE70D76</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connected" transform="translate(-37.000000, -298.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group-4-Copy" transform="translate(37.000000, 298.000000)">
+                <g id="dialpad" transform="translate(4.000000, 3.000000)">
+                    <path d="M4,9 C3.44771525,9 3,9.44771525 3,10 C3,10.5522847 3.44771525,11 4,11 C4.55228475,11 5,10.5522847 5,10 C5,9.44771525 4.55228475,9 4,9 L4,9 Z M1,0 C0.44771525,-5.55111512e-17 0,0.44771525 0,1 C0,1.55228475 0.44771525,2 1,2 C1.55228475,2 2,1.55228475 2,1 C2,0.44771525 1.55228475,0 1,0 L1,0 Z M1,3 C0.44771525,3 0,3.44771525 0,4 C0,4.55228475 0.44771525,5 1,5 C1.55228475,5 2,4.55228475 2,4 C2,3.44771525 1.55228475,3 1,3 L1,3 Z M1,6 C0.44771525,6 0,6.44771525 0,7 C0,7.55228475 0.44771525,8 1,8 C1.55228475,8 2,7.55228475 2,7 C2,6.44771525 1.55228475,6 1,6 L1,6 Z M7,2 C7.55228475,2 8,1.55228475 8,1 C8,0.44771525 7.55228475,0 7,0 C6.44771525,-5.55111512e-17 6,0.44771525 6,1 C6,1.55228475 6.44771525,2 7,2 L7,2 Z M4,6 C3.44771525,6 3,6.44771525 3,7 C3,7.55228475 3.44771525,8 4,8 C4.55228475,8 5,7.55228475 5,7 C5,6.44771525 4.55228475,6 4,6 L4,6 Z M7,6 C6.44771525,6 6,6.44771525 6,7 C6,7.55228475 6.44771525,8 7,8 C7.55228475,8 8,7.55228475 8,7 C8,6.44771525 7.55228475,6 7,6 L7,6 Z M7,3 C6.44771525,3 6,3.44771525 6,4 C6,4.55228475 6.44771525,5 7,5 C7.55228475,5 8,4.55228475 8,4 C8,3.44771525 7.55228475,3 7,3 L7,3 Z M4,3 C3.44771525,3 3,3.44771525 3,4 C3,4.55228475 3.44771525,5 4,5 C4.55228475,5 5,4.55228475 5,4 C5,3.44771525 4.55228475,3 4,3 L4,3 Z M4,0 C3.44771525,-5.55111512e-17 3,0.44771525 3,1 C3,1.55228475 3.44771525,2 4,2 C4.55228475,2 5,1.55228475 5,1 C5,0.44771525 4.55228475,0 4,0 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/fa-download.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#3885DE" fill-rule="nonzero" d="M6 19h12v-1.647H6V19zm12-9.059h-3.429V5H9.43v4.941H6l6 5.765 6-5.765z"/>
+</svg>

package/src/client/res/images/fa-hold.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>B3516B1D-9E6D-4C71-A977-5F4F6F705394</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connected" transform="translate(-60.000000, -247.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group-4" transform="translate(60.000000, 247.000000)">
+                <path d="M9.33333333,12.3333333 L12,12.3333333 L12,3 L9.33333333,3 L9.33333333,12.3333333 Z M4,12.3333333 L6.66666667,12.3333333 L6.66666667,3 L4,3 L4,12.3333333 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/client/res/images/fa-ico-join.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-383 295 24 24" style="enable-background:new -383 295 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{clip-path:url(#SVGID_4_);fill:#000000;}
+</style>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M-375.3,303.1h3.4v5.4l-5.2,5.2l1.4,1.4l5.8-5.8v-6.2h3.4l-4.3-4.3L-375.3,303.1z M-366.2,315.1l1.4-1.4
+			l-3.3-3.3l-1.4,1.4L-366.2,315.1z"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		<defs>
+			<rect id="SVGID_3_" x="-1321.8" y="-65.4" width="1280" height="700"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<rect x="-382.2" y="293.8" class="st1" width="22.4" height="26.3"/>
+	</g>
+</g>
+</svg>

package/src/client/res/images/fa-ico-swap.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-383 295 24 24" style="enable-background:new -383 295 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{clip-path:url(#SVGID_4_);fill:#000000;}
+</style>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M-365,299.5l-4,4h3v7c0,1.1-0.9,2-2,2s-2-0.9-2-2v-7c0-2.2-1.8-4-4-4s-4,1.8-4,4v7h-3l4,4l4-4h-3v-7
+			c0-1.1,0.9-2,2-2s2,0.9,2,2v7c0,2.2,1.8,4,4,4s4-1.8,4-4v-7h3L-365,299.5z"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		<defs>
+			<rect id="SVGID_3_" x="-1323" y="-172.5" width="1280" height="700"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<rect x="-386" y="294.5" class="st1" width="30" height="25"/>
+	</g>
+</g>
+</svg>

package/src/client/res/images/fa-info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#3885DE" fill-rule="nonzero" d="M14.149 11.475l-.63.644c-.504.504-.819.931-.819 1.981h-1.4v-.35c0-.777.315-1.477.819-1.981l.868-.882c.259-.252.413-.602.413-.987a1.4 1.4 0 1 0-2.8 0H9.2a2.8 2.8 0 1 1 5.6 0 2.24 2.24 0 0 1-.651 1.575zM12.7 16.9h-1.4v-1.4h1.4v1.4zM12 5a7 7 0 1 0 7 7c0-3.871-3.15-7-7-7z"/>
+</svg>

package/src/client/res/images/fa-input-sound.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="21" viewBox="0 0 32 21">
+    <g fill="#000" fill-opacity=".4" fill-rule="nonzero">
+        <path d="M0 9.382h1.875v2.237H0zM2.739 9.382h1.875v2.237H2.739zM5.478 8.436h1.875v4.128H5.478zM8.216 7.317h1.875v6.366H8.216zM10.954 5.34h1.875v10.322h-1.875zM13.693.65h1.875v19.7h-1.875zM16.432 2.328h1.875v16.344h-1.875zM19.171 5.683h1.875v9.634h-1.875zM21.91 7.704h1.874v5.592H21.91zM24.648 8.564h1.875v3.871h-1.875zM27.386 9.382h1.875v2.237h-1.875zM30.125 9.382H32v2.237h-1.875z"/>
+    </g>
+</svg>

package/src/client/res/images/fa-language.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#3885DE" fill-rule="nonzero" d="M15.052 13.4c.056-.462.098-.924.098-1.4 0-.476-.042-.938-.098-1.4h2.366c.112.448.182.917.182 1.4 0 .483-.07.952-.182 1.4h-2.366zm-1.239 3.892c.42-.777.742-1.617.966-2.492h2.065a5.62 5.62 0 0 1-3.031 2.492zm-.175-3.892h-3.276a9.288 9.288 0 0 1-.112-1.4c0-.476.042-.945.112-1.4h3.276c.063.455.112.924.112 1.4 0 .476-.049.938-.112 1.4zM12 17.572a9.494 9.494 0 0 1-1.337-2.772h2.674A9.494 9.494 0 0 1 12 17.572zM9.2 9.2H7.156a5.546 5.546 0 0 1 3.024-2.492c-.42.777-.735 1.617-.98 2.492zm-2.044 5.6H9.2c.245.875.56 1.715.98 2.492A5.606 5.606 0 0 1 7.156 14.8zm-.574-1.4A5.77 5.77 0 0 1 6.4 12c0-.483.07-.952.182-1.4h2.366A11.56 11.56 0 0 0 8.85 12c0 .476.042.938.098 1.4H6.582zM12 6.421A9.533 9.533 0 0 1 13.337 9.2h-2.674A9.533 9.533 0 0 1 12 6.421zM16.844 9.2h-2.065a10.954 10.954 0 0 0-.966-2.492A5.59 5.59 0 0 1 16.844 9.2zM12 5c-3.871 0-7 3.15-7 7a7 7 0 1 0 7-7z"/>
+</svg>

package/src/client/res/images/fa-mark-false.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="#000" fill-opacity=".4" fill-rule="nonzero" d="M15.444 3H4.556A1.55 1.55 0 0 0 3 4.556v10.888C3 16.304 3.696 17 4.556 17h10.888c.86 0 1.556-.696 1.556-1.556V4.556C17 3.692 16.3 3 15.444 3zm0 1.556v10.888H4.556V4.556h10.888z"/>
+</svg>

package/src/client/res/images/fa-mark-true.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="#3885DE" fill-rule="nonzero" d="M8.444 13.889L4.556 10l1.096-1.104 2.792 2.792 5.904-5.904 1.096 1.105-7 7zm7-10.889H4.556A1.55 1.55 0 0 0 3 4.556v10.888C3 16.304 3.696 17 4.556 17h10.888c.86 0 1.556-.696 1.556-1.556V4.556C17 3.692 16.3 3 15.444 3z"/>
+</svg>

package/src/client/res/images/fa-mic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#000" fill-rule="nonzero" d="M8.5 1a2.357 2.357 0 0 1 2.357 2.357v4.714a2.357 2.357 0 0 1-4.714 0V3.357A2.357 2.357 0 0 1 8.5 1zM14 8.071c0 2.774-2.05 5.06-4.714 5.445v2.413H7.714v-2.413A5.504 5.504 0 0 1 3 8.071h1.571a3.929 3.929 0 1 0 7.858 0H14z"/>
+</svg>

package/src/client/res/images/fa-mini-endcall.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{opacity:0.3;clip-path:url(#SVGID_4_);fill:#FFFFFF;}
+	.st2{clip-path:url(#SVGID_6_);}
+	.st3{clip-path:url(#SVGID_8_);fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<defs>
+			<path id="SVGID_1_" d="M0,2c0-1.1,0.9-2,2-2h21c1.1,0,2,0.9,2,2v21c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V2z"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st0">
+			<defs>
+				<rect id="SVGID_3_" x="-160" y="-60" width="200" height="400"/>
+			</defs>
+			<clipPath id="SVGID_4_">
+				<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+			</clipPath>
+			<rect x="-5" y="-5" class="st1" width="35" height="35"/>
+		</g>
+	</g>
+	<g>
+		<defs>
+			<polygon id="SVGID_5_" points="19,7.3 17.7,6 12.5,11.2 7.3,6 6,7.3 11.2,12.5 6,17.7 7.3,19 12.5,13.8 17.7,19 19,17.7
+				13.8,12.5 			"/>
+		</defs>
+		<clipPath id="SVGID_6_">
+			<use xlink:href="#SVGID_5_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st2">
+			<defs>
+				<rect id="SVGID_7_" x="-160" y="-60" width="200" height="400"/>
+			</defs>
+			<clipPath id="SVGID_8_">
+				<use xlink:href="#SVGID_7_"  style="overflow:visible;"/>
+			</clipPath>
+			<rect x="1" y="1" class="st3" width="23" height="23"/>
+		</g>
+	</g>
+</g>
+</svg>