From 74398721058c880c55897a8778592331509d8141 Mon Sep 17 00:00:00 2001 From: "mend-for-github-com[bot]" <50673670+mend-for-github-com[bot]@users.noreply.github.com> Date: Tue, 4 Aug 2026 01:29:21 +0000 Subject: [PATCH 1/2] Update dependency astro to v5.18.2 --- .../package-lock.json | 256 ++++++++++-------- 1 file changed, 146 insertions(+), 110 deletions(-) diff --git a/tutorials/voice-javascript-workshop/package-lock.json b/tutorials/voice-javascript-workshop/package-lock.json index 17c9f0c4..ac89e359 100644 --- a/tutorials/voice-javascript-workshop/package-lock.json +++ b/tutorials/voice-javascript-workshop/package-lock.json @@ -2139,9 +2139,9 @@ } }, "node_modules/astro": { - "version": "5.18.1", - "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.1.tgz", - "integrity": "sha512-m4VWilWZ+Xt6NPoYzC4CgGZim/zQUO7WFL0RHCH0AiEavF1153iC3+me2atDvXpf/yX4PyGUeD8wZLq1cirT3g==", + "version": "5.18.2", + "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.2.tgz", + "integrity": "sha512-TnFwLnAXty5MXKPDGuKXqK4AMBXG+FH6RUdK7Oyc3gyfNoFIthT+4eRbzOK43bdRlLaZuxgciDSjgtggZ3OtGQ==", "license": "MIT", "dependencies": { "@astrojs/compiler": "^2.13.0", @@ -2284,9 +2284,9 @@ } }, "node_modules/astro/node_modules/@esbuild/aix-ppc64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz", - "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz", + "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==", "cpu": [ "ppc64" ], @@ -2300,9 +2300,9 @@ } }, "node_modules/astro/node_modules/@esbuild/android-arm": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz", - "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz", + "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==", "cpu": [ "arm" ], @@ -2316,9 +2316,9 @@ } }, "node_modules/astro/node_modules/@esbuild/android-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz", - "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz", + "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==", "cpu": [ "arm64" ], @@ -2332,9 +2332,9 @@ } }, "node_modules/astro/node_modules/@esbuild/android-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz", - "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz", + "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==", "cpu": [ "x64" ], @@ -2348,9 +2348,9 @@ } }, "node_modules/astro/node_modules/@esbuild/darwin-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz", - "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz", + "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==", "cpu": [ "arm64" ], @@ -2364,9 +2364,9 @@ } }, "node_modules/astro/node_modules/@esbuild/darwin-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz", - "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz", + "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==", "cpu": [ "x64" ], @@ -2380,9 +2380,9 @@ } }, "node_modules/astro/node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz", - "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz", + "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==", "cpu": [ "arm64" ], @@ -2396,9 +2396,9 @@ } }, "node_modules/astro/node_modules/@esbuild/freebsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz", - "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz", + "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==", "cpu": [ "x64" ], @@ -2412,9 +2412,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-arm": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz", - "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz", + "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==", "cpu": [ "arm" ], @@ -2428,9 +2428,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz", - "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz", + "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==", "cpu": [ "arm64" ], @@ -2444,9 +2444,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-ia32": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz", - "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz", + "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==", "cpu": [ "ia32" ], @@ -2460,9 +2460,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-loong64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz", - "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz", + "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==", "cpu": [ "loong64" ], @@ -2476,9 +2476,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-mips64el": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz", - "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz", + "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==", "cpu": [ "mips64el" ], @@ -2492,9 +2492,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-ppc64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz", - "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz", + "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==", "cpu": [ "ppc64" ], @@ -2508,9 +2508,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-riscv64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz", - "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz", + "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==", "cpu": [ "riscv64" ], @@ -2524,9 +2524,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-s390x": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz", - "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz", + "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==", "cpu": [ "s390x" ], @@ -2540,9 +2540,9 @@ } }, "node_modules/astro/node_modules/@esbuild/linux-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz", - "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz", + "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==", "cpu": [ "x64" ], @@ -2556,9 +2556,9 @@ } }, "node_modules/astro/node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz", - "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz", + "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==", "cpu": [ "arm64" ], @@ -2572,9 +2572,9 @@ } }, "node_modules/astro/node_modules/@esbuild/netbsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz", - "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz", + "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==", "cpu": [ "x64" ], @@ -2588,9 +2588,9 @@ } }, "node_modules/astro/node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz", - "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz", + "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==", "cpu": [ "arm64" ], @@ -2604,9 +2604,9 @@ } }, "node_modules/astro/node_modules/@esbuild/openbsd-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz", - "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz", + "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==", "cpu": [ "x64" ], @@ -2620,9 +2620,9 @@ } }, "node_modules/astro/node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz", - "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz", + "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==", "cpu": [ "arm64" ], @@ -2636,9 +2636,9 @@ } }, "node_modules/astro/node_modules/@esbuild/sunos-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz", - "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz", + "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==", "cpu": [ "x64" ], @@ -2652,9 +2652,9 @@ } }, "node_modules/astro/node_modules/@esbuild/win32-arm64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz", - "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz", + "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==", "cpu": [ "arm64" ], @@ -2668,9 +2668,9 @@ } }, "node_modules/astro/node_modules/@esbuild/win32-ia32": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz", - "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz", + "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==", "cpu": [ "ia32" ], @@ -2684,9 +2684,9 @@ } }, "node_modules/astro/node_modules/@esbuild/win32-x64": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz", - "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz", + "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==", "cpu": [ "x64" ], @@ -2782,6 +2782,9 @@ "cpu": [ "arm" ], + "libc": [ + "glibc" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2798,6 +2801,9 @@ "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2814,6 +2820,9 @@ "cpu": [ "s390x" ], + "libc": [ + "glibc" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2830,6 +2839,9 @@ "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2846,6 +2858,9 @@ "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2862,6 +2877,9 @@ "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -2878,6 +2896,9 @@ "cpu": [ "arm" ], + "libc": [ + "glibc" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2900,6 +2921,9 @@ "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2922,6 +2946,9 @@ "cpu": [ "s390x" ], + "libc": [ + "glibc" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2944,6 +2971,9 @@ "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2966,6 +2996,9 @@ "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -2988,6 +3021,9 @@ "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "Apache-2.0", "optional": true, "os": [ @@ -3061,9 +3097,9 @@ } }, "node_modules/astro/node_modules/esbuild": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz", - "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz", + "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==", "hasInstallScript": true, "license": "MIT", "bin": { @@ -3073,32 +3109,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.3", - "@esbuild/android-arm": "0.27.3", - "@esbuild/android-arm64": "0.27.3", - "@esbuild/android-x64": "0.27.3", - "@esbuild/darwin-arm64": "0.27.3", - "@esbuild/darwin-x64": "0.27.3", - "@esbuild/freebsd-arm64": "0.27.3", - "@esbuild/freebsd-x64": "0.27.3", - "@esbuild/linux-arm": "0.27.3", - "@esbuild/linux-arm64": "0.27.3", - "@esbuild/linux-ia32": "0.27.3", - "@esbuild/linux-loong64": "0.27.3", - "@esbuild/linux-mips64el": "0.27.3", - "@esbuild/linux-ppc64": "0.27.3", - "@esbuild/linux-riscv64": "0.27.3", - "@esbuild/linux-s390x": "0.27.3", - "@esbuild/linux-x64": "0.27.3", - "@esbuild/netbsd-arm64": "0.27.3", - "@esbuild/netbsd-x64": "0.27.3", - "@esbuild/openbsd-arm64": "0.27.3", - "@esbuild/openbsd-x64": "0.27.3", - "@esbuild/openharmony-arm64": "0.27.3", - "@esbuild/sunos-x64": "0.27.3", - "@esbuild/win32-arm64": "0.27.3", - "@esbuild/win32-ia32": "0.27.3", - "@esbuild/win32-x64": "0.27.3" + "@esbuild/aix-ppc64": "0.27.7", + "@esbuild/android-arm": "0.27.7", + "@esbuild/android-arm64": "0.27.7", + "@esbuild/android-x64": "0.27.7", + "@esbuild/darwin-arm64": "0.27.7", + "@esbuild/darwin-x64": "0.27.7", + "@esbuild/freebsd-arm64": "0.27.7", + "@esbuild/freebsd-x64": "0.27.7", + "@esbuild/linux-arm": "0.27.7", + "@esbuild/linux-arm64": "0.27.7", + "@esbuild/linux-ia32": "0.27.7", + "@esbuild/linux-loong64": "0.27.7", + "@esbuild/linux-mips64el": "0.27.7", + "@esbuild/linux-ppc64": "0.27.7", + "@esbuild/linux-riscv64": "0.27.7", + "@esbuild/linux-s390x": "0.27.7", + "@esbuild/linux-x64": "0.27.7", + "@esbuild/netbsd-arm64": "0.27.7", + "@esbuild/netbsd-x64": "0.27.7", + "@esbuild/openbsd-arm64": "0.27.7", + "@esbuild/openbsd-x64": "0.27.7", + "@esbuild/openharmony-arm64": "0.27.7", + "@esbuild/sunos-x64": "0.27.7", + "@esbuild/win32-arm64": "0.27.7", + "@esbuild/win32-ia32": "0.27.7", + "@esbuild/win32-x64": "0.27.7" } }, "node_modules/astro/node_modules/sharp": { From 57bcd851cdf4f86d6ca44529214a3f03b23587fa Mon Sep 17 00:00:00 2001 From: "mend-for-github-com[bot]" <50673670+mend-for-github-com[bot]@users.noreply.github.com> Date: Tue, 4 Aug 2026 01:29:54 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A4=96=20Auto-generate=20tutorial=20e?= =?UTF-8?q?nvironment=20[skip=20ci]:=20Update=20dependency=20astro=20to=20?= =?UTF-8?q?v5.18.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../.astro/data-store.json | 2 +- .../project/static/background-splat.webp | Bin 129434 -> 0 bytes .../src/content/docs/03_Add_Client_SDK.md | 2 +- .../src/content/docs/04_Vonage_Call_Panel.md | 2 +- .../src/content/docs/05_Exit_Button.md | 2 +- .../src/content/docs/06_Add_To_XR_Blocks.md | 2 +- .../tutorial-config.json | 2 +- .../.astro/data-store.json | 2 +- .../project/static/background-splat.webp | Bin 129434 -> 0 bytes .../src/content/docs/03_Add_Client_SDK.md | 2 +- .../src/content/docs/04_Vonage_Call_Panel.md | 2 +- .../src/content/docs/05_Exit_Button.md | 2 +- .../src/content/docs/06_Add_To_XR_Blocks.md | 2 +- .../steps/01_create_account/index.html | 2 +- .../steps/02_setup_application/index.html | 2 +- .../steps/03_add_client_sdk/index.html | 4 ++-- .../steps/04_vonage_call_panel/index.html | 4 ++-- .../steps/05_exit_button/index.html | 4 ++-- .../steps/06_add_to_xr_blocks/index.html | 4 ++-- .../steps/07_congrats/index.html | 2 +- .../webxr-javascript-workshop/steps/404.html | 2 +- .../steps/_astro/index.CwCbqhbv.css | 1 - .../steps/_astro/index.Dd5M7k0T.css | 1 + .../webxr-javascript-workshop/steps/index.html | 2 +- .../tutorial-config.json | 2 +- uploads/webxr-javascript-workshop.zip | Bin 906887 -> 0 bytes 26 files changed, 26 insertions(+), 26 deletions(-) delete mode 100644 sources/webxr-javascript-workshop/project/static/background-splat.webp delete mode 100644 tutorials/webxr-javascript-workshop/project/static/background-splat.webp delete mode 100644 tutorials/webxr-javascript-workshop/steps/_astro/index.CwCbqhbv.css create mode 100644 tutorials/webxr-javascript-workshop/steps/_astro/index.Dd5M7k0T.css delete mode 100644 uploads/webxr-javascript-workshop.zip diff --git a/sources/webxr-javascript-workshop/.astro/data-store.json b/sources/webxr-javascript-workshop/.astro/data-store.json index ff0f47dd..7375ff83 100644 --- a/sources/webxr-javascript-workshop/.astro/data-store.json +++ b/sources/webxr-javascript-workshop/.astro/data-store.json @@ -1 +1 @@ -[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","a30a942a2ceda2e1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[\"en\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,27,28,47,48,66,67,89,90,108,109,127,128,149,150],"index",{"id":11,"data":13,"filePath":25,"digest":26,"deferredRender":16},{"title":14,"description":15,"editUrl":16,"head":17,"template":18,"hero":19,"sidebar":22,"pagefind":16,"draft":23},"CreateHer Fest","Let's build some sample applications!",true,[],"splash",{"tagline":20,"actions":21},"DIALED IN! Answer calls in WebXR.",[],{"hidden":23,"attrs":24},false,{},"src/content/docs/index.mdx","5742d2bb91f1973b","02_setup_application",{"id":27,"data":29,"body":36,"filePath":37,"digest":38,"rendered":39},{"title":30,"description":31,"editUrl":16,"head":32,"template":33,"sidebar":34,"pagefind":16,"draft":23},"Setup Application","Create an application.",[],"doc",{"hidden":23,"attrs":35},{},"> Note: Please make sure to redeem the coupon code to your Vonage account's \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\n\nIn the terminal below, you should see a set up script running asking for your `API key`. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\n\n> Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\n\nIf successful, you should see `APPLICATION READY` with a URL. Click the link to open in a new window or tab.","src/content/docs/02_Setup_Application.md","41ac2dedeb3ab62b",{"html":40,"metadata":41},"\u003Cblockquote>\n\u003Cp>Note: Please make sure to redeem the coupon code to your Vonage account’s \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\u003C/p>\n\u003C/blockquote>\n\u003Cp>In the terminal below, you should see a set up script running asking for your \u003Ccode dir=\"auto\">API key\u003C/code>. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>If successful, you should see \u003Ccode dir=\"auto\">APPLICATION READY\u003C/code> with a URL. Click the link to open in a new window or tab.\u003C/p>",{"headings":42,"localImagePaths":43,"remoteImagePaths":44,"frontmatter":45,"imagePaths":46},[],[],[],{"title":30,"description":31},[],"01_create_account",{"id":47,"data":49,"body":55,"filePath":56,"digest":57,"rendered":58},{"title":50,"description":51,"editUrl":16,"head":52,"template":33,"sidebar":53,"pagefind":16,"draft":23},"Create an Account","Create a Vonage account.",[],{"hidden":23,"attrs":54},{},"First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\n\nHere's a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\n\n```html\nDIMFLCHF26\n```\n\n> Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.","src/content/docs/01_Create_Account.md","5828454718840d2d",{"html":59,"metadata":60},"\u003Cp>First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\u003C/p>\n\u003Cp>Here’s a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">DIMFLCHF26\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"DIMFLCHF26\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.\u003C/p>\n\u003C/blockquote>",{"headings":61,"localImagePaths":62,"remoteImagePaths":63,"frontmatter":64,"imagePaths":65},[],[],[],{"title":50,"description":51},[],"03_add_client_sdk",{"id":66,"data":68,"body":74,"filePath":75,"digest":76,"rendered":77},{"title":69,"description":70,"editUrl":16,"head":71,"template":33,"sidebar":72,"pagefind":16,"draft":23},"Add Client SDK","Add Vonage Client SDK to index.html",[],{"hidden":23,"attrs":73},{},"We'll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\n\nThe following code will be placed in the `index.html` file.\n\nFirst, we will need to load the Vonage Client SDK from a CDN (`\u003C!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->`):\n```html\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\">\u003C/script>\n```\n\n> Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\n\n## That's it for the HTML!\n\nEverything else will be handled by XR Blocks.","src/content/docs/03_Add_Client_SDK.md","77c79f191f661eb3",{"html":78,"metadata":79},"\u003Cp>We’ll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">index.html\u003C/code> file.\u003C/p>\n\u003Cp>First, we will need to load the Vonage Client SDK from a CDN (\u003Ccode dir=\"auto\"><!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->\u003C/code>):\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C5E478;--1:#3B61B0\">src\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"\u003Cscript src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js">\u003C/script>\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"thats-it-for-the-html\">That’s it for the HTML!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#thats-it-for-the-html\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “That’s it for the HTML!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Everything else will be handled by XR Blocks.\u003C/p>",{"headings":80,"localImagePaths":85,"remoteImagePaths":86,"frontmatter":87,"imagePaths":88},[81],{"depth":82,"slug":83,"text":84},2,"thats-it-for-the-html","That’s it for the HTML!",[],[],{"title":69,"description":70},[],"04_vonage_call_panel",{"id":89,"data":91,"body":97,"filePath":98,"digest":99,"rendered":100},{"title":92,"description":93,"editUrl":16,"head":94,"template":33,"sidebar":95,"pagefind":16,"draft":23},"Vonage Call Panel","Create XR Blocks UI to answer phone calls",[],{"hidden":23,"attrs":96},{},"Now, we'll be creating the UI.\n\nTo recieve phone calls via the Vonage Voice API using the XR Blocks library's \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\n\nTo show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\n\nThe Vonage Voice Client SDK's \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\n\nThe virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\n\nThe following code will be placed in the `VonageAudioCall.js` file.\n\nFirst, we will set the Quick Replies that the user can send into the call.\nFind `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code:\n\n```js\nconst QUICK_REPLIES = [\n { label: \"Meeting\", message: \"In a meeting, I'll call you back.\" },\n { label: \"Talk Later\", message: \"Can't talk right now. I'll talk later.\" },\n { label: \"OMW!\", message: \"On my way! Talk soon.\" },\n { label: \"5 Mins\", message: \"Call you back in 5 minutes.\" },\n];\n```\n\nLet's initiate the constructor for our panel with some variables:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n\n```js\nconstructor() {\n super();\n this.token = '';\n this.client = new vonageClientSDK.VonageClient();\n this.callId = null;\n // Keep a reference to the panel so we can destroy it later\n this.panel = null;\n this.statusText = null;\n this.userName = \"XR_User_1\";\n this.grid = null;\n this.controlRow = null;\n this.puppetHead = null;\n this.face = null;\n this.mouth = null;\n this._camWorld = new THREE.Vector3();\n this._headWorld = new THREE.Vector3();\n this.replyPanel = null;\n this.typedTextView = null;\n this._currentTypedText = '';\n this.keyboard = null;\n}\n```\n\nHere's the function to create an Avatar and add the MediaStream for the LipSync feature: `// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄`\n\n```js\n_createAvatar(stream) {\n // Safety: don't create a second avatar if one already exists\n if (this.puppetHead) return;\n\n console.log(\"Creating lipsync avatar...\");\n\n const faceR = 0.1;\n\n const head = new THREE.Group();\n // Position: in front of the user, roughly at face height\n head.position.set(0, xb.user.height, -1.2);\n\n // --- Sphere face mesh ---\n const faceGeom = new THREE.SphereGeometry(faceR, 32, 24);\n const faceMat = new THREE.MeshStandardMaterial({\n color: 0xf2d4b3,\n roughness: 0.6,\n metalness: 0.05,\n });\n const faceMesh = new THREE.Mesh(faceGeom, faceMat);\n head.add(faceMesh);\n\n this.face = new xb.StylizedFace({ showEyes: true });\n head.add(this.face);\n\n this.mouth = new LipsyncMouth(stream, { target: this.face });\n head.add(this.mouth);\n\n this.puppetHead = head;\n this.add(head);\n}\n```\n\nThis function will remove the 3D Avatar when the call is over:\n`// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄`\n\n```js\n_removeAvatar() {\n if (!this.puppetHead) return;\n\n console.log(\"Removing lipsync avatar...\");\n\n if (this.mouth) {\n // Detach from the head group before nulling the reference\n this.mouth.parent?.remove(this.mouth);\n this.mouth = null;\n }\n\n if (this.face) {\n this.face.parent?.remove(this.face);\n // dispose() frees the underlying canvas/texture to avoid memory leaks\n this.face.dispose();\n this.face = null;\n }\n\n this.remove(this.puppetHead);\n this.puppetHead = null;\n}\n```\n\nHere's the function to create the panel:\n`// ⌄⌄⌄ Create Call panel ⌄⌄⌄`\n\n```js\n_createCallPanel(callerName) {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Call UI...\");\n\n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' });\n this.panel.position.set(\n 0,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n\n this.add(this.panel);\n\n this.grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = this.grid.addRow({ weight: 0.7 }).addText({\n text: `Incoming call from ${callerName}...`,\n fontColor: '#ffffff',\n fontSize: 0.08,\n });\n\n this.updateControlRow('INCOMING');\n}\n```\n\nFunction to update the call control section:\n`// ⌄⌄⌄ Update Call controls ⌄⌄⌄`\n\n```js\nupdateControlRow(state) {\n if (!this.grid) return;\n\n // 1. Remove the existing row if it exists\n if (this.controlRow) {\n this.grid.remove(this.controlRow);\n this.controlRow = null;\n this.grid.resetLayout();\n }\n\n // 2. Create a fresh row. It will naturally append below the Status Text.\n // We give it the full remaining weight (0.3 relative to the panel, or flexible)\n this.controlRow = this.grid.addRow({ weight: 0.3 });\n\n if (state === 'INCOMING') {\n // --- ANSWER BUTTON ---\n const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call',\n fontSize: 0.5,\n backgroundColor: '#00ff00'\n });\n answerBtn.onTriggered = () => this._onAnswer();\n\n // --- REJECT BUTTON ---\n const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n rejectBtn.onTriggered = () => this._onReject();\n\n } else if (state === 'CONNECTED') {\n // --- HANGUP BUTTON ---\n // This is a fresh row, so layouts will calculate correctly\n const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n hangupBtn.onTriggered = () => this._onHangup();\n }\n\n // 3. Force layout update\n this.panel.updateLayouts();\n}\n```\n\nThis function will remove the panel once the call is over:\n`// ⌄⌄⌄ Remove Call panel ⌄⌄⌄`\n\n```js\n_removeCallPanel() {\n if (this.panel) {\n console.log(\"Destroying Call UI...\");\n this.remove(this.panel);\n this.panel = null;\n this.grid = null;\n this.statusText = null;\n this.controlRow = null;\n }\n this._removeReplyPanel();\n}\n```\n\nNow, let's add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\n\nHere's the code to show the Keyboard:\n`// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄`\n\n```js\n_showKeyboard() {\n if (this.keyboard) return;\n\n this.keyboard = new Keyboard();\n // Position it below and aligned with the reply panel\n this.keyboard.position.set(\n 0,\n xb.user.height - 1.35,\n -xb.user.objectDistance + 1\n );\n this.add(this.keyboard);\n\n // Update the display on every keystroke\n this.keyboard.onTextChanged = (text) => {\n this._currentTypedText = text;\n if (this.typedTextView) {\n this.typedTextView.text = text.length > 0 ? text : 'Tap to type...';\n }\n };\n\n // Enter key sends immediately — same as tapping the Send button\n this.keyboard.onEnterPressed = (text) => {\n this._sendTypedText();\n };\n}\n```\n\nIf we want to hide the Keyboard, here's the code:\n`// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄`\n\n```js\n_hideKeyboard() {\n if (!this.keyboard) return;\n this.remove(this.keyboard);\n this.keyboard = null;\n}\n```\n\nTo toggle between showing and hidding the keyboard, we have this code:\n`// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄`\n\n```js\n_toggleKeyboard() {\n this.keyboard ? this._hideKeyboard() : this._showKeyboard();\n}\n```\n\nLet's create the functions that will send the text to be said into the call just in case we can't talk at that moment.\n\nTo send the Quick Replies that we set before:\n`// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄`\n\n```js\n_sendQuickReply(message) {\n if (!this.callId) return;\n console.log(`Sending quick reply: \"${message}\"`);\n\n // Give the user immediate visual feedback in the status bar\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, message)\n .then(() => {\n console.log('Quick reply sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${message}\"`;\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nIn the case we want to carry on the conversation but maybe can't speak (ie in a public space), we can send custom text:\n`// ⌄⌄⌄ Send Custom Text ⌄⌄⌄`\n\n```js\n_sendTypedText() {\n const text = this._currentTypedText.trim();\n if (!text) return;\n if (!this.callId) return;\n\n console.log(`Sending typed text: \"${text}\"`);\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, text)\n .then(() => {\n console.log('Typed text sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${text}\"`;\n\n // Clear the keyboard buffer and reset the display\n if (this.keyboard) this.keyboard.setText('');\n this._currentTypedText = '';\n if (this.typedTextView) this.typedTextView.text = 'Tap to type...';\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nHere we will create the Reply panel that will hold all the way we can send a text message into the call:\n`// ⌄⌄⌄ Create Reply panel ⌄⌄⌄`\n\n```js\n_createReplyPanel() {\n if (this.replyPanel) return;\n\n this.replyPanel = new xb.SpatialPanel({\n backgroundColor: '#1a1a2ecc',\n width: .75,\n height: 0.9,\n });\n // Offset to the right so it sits beside the main call panel\n this.replyPanel.position.set(\n 0.8,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n this.add(this.replyPanel);\n\n const grid = this.replyPanel.addGrid();\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Quick Replies',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n const pairs = [\n QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ]\n QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ]\n ];\n\n pairs.forEach(pair => {\n const row = grid.addRow({ weight: 0.20 });\n pair.forEach(({ label, message }) => {\n const btn = row.addCol({ weight: 0.5 }).addTextButton({\n text: label,\n fontSize: 0.35,\n backgroundColor: '#2e2e50',\n fontColor: '#ffffff',\n });\n btn.onTriggered = () => this._sendQuickReply(message);\n });\n });\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Talk via Text',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n this.typedTextView = grid.addRow({ weight: 0.18 }).addText({\n text: 'Tap to type...',\n fontColor: '#ffffff',\n fontSize: 0.065,\n textAlign: 'left',\n });\n\n const actionRow = grid.addRow({ weight: 0.30 });\n\n const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'keyboard',\n fontSize: 0.5,\n backgroundColor: '#2e3a4a',\n });\n kbBtn.onTriggered = () => this._toggleKeyboard();\n\n const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'send',\n fontSize: 0.5,\n backgroundColor: '#1a4a2a',\n });\n sendBtn.onTriggered = () => this._sendTypedText();\n\n this.replyPanel.updateLayouts();\n}\n```\n\nJust like with the Call panel, we will have a function to remove the Reply panel:\n`// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄`\n\n```js\n_removeReplyPanel() {\n this._hideKeyboard();\n if (this.replyPanel) {\n this.remove(this.replyPanel);\n this.replyPanel = null;\n this.typedTextView = null;\n }\n this._currentTypedText = '';\n}\n```\n\nThis function answers the call and updates the status and call control section:\n`// ⌄⌄⌄ Answer call method ⌄⌄⌄`\n\n```js\n_onAnswer() {\n console.log('Answering...');\n this.client.answer(this.callId)\n .then(() => {\n console.log(\"Success answering call.\");\n this.statusText.text = `Call answered.`;\n this.updateControlRow('CONNECTED');\n\n // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\n this._createReplyPanel();\n\n // get media stream\n const audioElement = this.client.getAudioOutputElement();\n if (audioElement && audioElement.srcObject) {\n // This is the active WebRTC MediaStream managed by Vonage\n const remoteStream = audioElement.srcObject;\n console.log('remoteStream: ', remoteStream);\n\n // Example: Grab individual audio tracks from the stream\n const audioTracks = remoteStream.getAudioTracks();\n console.log(\"Active Audio Tracks:\", audioTracks);\n\n // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\n this._createAvatar(remoteStream);\n }\n })\n .catch(error => {\n console.error(\"Error answering call: \", error);\n });\n}\n```\n\nThis function will reject the incoming call and remove the panel:\n`// ⌄⌄⌄ Reject call method ⌄⌄⌄`\n\n```js\n_onReject() {\n console.log('Rejecting...');\n this.client.reject(this.callId)\n .then(() => {\n console.log(\"Success rejecting call.\");\n })\n .catch(error => {\n console.error(\"Error rejecting call: \", error);\n });\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nThis function will hang up the ongoing call and remove the panel:\n`// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ `\n\n```js\n_onHangup() {\n console.log('Hanging up...');\n this.client.hangup(this.callId)\n .then(() => {\n console.log(\"Success hanging up call.\");\n })\n .catch(error => {\n console.error(\"Error hanging up call: \", error);\n });\n // We manually destroy the panel here too, just in case the event lags\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nSet up some listeners for the events that the Vonage Client SDK will emit and what to do:\n`// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄`\n\n```js\nsetupVonageListeners() {\n // --- CREATE UI ON INVITE ---\n this.client.on('callInvite', (callId, from, channelType) => {\n this.callId = callId;\n const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, \"*\")\n console.log(`Incoming call from ${maskedNumber}`);\n\n // Trigger the UI creation here\n this._createCallPanel(maskedNumber);\n });\n\n this.client.on('legStatusUpdate', (callId, legId, status) => {\n console.log(\"status: \", status);\n if (this.statusText) {\n this.statusText.text = `Status: ${status}`;\n }\n });\n\n // --- REMOVE UI ON CANCEL/HANGUP ---\n this.client.on('callInviteCancel', (callId) => {\n console.log(`Call cancelled: ${callId}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n\n this.client.on(\"callHangup\", (callId, callQuality, reason) => {\n console.log(`Call hung up: ${reason}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n}\n```\n\nGet a token from the server so you can connect to a session:\n`// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ `\n\n```js\nasync connectToVonage(name) {\n try {\n console.log(`Fetching token for ${name}...`);\n\n // 1. Fetch the token (AWAIT the result)\n const response = await fetch(`/token?name=${name}`);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n this.token = data.token;\n console.log(\"Fetched token successfully.\");\n\n // 2. Create the Session (AWAIT the result)\n const sessionId = await this.client.createSession(this.token);\n\n console.log(\"Session created successfully. Session ID:\", sessionId);\n\n // 3. Update UI\n // Instead, update your XR Panel text to show we are ready\n if(this.statusText) {\n this.statusText.text = \"Connected. Waiting for calls...\";\n }\n\n } catch (error) {\n console.error(\"Connection failed:\", error);\n if(this.statusText) this.statusText.text = \"Connection Failed.\";\n }\n}\n```\n\nInitialize the Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n\n```js\ninit() {\n console.log(\"Vonage init!\",this.client);\n this.setupVonageListeners();\n this.connectToVonage(this.userName);\n}\n```","src/content/docs/04_Vonage_Call_Panel.md","35a9af8a8ca7718e",{"html":101,"metadata":102},"\u003Cp>Now, we’ll be creating the UI.\u003C/p>\n\u003Cp>To recieve phone calls via the Vonage Voice API using the XR Blocks library’s \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\u003C/p>\n\u003Cp>To show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The Vonage Voice Client SDK’s \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\u003C/p>\n\u003Cp>The virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">VonageAudioCall.js\u003C/code> file.\u003C/p>\n\u003Cp>First, we will set the Quick Replies that the user can send into the call.\nFind \u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄\u003C/code> and add this code:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Meeting\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">In a meeting, I'll call you back.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk Later\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Can't talk right now. I'll talk later.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">OMW!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">On my way! Talk soon.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">5 Mins\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Call you back in 5 minutes.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"const QUICK_REPLIES = [ { label: "Meeting", message: "In a meeting, I'll call you back." }, { label: "Talk Later", message: "Can't talk right now. I'll talk later." }, { label: "OMW!", message: "On my way! Talk soon." }, { label: "5 Mins", message: "Call you back in 5 minutes." },];\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s initiate the constructor for our panel with some variables:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">vonageClientSDK\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageClient\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">XR_User_1\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_camWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_headWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"constructor() { super(); this.token = ''; this.client = new vonageClientSDK.VonageClient(); this.callId = null; // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.userName = "XR_User_1"; this.grid = null; this.controlRow = null; this.puppetHead = null; this.face = null; this.mouth = null; this._camWorld = new THREE.Vector3(); this._headWorld = new THREE.Vector3(); this.replyPanel = null; this.typedTextView = null; this._currentTypedText = ''; this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create an Avatar and add the MediaStream for the LipSync feature: \u003Ccode dir=\"auto\">// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Safety: don't create a second avatar if one already exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceR\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Group\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position: in front of the user, roughly at face height\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- Sphere face mesh ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceGeom\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SphereGeometry\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceR\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">32\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">24\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMat\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">MeshStandardMaterial\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">color: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0xf2d4b3\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">roughness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.6\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">metalness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.05\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Mesh\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceGeom\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">faceMat\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">StylizedFace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ showEyes: \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">true\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">LipsyncMouth\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, { target: \u003C/span>\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createAvatar(stream) { // Safety: don't create a second avatar if one already exists if (this.puppetHead) return; console.log("Creating lipsync avatar..."); const faceR = 0.1; const head = new THREE.Group(); // Position: in front of the user, roughly at face height head.position.set(0, xb.user.height, -1.2); // --- Sphere face mesh --- const faceGeom = new THREE.SphereGeometry(faceR, 32, 24); const faceMat = new THREE.MeshStandardMaterial({ color: 0xf2d4b3, roughness: 0.6, metalness: 0.05, }); const faceMesh = new THREE.Mesh(faceGeom, faceMat); head.add(faceMesh); this.face = new xb.StylizedFace({ showEyes: true }); head.add(this.face); this.mouth = new LipsyncMouth(stream, { target: this.face }); head.add(this.mouth); this.puppetHead = head; this.add(head);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the 3D Avatar when the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Removing lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Detach from the head group before nulling the reference\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">mouth\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// dispose() frees the underlying canvas/texture to avoid memory leaks\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">dispose\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeAvatar() { if (!this.puppetHead) return; console.log("Removing lipsync avatar..."); if (this.mouth) { // Detach from the head group before nulling the reference this.mouth.parent?.remove(this.mouth); this.mouth = null; } if (this.face) { this.face.parent?.remove(this.face); // dispose() frees the underlying canvas/texture to avoid memory leaks this.face.dispose(); this.face = null; } this.remove(this.puppetHead); this.puppetHead = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callerName\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.7\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callerName\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.08\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createCallPanel(callerName) { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Call UI..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.panel); this.grid = this.panel.addGrid(); // 2. Status Text this.statusText = this.grid.addRow({ weight: 0.7 }).addText({ text: `Incoming call from ${callerName}...`, fontColor: '#ffffff', fontSize: 0.08, }); this.updateControlRow('INCOMING');}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to update the call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Update Call controls ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Remove the existing row if it exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">resetLayout\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create a fresh row. It will naturally append below the Status Text.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We give it the full remaining weight (0.3 relative to the panel, or flexible)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- ANSWER BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#00ff00\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REJECT BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">else\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- HANGUP BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is a fresh row, so layouts will calculate correctly\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Force layout update\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"updateControlRow(state) { if (!this.grid) return; // 1. Remove the existing row if it exists if (this.controlRow) { this.grid.remove(this.controlRow); this.controlRow = null; this.grid.resetLayout(); } // 2. Create a fresh row. It will naturally append below the Status Text. // We give it the full remaining weight (0.3 relative to the panel, or flexible) this.controlRow = this.grid.addRow({ weight: 0.3 }); if (state === 'INCOMING') { // --- ANSWER BUTTON --- const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call', fontSize: 0.5, backgroundColor: '#00ff00' }); answerBtn.onTriggered = () => this._onAnswer(); // --- REJECT BUTTON --- const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); rejectBtn.onTriggered = () => this._onReject(); } else if (state === 'CONNECTED') { // --- HANGUP BUTTON --- // This is a fresh row, so layouts will calculate correctly const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); hangupBtn.onTriggered = () => this._onHangup(); } // 3. Force layout update this.panel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the panel once the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Destroying Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeCallPanel() { if (this.panel) { console.log("Destroying Call UI..."); this.remove(this.panel); this.panel = null; this.grid = null; this.statusText = null; this.controlRow = null; } this._removeReplyPanel();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Now, let’s add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\u003C/p>\n\u003Cp>Here’s the code to show the Keyboard:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position it below and aligned with the reply panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.35\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">+\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Update the display on every keystroke\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTextChanged\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">length\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Enter key sends immediately — same as tapping the Send button\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onEnterPressed\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_showKeyboard() { if (this.keyboard) return; this.keyboard = new Keyboard(); // Position it below and aligned with the reply panel this.keyboard.position.set( 0, xb.user.height - 1.35, -xb.user.objectDistance + 1 ); this.add(this.keyboard); // Update the display on every keystroke this.keyboard.onTextChanged = (text) => { this._currentTypedText = text; if (this.typedTextView) { this.typedTextView.text = text.length > 0 ? text : 'Tap to type...'; } }; // Enter key sends immediately — same as tapping the Send button this.keyboard.onEnterPressed = (text) => { this._sendTypedText(); };}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>If we want to hide the Keyboard, here’s the code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_hideKeyboard() { if (!this.keyboard) return; this.remove(this.keyboard); this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>To toggle between showing and hidding the keyboard, we have this code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_toggleKeyboard() { this.keyboard ? this._hideKeyboard() : this._showKeyboard();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s create the functions that will send the text to be said into the call just in case we can’t talk at that moment.\u003C/p>\n\u003Cp>To send the Quick Replies that we set before:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending quick reply: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Give the user immediate visual feedback in the status bar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick reply sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendQuickReply(message) { if (!this.callId) return; console.log(`Sending quick reply: "${message}"`); // Give the user immediate visual feedback in the status bar if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, message) .then(() => { console.log('Quick reply sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${message}"`; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>In the case we want to carry on the conversation but maybe can’t speak (ie in a public space), we can send custom text:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Custom Text ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">trim\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending typed text: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Typed text sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Clear the keyboard buffer and reset the display\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendTypedText() { const text = this._currentTypedText.trim(); if (!text) return; if (!this.callId) return; console.log(`Sending typed text: "${text}"`); if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, text) .then(() => { console.log('Typed text sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${text}"`; // Clear the keyboard buffer and reset the display if (this.keyboard) this.keyboard.setText(''); this._currentTypedText = ''; if (this.typedTextView) this.typedTextView.text = 'Tap to type...'; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here we will create the Reply panel that will hold all the way we can send a text message into the call:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a1a2ecc\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.75\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.9\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Offset to the right so it sits beside the main call panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.8\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick Replies\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ Meeting, Talk Later ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ OMW!, 5 Mins ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">pair\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.20\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pair\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">{ \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">label\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> }\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addTextButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">label\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.35\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e2e50\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk via Text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.18\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.065\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">textAlign: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">left\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.30\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">keyboard\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e3a4a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">send\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a4a2a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createReplyPanel() { if (this.replyPanel) return; this.replyPanel = new xb.SpatialPanel({ backgroundColor: '#1a1a2ecc', width: .75, height: 0.9, }); // Offset to the right so it sits beside the main call panel this.replyPanel.position.set( 0.8, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.replyPanel); const grid = this.replyPanel.addGrid(); grid.addRow({ weight: 0.06 }).addText({ text: 'Quick Replies', fontColor: '#9b9bff', fontSize: 0.055, }); const pairs = [ QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ] QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ] ]; pairs.forEach(pair => { const row = grid.addRow({ weight: 0.20 }); pair.forEach(({ label, message }) => { const btn = row.addCol({ weight: 0.5 }).addTextButton({ text: label, fontSize: 0.35, backgroundColor: '#2e2e50', fontColor: '#ffffff', }); btn.onTriggered = () => this._sendQuickReply(message); }); }); grid.addRow({ weight: 0.06 }).addText({ text: 'Talk via Text', fontColor: '#9b9bff', fontSize: 0.055, }); this.typedTextView = grid.addRow({ weight: 0.18 }).addText({ text: 'Tap to type...', fontColor: '#ffffff', fontSize: 0.065, textAlign: 'left', }); const actionRow = grid.addRow({ weight: 0.30 }); const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'keyboard', fontSize: 0.5, backgroundColor: '#2e3a4a', }); kbBtn.onTriggered = () => this._toggleKeyboard(); const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'send', fontSize: 0.5, backgroundColor: '#1a4a2a', }); sendBtn.onTriggered = () => this._sendTypedText(); this.replyPanel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Just like with the Call panel, we will have a function to remove the Reply panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeReplyPanel() { this._hideKeyboard(); if (this.replyPanel) { this.remove(this.replyPanel); this.replyPanel = null; this.typedTextView = null; } this._currentTypedText = '';}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function answers the call and updates the status and call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Answer call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Answering...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success answering call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call answered.\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// get media stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioOutputElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">&&\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is the active WebRTC MediaStream managed by Vonage\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">remoteStream: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Example: Grab individual audio tracks from the stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Active Audio Tracks:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error answering call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onAnswer() { console.log('Answering...'); this.client.answer(this.callId) .then(() => { console.log("Success answering call."); this.statusText.text = `Call answered.`; this.updateControlRow('CONNECTED'); // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄ this._createReplyPanel(); // get media stream const audioElement = this.client.getAudioOutputElement(); if (audioElement && audioElement.srcObject) { // This is the active WebRTC MediaStream managed by Vonage const remoteStream = audioElement.srcObject; console.log('remoteStream: ', remoteStream); // Example: Grab individual audio tracks from the stream const audioTracks = remoteStream.getAudioTracks(); console.log("Active Audio Tracks:", audioTracks); // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄ this._createAvatar(remoteStream); } }) .catch(error => { console.error("Error answering call: ", error); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will reject the incoming call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Reject call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Rejecting...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">reject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success rejecting call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error rejecting call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onReject() { console.log('Rejecting...'); this.client.reject(this.callId) .then(() => { console.log("Success rejecting call."); }) .catch(error => { console.error("Error rejecting call: ", error); }); this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will hang up the ongoing call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Hanging up...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success hanging up call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error hanging up call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We manually destroy the panel here too, just in case the event lags\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onHangup() { console.log('Hanging up...'); this.client.hangup(this.callId) .then(() => { console.log("Success hanging up call."); }) .catch(error => { console.error("Error hanging up call: ", error); }); // We manually destroy the panel here too, just in case the event lags this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Set up some listeners for the events that the Vonage Client SDK will emit and what to do:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- CREATE UI ON INVITE ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInvite\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">channelType\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">from\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">replace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">(?=(?:\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\D\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">*\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">{4}\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">g\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">*\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Trigger the UI creation here\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">legStatusUpdate\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">legId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">status: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REMOVE UI ON CANCEL/HANGUP ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInviteCancel\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call cancelled: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callHangup\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callQuality\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">reason\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call hung up: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">reason\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"setupVonageListeners() { // --- CREATE UI ON INVITE --- this.client.on('callInvite', (callId, from, channelType) => { this.callId = callId; const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, "*") console.log(`Incoming call from ${maskedNumber}`); // Trigger the UI creation here this._createCallPanel(maskedNumber); }); this.client.on('legStatusUpdate', (callId, legId, status) => { console.log("status: ", status); if (this.statusText) { this.statusText.text = `Status: ${status}`; } }); // --- REMOVE UI ON CANCEL/HANGUP --- this.client.on('callInviteCancel', (callId) => { console.log(`Call cancelled: ${callId}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); }); this.client.on("callHangup", (callId, callQuality, reason) => { console.log(`Call hung up: ${reason}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Get a token from the server so you can connect to a session:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">async\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">name\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">try\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Fetching token for \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Fetch the token (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">fetch\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">/token?name=\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">ok\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">throw\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">HTTP error! status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">json\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Fetched token successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create the Session (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sessionId\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createSession\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Session created successfully. Session ID:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">sessionId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Update UI\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Instead, update your XR Panel text to show we are ready\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connected. Waiting for calls...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection failed:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection Failed.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"async connectToVonage(name) { try { console.log(`Fetching token for ${name}...`); // 1. Fetch the token (AWAIT the result) const response = await fetch(`/token?name=${name}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); this.token = data.token; console.log("Fetched token successfully."); // 2. Create the Session (AWAIT the result) const sessionId = await this.client.createSession(this.token); console.log("Session created successfully. Session ID:", sessionId); // 3. Update UI // Instead, update your XR Panel text to show we are ready if(this.statusText) { this.statusText.text = "Connected. Waiting for calls..."; } } catch (error) { console.error("Connection failed:", error); if(this.statusText) this.statusText.text = "Connection Failed."; }}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize the Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Vonage init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"init() { console.log("Vonage init!",this.client); this.setupVonageListeners(); this.connectToVonage(this.userName);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":103,"localImagePaths":104,"remoteImagePaths":105,"frontmatter":106,"imagePaths":107},[],[],[],{"title":92,"description":93},[],"05_exit_button",{"id":108,"data":110,"body":116,"filePath":117,"digest":118,"rendered":119},{"title":111,"description":112,"editUrl":16,"head":113,"template":33,"sidebar":114,"pagefind":16,"draft":23},"Exiting WebXR application","Button to exit WebXR application",[],{"hidden":23,"attrs":115},{},"When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\n\nThe following code will be placed in the `ExitButton.js` file.\n\nCreate the constructor for the Class:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n```js\n constructor() {\n super();\n // Keep a reference to the panel so we can destroy it later\n this.panel = null; \n this.statusText = null;\n this.exitPanelText = \"Exit Demo\";\n }\n```\n\nFunction to create a panel for the Exit Button:\n`// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄`\n```js\n createExitPanel() {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Exit Button...\");\n \n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({\n width: 0.5,\n height: 0.5, \n backgroundColor: '#2b2b2baa'\n });\n\n this.panel.position.set(\n 0,\n xb.user.height,\n 2.0\n );\n\n this.panel.rotation.set(0, Math.PI, 0);\n this.add(this.panel);\n\n const grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = grid.addRow({ weight: 1 }).addText({\n text: this.exitPanelText,\n fontColor: '#ffffff',\n fontSize: .4,\n });\n\n // Orbiter\n const orbiter = grid.addOrbiter();\n orbiter.addExitButton();\n this.panel.updateLayouts();\n }\n```\n\nInitialize Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n```js\n init() {\n console.log(\"Exit Button init!\");\n this.createExitPanel();\n }\n```","src/content/docs/05_Exit_Button.md","976dff780a601e73",{"html":120,"metadata":121},"\u003Cp>When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">ExitButton.js\u003C/code> file.\u003C/p>\n\u003Cp>Create the constructor for the Class:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Demo\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" constructor() { super(); // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.exitPanelText = "Exit Demo"; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to create a panel for the Exit Button:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Exit Button...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2.0\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">rotation\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">Math\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">PI\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Orbiter\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addOrbiter\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addExitButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" createExitPanel() { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Exit Button..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ width: 0.5, height: 0.5, backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height, 2.0 ); this.panel.rotation.set(0, Math.PI, 0); this.add(this.panel); const grid = this.panel.addGrid(); // 2. Status Text this.statusText = grid.addRow({ weight: 1 }).addText({ text: this.exitPanelText, fontColor: '#ffffff', fontSize: .4, }); // Orbiter const orbiter = grid.addOrbiter(); orbiter.addExitButton(); this.panel.updateLayouts(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Button init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" init() { console.log("Exit Button init!"); this.createExitPanel(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"title":111,"description":112},[],"06_add_to_xr_blocks",{"id":127,"data":129,"body":135,"filePath":136,"digest":137,"rendered":138},{"title":130,"description":131,"editUrl":16,"head":132,"template":33,"sidebar":133,"pagefind":16,"draft":23},"Add panels to XR Blocks","adding panels to WebXR application",[],{"hidden":23,"attrs":134},{},"Let's add the 2 panels to the application.\n\nThe following code will be placed in the `main.js` file.\n\nFirst, import the Panels:\n`// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nimport { VonageAudioCall } from './VonageAudioCall.js';\nimport { ExitPanel } from './ExitButton.js';\n```\n\nCreate instances and add to the application:\n`// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nxb.add(new VonageAudioCall());\nxb.add(new ExitPanel());\n```\n\n## Time to test the application\nRefresh the application and try to call the phone number that was purchased and assigned while running the setup script.\n\n> Note: You can find the phone number connected to your Vonage application in the `.env` file.","src/content/docs/06_Add_To_XR_Blocks.md","d3b20f81f928d1fb",{"html":139,"metadata":140},"\u003Cp>Let’s add the 2 panels to the application.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">main.js\u003C/code> file.\u003C/p>\n\u003Cp>First, import the Panels:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { VonageAudioCall } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./VonageAudioCall.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { ExitPanel } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./ExitButton.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"import { VonageAudioCall } from './VonageAudioCall.js';import { ExitPanel } from './ExitButton.js';\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Create instances and add to the application:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageAudioCall\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">ExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"xb.add(new VonageAudioCall());xb.add(new ExitPanel());\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"time-to-test-the-application\">Time to test the application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#time-to-test-the-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Time to test the application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Refresh the application and try to call the phone number that was purchased and assigned while running the setup script.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can find the phone number connected to your Vonage application in the \u003Ccode dir=\"auto\">.env\u003C/code> file.\u003C/p>\n\u003C/blockquote>",{"headings":141,"localImagePaths":145,"remoteImagePaths":146,"frontmatter":147,"imagePaths":148},[142],{"depth":82,"slug":143,"text":144},"time-to-test-the-application","Time to test the application",[],[],{"title":130,"description":131},[],"07_congrats",{"id":149,"data":151,"body":157,"filePath":158,"digest":159,"rendered":160},{"title":152,"description":153,"editUrl":16,"head":154,"template":33,"sidebar":155,"pagefind":16,"draft":23},"Congratulations!","What's next.",[],{"hidden":23,"attrs":156},{},"## You did it!\n\nYou now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\n\n\n## Create your own XR Blocks application with AI\n\nXR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\n\n## Export your application\n\nIf you'd like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\n\n```bash\nchmod +x export.sh && ./export.sh\n```\n\n## Stop your Codespace\n\nDon't forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your `Active` instance and click `Stop codespace`\n\n## What's Next?\n\n- Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\n- Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\n- Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\n- Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\n- Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage","src/content/docs/07_Congrats.md","ebc29bb1698c9e61",{"html":161,"metadata":162},"\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"you-did-it\">You did it!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#you-did-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “You did it!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"create-your-own-xr-blocks-application-with-ai\">Create your own XR Blocks application with AI\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#create-your-own-xr-blocks-application-with-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Create your own XR Blocks application with AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>XR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-your-application\">Export your application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-your-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Export your application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you’d like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame is-terminal not-content\">\u003Cfigcaption class=\"header\">\u003Cspan class=\"title\">\u003C/span>\u003Cspan class=\"sr-only\">Terminal window\u003C/span>\u003C/figcaption>\u003Cpre data-language=\"bash\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">chmod\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">+x\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">export.sh\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> && \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">./export.sh\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"chmod +x export.sh && ./export.sh\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"stop-your-codespace\">Stop your Codespace\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#stop-your-codespace\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Stop your Codespace”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Don’t forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">\u003C/a>\u003Ca href=\"https://github.com/codespaces\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your \u003Ccode dir=\"auto\">Active\u003C/code> instance and click \u003Ccode dir=\"auto\">Stop codespace\u003C/code>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"whats-next\">What’s Next?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#whats-next\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “What’s Next?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\u003C/li>\n\u003Cli>Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\u003C/li>\n\u003Cli>Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\u003C/li>\n\u003Cli>Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\u003C/li>\n\u003Cli>Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage\u003C/li>\n\u003C/ul>",{"headings":163,"localImagePaths":179,"remoteImagePaths":180,"frontmatter":181,"imagePaths":182},[164,167,170,173,176],{"depth":82,"slug":165,"text":166},"you-did-it","You did it!",{"depth":82,"slug":168,"text":169},"create-your-own-xr-blocks-application-with-ai","Create your own XR Blocks application with AI",{"depth":82,"slug":171,"text":172},"export-your-application","Export your application",{"depth":82,"slug":174,"text":175},"stop-your-codespace","Stop your Codespace",{"depth":82,"slug":177,"text":178},"whats-next","What’s Next?",[],[],{"title":152,"description":153},[]] \ No newline at end of file +[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","a30a942a2ceda2e1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[\"en\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,27,28,47,48,66,67,89,90,108,109,127,128,149,150],"index",{"id":11,"data":13,"filePath":25,"digest":26,"deferredRender":16},{"title":14,"description":15,"editUrl":16,"head":17,"template":18,"hero":19,"sidebar":22,"pagefind":16,"draft":23},"CreateHer Fest","Let's build some sample applications!",true,[],"splash",{"tagline":20,"actions":21},"DIALED IN! Answer calls in WebXR.",[],{"hidden":23,"attrs":24},false,{},"src/content/docs/index.mdx","5742d2bb91f1973b","02_setup_application",{"id":27,"data":29,"body":36,"filePath":37,"digest":38,"rendered":39},{"title":30,"description":31,"editUrl":16,"head":32,"template":33,"sidebar":34,"pagefind":16,"draft":23},"Setup Application","Create an application.",[],"doc",{"hidden":23,"attrs":35},{},"> Note: Please make sure to redeem the coupon code to your Vonage account's \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\n\nIn the terminal below, you should see a set up script running asking for your `API key`. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\n\n> Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\n\nIf successful, you should see `APPLICATION READY` with a URL. Click the link to open in a new window or tab.","src/content/docs/02_Setup_Application.md","41ac2dedeb3ab62b",{"html":40,"metadata":41},"\u003Cblockquote>\n\u003Cp>Note: Please make sure to redeem the coupon code to your Vonage account’s \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\u003C/p>\n\u003C/blockquote>\n\u003Cp>In the terminal below, you should see a set up script running asking for your \u003Ccode dir=\"auto\">API key\u003C/code>. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>If successful, you should see \u003Ccode dir=\"auto\">APPLICATION READY\u003C/code> with a URL. Click the link to open in a new window or tab.\u003C/p>",{"headings":42,"localImagePaths":43,"remoteImagePaths":44,"frontmatter":45,"imagePaths":46},[],[],[],{"title":30,"description":31},[],"01_create_account",{"id":47,"data":49,"body":55,"filePath":56,"digest":57,"rendered":58},{"title":50,"description":51,"editUrl":16,"head":52,"template":33,"sidebar":53,"pagefind":16,"draft":23},"Create an Account","Create a Vonage account.",[],{"hidden":23,"attrs":54},{},"First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\n\nHere's a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\n\n```html\nDIMFLCHF26\n```\n\n> Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.","src/content/docs/01_Create_Account.md","5828454718840d2d",{"html":59,"metadata":60},"\u003Cp>First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\u003C/p>\n\u003Cp>Here’s a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">DIMFLCHF26\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"DIMFLCHF26\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.\u003C/p>\n\u003C/blockquote>",{"headings":61,"localImagePaths":62,"remoteImagePaths":63,"frontmatter":64,"imagePaths":65},[],[],[],{"title":50,"description":51},[],"03_add_client_sdk",{"id":66,"data":68,"body":74,"filePath":75,"digest":76,"rendered":77},{"title":69,"description":70,"editUrl":16,"head":71,"template":33,"sidebar":72,"pagefind":16,"draft":23},"Add Client SDK","Add Vonage Client SDK to index.html",[],{"hidden":23,"attrs":73},{},"We'll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\n\nThe following code will be placed in the `pages/index.html` file.\n\nFirst, we will need to load the Vonage Client SDK from a CDN (`\u003C!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->`):\n```html\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\">\u003C/script>\n```\n\n> Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\n\n## That's it for the HTML!\n\nEverything else will be handled by XR Blocks.","src/content/docs/03_Add_Client_SDK.md","a37e767e9dc08641",{"html":78,"metadata":79},"\u003Cp>We’ll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">pages/index.html\u003C/code> file.\u003C/p>\n\u003Cp>First, we will need to load the Vonage Client SDK from a CDN (\u003Ccode dir=\"auto\"><!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->\u003C/code>):\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C5E478;--1:#3B61B0\">src\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"\u003Cscript src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js">\u003C/script>\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"thats-it-for-the-html\">That’s it for the HTML!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#thats-it-for-the-html\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “That’s it for the HTML!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Everything else will be handled by XR Blocks.\u003C/p>",{"headings":80,"localImagePaths":85,"remoteImagePaths":86,"frontmatter":87,"imagePaths":88},[81],{"depth":82,"slug":83,"text":84},2,"thats-it-for-the-html","That’s it for the HTML!",[],[],{"title":69,"description":70},[],"04_vonage_call_panel",{"id":89,"data":91,"body":97,"filePath":98,"digest":99,"rendered":100},{"title":92,"description":93,"editUrl":16,"head":94,"template":33,"sidebar":95,"pagefind":16,"draft":23},"Vonage Call Panel","Create XR Blocks UI to answer phone calls",[],{"hidden":23,"attrs":96},{},"Now, we'll be creating the UI.\n\nTo recieve phone calls via the Vonage Voice API using the XR Blocks library's \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\n\nTo show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\n\nThe Vonage Voice Client SDK's \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\n\nThe virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\n\nThe following code will be placed in the `static/VonageAudioCall.js` file.\n\nFirst, we will set the Quick Replies that the user can send into the call.\nFind `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code:\n\n```js\nconst QUICK_REPLIES = [\n { label: \"Meeting\", message: \"In a meeting, I'll call you back.\" },\n { label: \"Talk Later\", message: \"Can't talk right now. I'll talk later.\" },\n { label: \"OMW!\", message: \"On my way! Talk soon.\" },\n { label: \"5 Mins\", message: \"Call you back in 5 minutes.\" },\n];\n```\n\nLet's initiate the constructor for our panel with some variables:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n\n```js\nconstructor() {\n super();\n this.token = '';\n this.client = new vonageClientSDK.VonageClient();\n this.callId = null;\n // Keep a reference to the panel so we can destroy it later\n this.panel = null;\n this.statusText = null;\n this.userName = \"XR_User_1\";\n this.grid = null;\n this.controlRow = null;\n this.puppetHead = null;\n this.face = null;\n this.mouth = null;\n this._camWorld = new THREE.Vector3();\n this._headWorld = new THREE.Vector3();\n this.replyPanel = null;\n this.typedTextView = null;\n this._currentTypedText = '';\n this.keyboard = null;\n}\n```\n\nHere's the function to create an Avatar and add the MediaStream for the LipSync feature: `// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄`\n\n```js\n_createAvatar(stream) {\n // Safety: don't create a second avatar if one already exists\n if (this.puppetHead) return;\n\n console.log(\"Creating lipsync avatar...\");\n\n const faceR = 0.1;\n\n const head = new THREE.Group();\n // Position: in front of the user, roughly at face height\n head.position.set(0, xb.user.height, -1.2);\n\n // --- Sphere face mesh ---\n const faceGeom = new THREE.SphereGeometry(faceR, 32, 24);\n const faceMat = new THREE.MeshStandardMaterial({\n color: 0xf2d4b3,\n roughness: 0.6,\n metalness: 0.05,\n });\n const faceMesh = new THREE.Mesh(faceGeom, faceMat);\n head.add(faceMesh);\n\n this.face = new xb.StylizedFace({ showEyes: true });\n head.add(this.face);\n\n this.mouth = new LipsyncMouth(stream, { target: this.face });\n head.add(this.mouth);\n\n this.puppetHead = head;\n this.add(head);\n}\n```\n\nThis function will remove the 3D Avatar when the call is over:\n`// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄`\n\n```js\n_removeAvatar() {\n if (!this.puppetHead) return;\n\n console.log(\"Removing lipsync avatar...\");\n\n if (this.mouth) {\n // Detach from the head group before nulling the reference\n this.mouth.parent?.remove(this.mouth);\n this.mouth = null;\n }\n\n if (this.face) {\n this.face.parent?.remove(this.face);\n // dispose() frees the underlying canvas/texture to avoid memory leaks\n this.face.dispose();\n this.face = null;\n }\n\n this.remove(this.puppetHead);\n this.puppetHead = null;\n}\n```\n\nHere's the function to create the panel:\n`// ⌄⌄⌄ Create Call panel ⌄⌄⌄`\n\n```js\n_createCallPanel(callerName) {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Call UI...\");\n\n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' });\n this.panel.position.set(\n 0,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n\n this.add(this.panel);\n\n this.grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = this.grid.addRow({ weight: 0.7 }).addText({\n text: `Incoming call from ${callerName}...`,\n fontColor: '#ffffff',\n fontSize: 0.08,\n });\n\n this.updateControlRow('INCOMING');\n}\n```\n\nFunction to update the call control section:\n`// ⌄⌄⌄ Update Call controls ⌄⌄⌄`\n\n```js\nupdateControlRow(state) {\n if (!this.grid) return;\n\n // 1. Remove the existing row if it exists\n if (this.controlRow) {\n this.grid.remove(this.controlRow);\n this.controlRow = null;\n this.grid.resetLayout();\n }\n\n // 2. Create a fresh row. It will naturally append below the Status Text.\n // We give it the full remaining weight (0.3 relative to the panel, or flexible)\n this.controlRow = this.grid.addRow({ weight: 0.3 });\n\n if (state === 'INCOMING') {\n // --- ANSWER BUTTON ---\n const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call',\n fontSize: 0.5,\n backgroundColor: '#00ff00'\n });\n answerBtn.onTriggered = () => this._onAnswer();\n\n // --- REJECT BUTTON ---\n const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n rejectBtn.onTriggered = () => this._onReject();\n\n } else if (state === 'CONNECTED') {\n // --- HANGUP BUTTON ---\n // This is a fresh row, so layouts will calculate correctly\n const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n hangupBtn.onTriggered = () => this._onHangup();\n }\n\n // 3. Force layout update\n this.panel.updateLayouts();\n}\n```\n\nThis function will remove the panel once the call is over:\n`// ⌄⌄⌄ Remove Call panel ⌄⌄⌄`\n\n```js\n_removeCallPanel() {\n if (this.panel) {\n console.log(\"Destroying Call UI...\");\n this.remove(this.panel);\n this.panel = null;\n this.grid = null;\n this.statusText = null;\n this.controlRow = null;\n }\n this._removeReplyPanel();\n}\n```\n\nNow, let's add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\n\nHere's the code to show the Keyboard:\n`// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄`\n\n```js\n_showKeyboard() {\n if (this.keyboard) return;\n\n this.keyboard = new Keyboard();\n // Position it below and aligned with the reply panel\n this.keyboard.position.set(\n 0,\n xb.user.height - 1.35,\n -xb.user.objectDistance + 1\n );\n this.add(this.keyboard);\n\n // Update the display on every keystroke\n this.keyboard.onTextChanged = (text) => {\n this._currentTypedText = text;\n if (this.typedTextView) {\n this.typedTextView.text = text.length > 0 ? text : 'Tap to type...';\n }\n };\n\n // Enter key sends immediately — same as tapping the Send button\n this.keyboard.onEnterPressed = (text) => {\n this._sendTypedText();\n };\n}\n```\n\nIf we want to hide the Keyboard, here's the code:\n`// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄`\n\n```js\n_hideKeyboard() {\n if (!this.keyboard) return;\n this.remove(this.keyboard);\n this.keyboard = null;\n}\n```\n\nTo toggle between showing and hidding the keyboard, we have this code:\n`// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄`\n\n```js\n_toggleKeyboard() {\n this.keyboard ? this._hideKeyboard() : this._showKeyboard();\n}\n```\n\nLet's create the functions that will send the text to be said into the call just in case we can't talk at that moment.\n\nTo send the Quick Replies that we set before:\n`// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄`\n\n```js\n_sendQuickReply(message) {\n if (!this.callId) return;\n console.log(`Sending quick reply: \"${message}\"`);\n\n // Give the user immediate visual feedback in the status bar\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, message)\n .then(() => {\n console.log('Quick reply sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${message}\"`;\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nIn the case we want to carry on the conversation but maybe can't speak (ie in a public space), we can send custom text:\n`// ⌄⌄⌄ Send Custom Text ⌄⌄⌄`\n\n```js\n_sendTypedText() {\n const text = this._currentTypedText.trim();\n if (!text) return;\n if (!this.callId) return;\n\n console.log(`Sending typed text: \"${text}\"`);\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, text)\n .then(() => {\n console.log('Typed text sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${text}\"`;\n\n // Clear the keyboard buffer and reset the display\n if (this.keyboard) this.keyboard.setText('');\n this._currentTypedText = '';\n if (this.typedTextView) this.typedTextView.text = 'Tap to type...';\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nHere we will create the Reply panel that will hold all the way we can send a text message into the call:\n`// ⌄⌄⌄ Create Reply panel ⌄⌄⌄`\n\n```js\n_createReplyPanel() {\n if (this.replyPanel) return;\n\n this.replyPanel = new xb.SpatialPanel({\n backgroundColor: '#1a1a2ecc',\n width: .75,\n height: 0.9,\n });\n // Offset to the right so it sits beside the main call panel\n this.replyPanel.position.set(\n 0.8,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n this.add(this.replyPanel);\n\n const grid = this.replyPanel.addGrid();\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Quick Replies',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n const pairs = [\n QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ]\n QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ]\n ];\n\n pairs.forEach(pair => {\n const row = grid.addRow({ weight: 0.20 });\n pair.forEach(({ label, message }) => {\n const btn = row.addCol({ weight: 0.5 }).addTextButton({\n text: label,\n fontSize: 0.35,\n backgroundColor: '#2e2e50',\n fontColor: '#ffffff',\n });\n btn.onTriggered = () => this._sendQuickReply(message);\n });\n });\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Talk via Text',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n this.typedTextView = grid.addRow({ weight: 0.18 }).addText({\n text: 'Tap to type...',\n fontColor: '#ffffff',\n fontSize: 0.065,\n textAlign: 'left',\n });\n\n const actionRow = grid.addRow({ weight: 0.30 });\n\n const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'keyboard',\n fontSize: 0.5,\n backgroundColor: '#2e3a4a',\n });\n kbBtn.onTriggered = () => this._toggleKeyboard();\n\n const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'send',\n fontSize: 0.5,\n backgroundColor: '#1a4a2a',\n });\n sendBtn.onTriggered = () => this._sendTypedText();\n\n this.replyPanel.updateLayouts();\n}\n```\n\nJust like with the Call panel, we will have a function to remove the Reply panel:\n`// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄`\n\n```js\n_removeReplyPanel() {\n this._hideKeyboard();\n if (this.replyPanel) {\n this.remove(this.replyPanel);\n this.replyPanel = null;\n this.typedTextView = null;\n }\n this._currentTypedText = '';\n}\n```\n\nThis function answers the call and updates the status and call control section:\n`// ⌄⌄⌄ Answer call method ⌄⌄⌄`\n\n```js\n_onAnswer() {\n console.log('Answering...');\n this.client.answer(this.callId)\n .then(() => {\n console.log(\"Success answering call.\");\n this.statusText.text = `Call answered.`;\n this.updateControlRow('CONNECTED');\n\n // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\n this._createReplyPanel();\n\n // get media stream\n const audioElement = this.client.getAudioOutputElement();\n if (audioElement && audioElement.srcObject) {\n // This is the active WebRTC MediaStream managed by Vonage\n const remoteStream = audioElement.srcObject;\n console.log('remoteStream: ', remoteStream);\n\n // Example: Grab individual audio tracks from the stream\n const audioTracks = remoteStream.getAudioTracks();\n console.log(\"Active Audio Tracks:\", audioTracks);\n\n // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\n this._createAvatar(remoteStream);\n }\n })\n .catch(error => {\n console.error(\"Error answering call: \", error);\n });\n}\n```\n\nThis function will reject the incoming call and remove the panel:\n`// ⌄⌄⌄ Reject call method ⌄⌄⌄`\n\n```js\n_onReject() {\n console.log('Rejecting...');\n this.client.reject(this.callId)\n .then(() => {\n console.log(\"Success rejecting call.\");\n })\n .catch(error => {\n console.error(\"Error rejecting call: \", error);\n });\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nThis function will hang up the ongoing call and remove the panel:\n`// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ `\n\n```js\n_onHangup() {\n console.log('Hanging up...');\n this.client.hangup(this.callId)\n .then(() => {\n console.log(\"Success hanging up call.\");\n })\n .catch(error => {\n console.error(\"Error hanging up call: \", error);\n });\n // We manually destroy the panel here too, just in case the event lags\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nSet up some listeners for the events that the Vonage Client SDK will emit and what to do:\n`// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄`\n\n```js\nsetupVonageListeners() {\n // --- CREATE UI ON INVITE ---\n this.client.on('callInvite', (callId, from, channelType) => {\n this.callId = callId;\n const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, \"*\")\n console.log(`Incoming call from ${maskedNumber}`);\n\n // Trigger the UI creation here\n this._createCallPanel(maskedNumber);\n });\n\n this.client.on('legStatusUpdate', (callId, legId, status) => {\n console.log(\"status: \", status);\n if (this.statusText) {\n this.statusText.text = `Status: ${status}`;\n }\n });\n\n // --- REMOVE UI ON CANCEL/HANGUP ---\n this.client.on('callInviteCancel', (callId) => {\n console.log(`Call cancelled: ${callId}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n\n this.client.on(\"callHangup\", (callId, callQuality, reason) => {\n console.log(`Call hung up: ${reason}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n}\n```\n\nGet a token from the server so you can connect to a session:\n`// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ `\n\n```js\nasync connectToVonage(name) {\n try {\n console.log(`Fetching token for ${name}...`);\n\n // 1. Fetch the token (AWAIT the result)\n const response = await fetch(`/token?name=${name}`);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n this.token = data.token;\n console.log(\"Fetched token successfully.\");\n\n // 2. Create the Session (AWAIT the result)\n const sessionId = await this.client.createSession(this.token);\n\n console.log(\"Session created successfully. Session ID:\", sessionId);\n\n // 3. Update UI\n // Instead, update your XR Panel text to show we are ready\n if(this.statusText) {\n this.statusText.text = \"Connected. Waiting for calls...\";\n }\n\n } catch (error) {\n console.error(\"Connection failed:\", error);\n if(this.statusText) this.statusText.text = \"Connection Failed.\";\n }\n}\n```\n\nInitialize the Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n\n```js\ninit() {\n console.log(\"Vonage init!\",this.client);\n this.setupVonageListeners();\n this.connectToVonage(this.userName);\n}\n```","src/content/docs/04_Vonage_Call_Panel.md","e828a2221c12996d",{"html":101,"metadata":102},"\u003Cp>Now, we’ll be creating the UI.\u003C/p>\n\u003Cp>To recieve phone calls via the Vonage Voice API using the XR Blocks library’s \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\u003C/p>\n\u003Cp>To show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The Vonage Voice Client SDK’s \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\u003C/p>\n\u003Cp>The virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/VonageAudioCall.js\u003C/code> file.\u003C/p>\n\u003Cp>First, we will set the Quick Replies that the user can send into the call.\nFind \u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄\u003C/code> and add this code:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Meeting\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">In a meeting, I'll call you back.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk Later\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Can't talk right now. I'll talk later.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">OMW!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">On my way! Talk soon.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">5 Mins\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Call you back in 5 minutes.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"const QUICK_REPLIES = [ { label: "Meeting", message: "In a meeting, I'll call you back." }, { label: "Talk Later", message: "Can't talk right now. I'll talk later." }, { label: "OMW!", message: "On my way! Talk soon." }, { label: "5 Mins", message: "Call you back in 5 minutes." },];\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s initiate the constructor for our panel with some variables:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">vonageClientSDK\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageClient\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">XR_User_1\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_camWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_headWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"constructor() { super(); this.token = ''; this.client = new vonageClientSDK.VonageClient(); this.callId = null; // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.userName = "XR_User_1"; this.grid = null; this.controlRow = null; this.puppetHead = null; this.face = null; this.mouth = null; this._camWorld = new THREE.Vector3(); this._headWorld = new THREE.Vector3(); this.replyPanel = null; this.typedTextView = null; this._currentTypedText = ''; this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create an Avatar and add the MediaStream for the LipSync feature: \u003Ccode dir=\"auto\">// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Safety: don't create a second avatar if one already exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceR\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Group\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position: in front of the user, roughly at face height\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- Sphere face mesh ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceGeom\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SphereGeometry\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceR\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">32\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">24\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMat\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">MeshStandardMaterial\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">color: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0xf2d4b3\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">roughness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.6\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">metalness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.05\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Mesh\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceGeom\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">faceMat\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">StylizedFace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ showEyes: \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">true\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">LipsyncMouth\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, { target: \u003C/span>\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createAvatar(stream) { // Safety: don't create a second avatar if one already exists if (this.puppetHead) return; console.log("Creating lipsync avatar..."); const faceR = 0.1; const head = new THREE.Group(); // Position: in front of the user, roughly at face height head.position.set(0, xb.user.height, -1.2); // --- Sphere face mesh --- const faceGeom = new THREE.SphereGeometry(faceR, 32, 24); const faceMat = new THREE.MeshStandardMaterial({ color: 0xf2d4b3, roughness: 0.6, metalness: 0.05, }); const faceMesh = new THREE.Mesh(faceGeom, faceMat); head.add(faceMesh); this.face = new xb.StylizedFace({ showEyes: true }); head.add(this.face); this.mouth = new LipsyncMouth(stream, { target: this.face }); head.add(this.mouth); this.puppetHead = head; this.add(head);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the 3D Avatar when the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Removing lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Detach from the head group before nulling the reference\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">mouth\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// dispose() frees the underlying canvas/texture to avoid memory leaks\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">dispose\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeAvatar() { if (!this.puppetHead) return; console.log("Removing lipsync avatar..."); if (this.mouth) { // Detach from the head group before nulling the reference this.mouth.parent?.remove(this.mouth); this.mouth = null; } if (this.face) { this.face.parent?.remove(this.face); // dispose() frees the underlying canvas/texture to avoid memory leaks this.face.dispose(); this.face = null; } this.remove(this.puppetHead); this.puppetHead = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callerName\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.7\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callerName\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.08\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createCallPanel(callerName) { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Call UI..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.panel); this.grid = this.panel.addGrid(); // 2. Status Text this.statusText = this.grid.addRow({ weight: 0.7 }).addText({ text: `Incoming call from ${callerName}...`, fontColor: '#ffffff', fontSize: 0.08, }); this.updateControlRow('INCOMING');}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to update the call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Update Call controls ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Remove the existing row if it exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">resetLayout\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create a fresh row. It will naturally append below the Status Text.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We give it the full remaining weight (0.3 relative to the panel, or flexible)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- ANSWER BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#00ff00\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REJECT BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">else\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- HANGUP BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is a fresh row, so layouts will calculate correctly\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Force layout update\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"updateControlRow(state) { if (!this.grid) return; // 1. Remove the existing row if it exists if (this.controlRow) { this.grid.remove(this.controlRow); this.controlRow = null; this.grid.resetLayout(); } // 2. Create a fresh row. It will naturally append below the Status Text. // We give it the full remaining weight (0.3 relative to the panel, or flexible) this.controlRow = this.grid.addRow({ weight: 0.3 }); if (state === 'INCOMING') { // --- ANSWER BUTTON --- const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call', fontSize: 0.5, backgroundColor: '#00ff00' }); answerBtn.onTriggered = () => this._onAnswer(); // --- REJECT BUTTON --- const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); rejectBtn.onTriggered = () => this._onReject(); } else if (state === 'CONNECTED') { // --- HANGUP BUTTON --- // This is a fresh row, so layouts will calculate correctly const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); hangupBtn.onTriggered = () => this._onHangup(); } // 3. Force layout update this.panel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the panel once the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Destroying Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeCallPanel() { if (this.panel) { console.log("Destroying Call UI..."); this.remove(this.panel); this.panel = null; this.grid = null; this.statusText = null; this.controlRow = null; } this._removeReplyPanel();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Now, let’s add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\u003C/p>\n\u003Cp>Here’s the code to show the Keyboard:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position it below and aligned with the reply panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.35\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">+\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Update the display on every keystroke\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTextChanged\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">length\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Enter key sends immediately — same as tapping the Send button\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onEnterPressed\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_showKeyboard() { if (this.keyboard) return; this.keyboard = new Keyboard(); // Position it below and aligned with the reply panel this.keyboard.position.set( 0, xb.user.height - 1.35, -xb.user.objectDistance + 1 ); this.add(this.keyboard); // Update the display on every keystroke this.keyboard.onTextChanged = (text) => { this._currentTypedText = text; if (this.typedTextView) { this.typedTextView.text = text.length > 0 ? text : 'Tap to type...'; } }; // Enter key sends immediately — same as tapping the Send button this.keyboard.onEnterPressed = (text) => { this._sendTypedText(); };}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>If we want to hide the Keyboard, here’s the code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_hideKeyboard() { if (!this.keyboard) return; this.remove(this.keyboard); this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>To toggle between showing and hidding the keyboard, we have this code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_toggleKeyboard() { this.keyboard ? this._hideKeyboard() : this._showKeyboard();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s create the functions that will send the text to be said into the call just in case we can’t talk at that moment.\u003C/p>\n\u003Cp>To send the Quick Replies that we set before:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending quick reply: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Give the user immediate visual feedback in the status bar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick reply sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendQuickReply(message) { if (!this.callId) return; console.log(`Sending quick reply: "${message}"`); // Give the user immediate visual feedback in the status bar if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, message) .then(() => { console.log('Quick reply sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${message}"`; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>In the case we want to carry on the conversation but maybe can’t speak (ie in a public space), we can send custom text:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Custom Text ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">trim\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending typed text: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Typed text sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Clear the keyboard buffer and reset the display\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendTypedText() { const text = this._currentTypedText.trim(); if (!text) return; if (!this.callId) return; console.log(`Sending typed text: "${text}"`); if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, text) .then(() => { console.log('Typed text sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${text}"`; // Clear the keyboard buffer and reset the display if (this.keyboard) this.keyboard.setText(''); this._currentTypedText = ''; if (this.typedTextView) this.typedTextView.text = 'Tap to type...'; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here we will create the Reply panel that will hold all the way we can send a text message into the call:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a1a2ecc\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.75\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.9\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Offset to the right so it sits beside the main call panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.8\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick Replies\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ Meeting, Talk Later ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ OMW!, 5 Mins ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">pair\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.20\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pair\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">{ \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">label\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> }\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addTextButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">label\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.35\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e2e50\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk via Text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.18\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.065\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">textAlign: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">left\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.30\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">keyboard\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e3a4a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">send\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a4a2a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createReplyPanel() { if (this.replyPanel) return; this.replyPanel = new xb.SpatialPanel({ backgroundColor: '#1a1a2ecc', width: .75, height: 0.9, }); // Offset to the right so it sits beside the main call panel this.replyPanel.position.set( 0.8, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.replyPanel); const grid = this.replyPanel.addGrid(); grid.addRow({ weight: 0.06 }).addText({ text: 'Quick Replies', fontColor: '#9b9bff', fontSize: 0.055, }); const pairs = [ QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ] QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ] ]; pairs.forEach(pair => { const row = grid.addRow({ weight: 0.20 }); pair.forEach(({ label, message }) => { const btn = row.addCol({ weight: 0.5 }).addTextButton({ text: label, fontSize: 0.35, backgroundColor: '#2e2e50', fontColor: '#ffffff', }); btn.onTriggered = () => this._sendQuickReply(message); }); }); grid.addRow({ weight: 0.06 }).addText({ text: 'Talk via Text', fontColor: '#9b9bff', fontSize: 0.055, }); this.typedTextView = grid.addRow({ weight: 0.18 }).addText({ text: 'Tap to type...', fontColor: '#ffffff', fontSize: 0.065, textAlign: 'left', }); const actionRow = grid.addRow({ weight: 0.30 }); const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'keyboard', fontSize: 0.5, backgroundColor: '#2e3a4a', }); kbBtn.onTriggered = () => this._toggleKeyboard(); const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'send', fontSize: 0.5, backgroundColor: '#1a4a2a', }); sendBtn.onTriggered = () => this._sendTypedText(); this.replyPanel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Just like with the Call panel, we will have a function to remove the Reply panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeReplyPanel() { this._hideKeyboard(); if (this.replyPanel) { this.remove(this.replyPanel); this.replyPanel = null; this.typedTextView = null; } this._currentTypedText = '';}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function answers the call and updates the status and call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Answer call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Answering...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success answering call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call answered.\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// get media stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioOutputElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">&&\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is the active WebRTC MediaStream managed by Vonage\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">remoteStream: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Example: Grab individual audio tracks from the stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Active Audio Tracks:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error answering call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onAnswer() { console.log('Answering...'); this.client.answer(this.callId) .then(() => { console.log("Success answering call."); this.statusText.text = `Call answered.`; this.updateControlRow('CONNECTED'); // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄ this._createReplyPanel(); // get media stream const audioElement = this.client.getAudioOutputElement(); if (audioElement && audioElement.srcObject) { // This is the active WebRTC MediaStream managed by Vonage const remoteStream = audioElement.srcObject; console.log('remoteStream: ', remoteStream); // Example: Grab individual audio tracks from the stream const audioTracks = remoteStream.getAudioTracks(); console.log("Active Audio Tracks:", audioTracks); // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄ this._createAvatar(remoteStream); } }) .catch(error => { console.error("Error answering call: ", error); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will reject the incoming call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Reject call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Rejecting...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">reject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success rejecting call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error rejecting call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onReject() { console.log('Rejecting...'); this.client.reject(this.callId) .then(() => { console.log("Success rejecting call."); }) .catch(error => { console.error("Error rejecting call: ", error); }); this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will hang up the ongoing call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Hanging up...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success hanging up call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error hanging up call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We manually destroy the panel here too, just in case the event lags\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onHangup() { console.log('Hanging up...'); this.client.hangup(this.callId) .then(() => { console.log("Success hanging up call."); }) .catch(error => { console.error("Error hanging up call: ", error); }); // We manually destroy the panel here too, just in case the event lags this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Set up some listeners for the events that the Vonage Client SDK will emit and what to do:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- CREATE UI ON INVITE ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInvite\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">channelType\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">from\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">replace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">(?=(?:\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\D\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">*\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">{4}\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">g\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">*\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Trigger the UI creation here\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">legStatusUpdate\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">legId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">status: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REMOVE UI ON CANCEL/HANGUP ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInviteCancel\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call cancelled: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callHangup\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callQuality\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">reason\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call hung up: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">reason\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"setupVonageListeners() { // --- CREATE UI ON INVITE --- this.client.on('callInvite', (callId, from, channelType) => { this.callId = callId; const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, "*") console.log(`Incoming call from ${maskedNumber}`); // Trigger the UI creation here this._createCallPanel(maskedNumber); }); this.client.on('legStatusUpdate', (callId, legId, status) => { console.log("status: ", status); if (this.statusText) { this.statusText.text = `Status: ${status}`; } }); // --- REMOVE UI ON CANCEL/HANGUP --- this.client.on('callInviteCancel', (callId) => { console.log(`Call cancelled: ${callId}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); }); this.client.on("callHangup", (callId, callQuality, reason) => { console.log(`Call hung up: ${reason}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Get a token from the server so you can connect to a session:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">async\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">name\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">try\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Fetching token for \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Fetch the token (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">fetch\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">/token?name=\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">ok\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">throw\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">HTTP error! status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">json\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Fetched token successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create the Session (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sessionId\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createSession\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Session created successfully. Session ID:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">sessionId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Update UI\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Instead, update your XR Panel text to show we are ready\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connected. Waiting for calls...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection failed:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection Failed.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"async connectToVonage(name) { try { console.log(`Fetching token for ${name}...`); // 1. Fetch the token (AWAIT the result) const response = await fetch(`/token?name=${name}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); this.token = data.token; console.log("Fetched token successfully."); // 2. Create the Session (AWAIT the result) const sessionId = await this.client.createSession(this.token); console.log("Session created successfully. Session ID:", sessionId); // 3. Update UI // Instead, update your XR Panel text to show we are ready if(this.statusText) { this.statusText.text = "Connected. Waiting for calls..."; } } catch (error) { console.error("Connection failed:", error); if(this.statusText) this.statusText.text = "Connection Failed."; }}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize the Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Vonage init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"init() { console.log("Vonage init!",this.client); this.setupVonageListeners(); this.connectToVonage(this.userName);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":103,"localImagePaths":104,"remoteImagePaths":105,"frontmatter":106,"imagePaths":107},[],[],[],{"title":92,"description":93},[],"05_exit_button",{"id":108,"data":110,"body":116,"filePath":117,"digest":118,"rendered":119},{"title":111,"description":112,"editUrl":16,"head":113,"template":33,"sidebar":114,"pagefind":16,"draft":23},"Exiting WebXR application","Button to exit WebXR application",[],{"hidden":23,"attrs":115},{},"When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\n\nThe following code will be placed in the `static/ExitButton.js` file.\n\nCreate the constructor for the Class:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n```js\n constructor() {\n super();\n // Keep a reference to the panel so we can destroy it later\n this.panel = null; \n this.statusText = null;\n this.exitPanelText = \"Exit Demo\";\n }\n```\n\nFunction to create a panel for the Exit Button:\n`// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄`\n```js\n createExitPanel() {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Exit Button...\");\n \n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({\n width: 0.5,\n height: 0.5, \n backgroundColor: '#2b2b2baa'\n });\n\n this.panel.position.set(\n 0,\n xb.user.height,\n 2.0\n );\n\n this.panel.rotation.set(0, Math.PI, 0);\n this.add(this.panel);\n\n const grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = grid.addRow({ weight: 1 }).addText({\n text: this.exitPanelText,\n fontColor: '#ffffff',\n fontSize: .4,\n });\n\n // Orbiter\n const orbiter = grid.addOrbiter();\n orbiter.addExitButton();\n this.panel.updateLayouts();\n }\n```\n\nInitialize Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n```js\n init() {\n console.log(\"Exit Button init!\");\n this.createExitPanel();\n }\n```","src/content/docs/05_Exit_Button.md","ca1a48912fc826e3",{"html":120,"metadata":121},"\u003Cp>When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/ExitButton.js\u003C/code> file.\u003C/p>\n\u003Cp>Create the constructor for the Class:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Demo\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" constructor() { super(); // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.exitPanelText = "Exit Demo"; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to create a panel for the Exit Button:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Exit Button...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2.0\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">rotation\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">Math\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">PI\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Orbiter\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addOrbiter\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addExitButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" createExitPanel() { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Exit Button..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ width: 0.5, height: 0.5, backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height, 2.0 ); this.panel.rotation.set(0, Math.PI, 0); this.add(this.panel); const grid = this.panel.addGrid(); // 2. Status Text this.statusText = grid.addRow({ weight: 1 }).addText({ text: this.exitPanelText, fontColor: '#ffffff', fontSize: .4, }); // Orbiter const orbiter = grid.addOrbiter(); orbiter.addExitButton(); this.panel.updateLayouts(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Button init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" init() { console.log("Exit Button init!"); this.createExitPanel(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"title":111,"description":112},[],"06_add_to_xr_blocks",{"id":127,"data":129,"body":135,"filePath":136,"digest":137,"rendered":138},{"title":130,"description":131,"editUrl":16,"head":132,"template":33,"sidebar":133,"pagefind":16,"draft":23},"Add panels to XR Blocks","adding panels to WebXR application",[],{"hidden":23,"attrs":134},{},"Let's add the 2 panels to the application.\n\nThe following code will be placed in the `static/main.js` file.\n\nFirst, import the Panels:\n`// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nimport { VonageAudioCall } from './VonageAudioCall.js';\nimport { ExitPanel } from './ExitButton.js';\n```\n\nCreate instances and add to the application:\n`// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nxb.add(new VonageAudioCall());\nxb.add(new ExitPanel());\n```\n\n## Time to test the application\nRefresh the application and try to call the phone number that was purchased and assigned while running the setup script.\n\n> Note: You can find the phone number connected to your Vonage application in the `.env` file.","src/content/docs/06_Add_To_XR_Blocks.md","48e51c4493e772dc",{"html":139,"metadata":140},"\u003Cp>Let’s add the 2 panels to the application.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/main.js\u003C/code> file.\u003C/p>\n\u003Cp>First, import the Panels:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { VonageAudioCall } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./VonageAudioCall.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { ExitPanel } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./ExitButton.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"import { VonageAudioCall } from './VonageAudioCall.js';import { ExitPanel } from './ExitButton.js';\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Create instances and add to the application:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageAudioCall\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">ExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"xb.add(new VonageAudioCall());xb.add(new ExitPanel());\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"time-to-test-the-application\">Time to test the application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#time-to-test-the-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Time to test the application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Refresh the application and try to call the phone number that was purchased and assigned while running the setup script.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can find the phone number connected to your Vonage application in the \u003Ccode dir=\"auto\">.env\u003C/code> file.\u003C/p>\n\u003C/blockquote>",{"headings":141,"localImagePaths":145,"remoteImagePaths":146,"frontmatter":147,"imagePaths":148},[142],{"depth":82,"slug":143,"text":144},"time-to-test-the-application","Time to test the application",[],[],{"title":130,"description":131},[],"07_congrats",{"id":149,"data":151,"body":157,"filePath":158,"digest":159,"rendered":160},{"title":152,"description":153,"editUrl":16,"head":154,"template":33,"sidebar":155,"pagefind":16,"draft":23},"Congratulations!","What's next.",[],{"hidden":23,"attrs":156},{},"## You did it!\n\nYou now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\n\n\n## Create your own XR Blocks application with AI\n\nXR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\n\n## Export your application\n\nIf you'd like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\n\n```bash\nchmod +x export.sh && ./export.sh\n```\n\n## Stop your Codespace\n\nDon't forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your `Active` instance and click `Stop codespace`\n\n## What's Next?\n\n- Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\n- Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\n- Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\n- Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\n- Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage","src/content/docs/07_Congrats.md","ebc29bb1698c9e61",{"html":161,"metadata":162},"\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"you-did-it\">You did it!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#you-did-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “You did it!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"create-your-own-xr-blocks-application-with-ai\">Create your own XR Blocks application with AI\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#create-your-own-xr-blocks-application-with-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Create your own XR Blocks application with AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>XR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-your-application\">Export your application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-your-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Export your application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you’d like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame is-terminal not-content\">\u003Cfigcaption class=\"header\">\u003Cspan class=\"title\">\u003C/span>\u003Cspan class=\"sr-only\">Terminal window\u003C/span>\u003C/figcaption>\u003Cpre data-language=\"bash\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">chmod\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">+x\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">export.sh\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> && \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">./export.sh\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"chmod +x export.sh && ./export.sh\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"stop-your-codespace\">Stop your Codespace\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#stop-your-codespace\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Stop your Codespace”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Don’t forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">\u003C/a>\u003Ca href=\"https://github.com/codespaces\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your \u003Ccode dir=\"auto\">Active\u003C/code> instance and click \u003Ccode dir=\"auto\">Stop codespace\u003C/code>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"whats-next\">What’s Next?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#whats-next\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “What’s Next?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\u003C/li>\n\u003Cli>Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\u003C/li>\n\u003Cli>Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\u003C/li>\n\u003Cli>Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\u003C/li>\n\u003Cli>Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage\u003C/li>\n\u003C/ul>",{"headings":163,"localImagePaths":179,"remoteImagePaths":180,"frontmatter":181,"imagePaths":182},[164,167,170,173,176],{"depth":82,"slug":165,"text":166},"you-did-it","You did it!",{"depth":82,"slug":168,"text":169},"create-your-own-xr-blocks-application-with-ai","Create your own XR Blocks application with AI",{"depth":82,"slug":171,"text":172},"export-your-application","Export your application",{"depth":82,"slug":174,"text":175},"stop-your-codespace","Stop your Codespace",{"depth":82,"slug":177,"text":178},"whats-next","What’s Next?",[],[],{"title":152,"description":153},[]] \ No newline at end of file diff --git a/sources/webxr-javascript-workshop/project/static/background-splat.webp b/sources/webxr-javascript-workshop/project/static/background-splat.webp deleted file mode 100644 index af0bbfe98f888e2007321ade1a9d3ec4cb47a164..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 129434 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

Io+@PT(c(n(fe?8V@?x$D0t>Ysu2e*wpV2?%S%g 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 Blocks that can answer phone calls. -The following code will be placed in the `index.html` file. +The following code will be placed in the `pages/index.html` file. First, we will need to load the Vonage Client SDK from a CDN (``): ```html diff --git a/sources/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md b/sources/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md index b32e40c8..75afecd5 100644 --- a/sources/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md +++ b/sources/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md @@ -13,7 +13,7 @@ The Vonage Voice Client SDK's Virtual Keyboard (Addon). -The following code will be placed in the `VonageAudioCall.js` file. +The following code will be placed in the `static/VonageAudioCall.js` file. First, we will set the Quick Replies that the user can send into the call. Find `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code: diff --git a/sources/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md b/sources/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md index 7bb5d055..71c32d52 100644 --- a/sources/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md +++ b/sources/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md @@ -5,7 +5,7 @@ description: Button to exit WebXR application When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel. -The following code will be placed in the `ExitButton.js` file. +The following code will be placed in the `static/ExitButton.js` file. Create the constructor for the Class: `// ⌄⌄⌄ Create constructor ⌄⌄⌄` diff --git a/sources/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md b/sources/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md index feaa2c20..cbdb2451 100644 --- a/sources/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md +++ b/sources/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md @@ -5,7 +5,7 @@ description: adding panels to WebXR application Let's add the 2 panels to the application. -The following code will be placed in the `main.js` file. +The following code will be placed in the `static/main.js` file. First, import the Panels: `// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄` diff --git a/sources/webxr-javascript-workshop/tutorial-config.json b/sources/webxr-javascript-workshop/tutorial-config.json index 0635cfc4..39d76aac 100644 --- a/sources/webxr-javascript-workshop/tutorial-config.json +++ b/sources/webxr-javascript-workshop/tutorial-config.json @@ -22,7 +22,7 @@ "project/static/ExitButton.js" ], "capabilities": [], - "version": "0.0.12", + "version": "0.0.13", "customInstallCmd": "", "customSetupCmd": "", "filename": "webxr-javascript-workshop" diff --git a/tutorials/webxr-javascript-workshop/.astro/data-store.json b/tutorials/webxr-javascript-workshop/.astro/data-store.json index ff0f47dd..7375ff83 100644 --- a/tutorials/webxr-javascript-workshop/.astro/data-store.json +++ b/tutorials/webxr-javascript-workshop/.astro/data-store.json @@ -1 +1 @@ -[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","a30a942a2ceda2e1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[\"en\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,27,28,47,48,66,67,89,90,108,109,127,128,149,150],"index",{"id":11,"data":13,"filePath":25,"digest":26,"deferredRender":16},{"title":14,"description":15,"editUrl":16,"head":17,"template":18,"hero":19,"sidebar":22,"pagefind":16,"draft":23},"CreateHer Fest","Let's build some sample applications!",true,[],"splash",{"tagline":20,"actions":21},"DIALED IN! Answer calls in WebXR.",[],{"hidden":23,"attrs":24},false,{},"src/content/docs/index.mdx","5742d2bb91f1973b","02_setup_application",{"id":27,"data":29,"body":36,"filePath":37,"digest":38,"rendered":39},{"title":30,"description":31,"editUrl":16,"head":32,"template":33,"sidebar":34,"pagefind":16,"draft":23},"Setup Application","Create an application.",[],"doc",{"hidden":23,"attrs":35},{},"> Note: Please make sure to redeem the coupon code to your Vonage account's \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\n\nIn the terminal below, you should see a set up script running asking for your `API key`. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\n\n> Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\n\nIf successful, you should see `APPLICATION READY` with a URL. Click the link to open in a new window or tab.","src/content/docs/02_Setup_Application.md","41ac2dedeb3ab62b",{"html":40,"metadata":41},"\u003Cblockquote>\n\u003Cp>Note: Please make sure to redeem the coupon code to your Vonage account’s \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\u003C/p>\n\u003C/blockquote>\n\u003Cp>In the terminal below, you should see a set up script running asking for your \u003Ccode dir=\"auto\">API key\u003C/code>. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>If successful, you should see \u003Ccode dir=\"auto\">APPLICATION READY\u003C/code> with a URL. Click the link to open in a new window or tab.\u003C/p>",{"headings":42,"localImagePaths":43,"remoteImagePaths":44,"frontmatter":45,"imagePaths":46},[],[],[],{"title":30,"description":31},[],"01_create_account",{"id":47,"data":49,"body":55,"filePath":56,"digest":57,"rendered":58},{"title":50,"description":51,"editUrl":16,"head":52,"template":33,"sidebar":53,"pagefind":16,"draft":23},"Create an Account","Create a Vonage account.",[],{"hidden":23,"attrs":54},{},"First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\n\nHere's a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\n\n```html\nDIMFLCHF26\n```\n\n> Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.","src/content/docs/01_Create_Account.md","5828454718840d2d",{"html":59,"metadata":60},"\u003Cp>First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\u003C/p>\n\u003Cp>Here’s a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">DIMFLCHF26\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"DIMFLCHF26\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.\u003C/p>\n\u003C/blockquote>",{"headings":61,"localImagePaths":62,"remoteImagePaths":63,"frontmatter":64,"imagePaths":65},[],[],[],{"title":50,"description":51},[],"03_add_client_sdk",{"id":66,"data":68,"body":74,"filePath":75,"digest":76,"rendered":77},{"title":69,"description":70,"editUrl":16,"head":71,"template":33,"sidebar":72,"pagefind":16,"draft":23},"Add Client SDK","Add Vonage Client SDK to index.html",[],{"hidden":23,"attrs":73},{},"We'll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\n\nThe following code will be placed in the `index.html` file.\n\nFirst, we will need to load the Vonage Client SDK from a CDN (`\u003C!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->`):\n```html\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\">\u003C/script>\n```\n\n> Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\n\n## That's it for the HTML!\n\nEverything else will be handled by XR Blocks.","src/content/docs/03_Add_Client_SDK.md","77c79f191f661eb3",{"html":78,"metadata":79},"\u003Cp>We’ll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">index.html\u003C/code> file.\u003C/p>\n\u003Cp>First, we will need to load the Vonage Client SDK from a CDN (\u003Ccode dir=\"auto\"><!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->\u003C/code>):\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C5E478;--1:#3B61B0\">src\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"\u003Cscript src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js">\u003C/script>\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"thats-it-for-the-html\">That’s it for the HTML!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#thats-it-for-the-html\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “That’s it for the HTML!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Everything else will be handled by XR Blocks.\u003C/p>",{"headings":80,"localImagePaths":85,"remoteImagePaths":86,"frontmatter":87,"imagePaths":88},[81],{"depth":82,"slug":83,"text":84},2,"thats-it-for-the-html","That’s it for the HTML!",[],[],{"title":69,"description":70},[],"04_vonage_call_panel",{"id":89,"data":91,"body":97,"filePath":98,"digest":99,"rendered":100},{"title":92,"description":93,"editUrl":16,"head":94,"template":33,"sidebar":95,"pagefind":16,"draft":23},"Vonage Call Panel","Create XR Blocks UI to answer phone calls",[],{"hidden":23,"attrs":96},{},"Now, we'll be creating the UI.\n\nTo recieve phone calls via the Vonage Voice API using the XR Blocks library's \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\n\nTo show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\n\nThe Vonage Voice Client SDK's \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\n\nThe virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\n\nThe following code will be placed in the `VonageAudioCall.js` file.\n\nFirst, we will set the Quick Replies that the user can send into the call.\nFind `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code:\n\n```js\nconst QUICK_REPLIES = [\n { label: \"Meeting\", message: \"In a meeting, I'll call you back.\" },\n { label: \"Talk Later\", message: \"Can't talk right now. I'll talk later.\" },\n { label: \"OMW!\", message: \"On my way! Talk soon.\" },\n { label: \"5 Mins\", message: \"Call you back in 5 minutes.\" },\n];\n```\n\nLet's initiate the constructor for our panel with some variables:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n\n```js\nconstructor() {\n super();\n this.token = '';\n this.client = new vonageClientSDK.VonageClient();\n this.callId = null;\n // Keep a reference to the panel so we can destroy it later\n this.panel = null;\n this.statusText = null;\n this.userName = \"XR_User_1\";\n this.grid = null;\n this.controlRow = null;\n this.puppetHead = null;\n this.face = null;\n this.mouth = null;\n this._camWorld = new THREE.Vector3();\n this._headWorld = new THREE.Vector3();\n this.replyPanel = null;\n this.typedTextView = null;\n this._currentTypedText = '';\n this.keyboard = null;\n}\n```\n\nHere's the function to create an Avatar and add the MediaStream for the LipSync feature: `// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄`\n\n```js\n_createAvatar(stream) {\n // Safety: don't create a second avatar if one already exists\n if (this.puppetHead) return;\n\n console.log(\"Creating lipsync avatar...\");\n\n const faceR = 0.1;\n\n const head = new THREE.Group();\n // Position: in front of the user, roughly at face height\n head.position.set(0, xb.user.height, -1.2);\n\n // --- Sphere face mesh ---\n const faceGeom = new THREE.SphereGeometry(faceR, 32, 24);\n const faceMat = new THREE.MeshStandardMaterial({\n color: 0xf2d4b3,\n roughness: 0.6,\n metalness: 0.05,\n });\n const faceMesh = new THREE.Mesh(faceGeom, faceMat);\n head.add(faceMesh);\n\n this.face = new xb.StylizedFace({ showEyes: true });\n head.add(this.face);\n\n this.mouth = new LipsyncMouth(stream, { target: this.face });\n head.add(this.mouth);\n\n this.puppetHead = head;\n this.add(head);\n}\n```\n\nThis function will remove the 3D Avatar when the call is over:\n`// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄`\n\n```js\n_removeAvatar() {\n if (!this.puppetHead) return;\n\n console.log(\"Removing lipsync avatar...\");\n\n if (this.mouth) {\n // Detach from the head group before nulling the reference\n this.mouth.parent?.remove(this.mouth);\n this.mouth = null;\n }\n\n if (this.face) {\n this.face.parent?.remove(this.face);\n // dispose() frees the underlying canvas/texture to avoid memory leaks\n this.face.dispose();\n this.face = null;\n }\n\n this.remove(this.puppetHead);\n this.puppetHead = null;\n}\n```\n\nHere's the function to create the panel:\n`// ⌄⌄⌄ Create Call panel ⌄⌄⌄`\n\n```js\n_createCallPanel(callerName) {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Call UI...\");\n\n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' });\n this.panel.position.set(\n 0,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n\n this.add(this.panel);\n\n this.grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = this.grid.addRow({ weight: 0.7 }).addText({\n text: `Incoming call from ${callerName}...`,\n fontColor: '#ffffff',\n fontSize: 0.08,\n });\n\n this.updateControlRow('INCOMING');\n}\n```\n\nFunction to update the call control section:\n`// ⌄⌄⌄ Update Call controls ⌄⌄⌄`\n\n```js\nupdateControlRow(state) {\n if (!this.grid) return;\n\n // 1. Remove the existing row if it exists\n if (this.controlRow) {\n this.grid.remove(this.controlRow);\n this.controlRow = null;\n this.grid.resetLayout();\n }\n\n // 2. Create a fresh row. It will naturally append below the Status Text.\n // We give it the full remaining weight (0.3 relative to the panel, or flexible)\n this.controlRow = this.grid.addRow({ weight: 0.3 });\n\n if (state === 'INCOMING') {\n // --- ANSWER BUTTON ---\n const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call',\n fontSize: 0.5,\n backgroundColor: '#00ff00'\n });\n answerBtn.onTriggered = () => this._onAnswer();\n\n // --- REJECT BUTTON ---\n const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n rejectBtn.onTriggered = () => this._onReject();\n\n } else if (state === 'CONNECTED') {\n // --- HANGUP BUTTON ---\n // This is a fresh row, so layouts will calculate correctly\n const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n hangupBtn.onTriggered = () => this._onHangup();\n }\n\n // 3. Force layout update\n this.panel.updateLayouts();\n}\n```\n\nThis function will remove the panel once the call is over:\n`// ⌄⌄⌄ Remove Call panel ⌄⌄⌄`\n\n```js\n_removeCallPanel() {\n if (this.panel) {\n console.log(\"Destroying Call UI...\");\n this.remove(this.panel);\n this.panel = null;\n this.grid = null;\n this.statusText = null;\n this.controlRow = null;\n }\n this._removeReplyPanel();\n}\n```\n\nNow, let's add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\n\nHere's the code to show the Keyboard:\n`// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄`\n\n```js\n_showKeyboard() {\n if (this.keyboard) return;\n\n this.keyboard = new Keyboard();\n // Position it below and aligned with the reply panel\n this.keyboard.position.set(\n 0,\n xb.user.height - 1.35,\n -xb.user.objectDistance + 1\n );\n this.add(this.keyboard);\n\n // Update the display on every keystroke\n this.keyboard.onTextChanged = (text) => {\n this._currentTypedText = text;\n if (this.typedTextView) {\n this.typedTextView.text = text.length > 0 ? text : 'Tap to type...';\n }\n };\n\n // Enter key sends immediately — same as tapping the Send button\n this.keyboard.onEnterPressed = (text) => {\n this._sendTypedText();\n };\n}\n```\n\nIf we want to hide the Keyboard, here's the code:\n`// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄`\n\n```js\n_hideKeyboard() {\n if (!this.keyboard) return;\n this.remove(this.keyboard);\n this.keyboard = null;\n}\n```\n\nTo toggle between showing and hidding the keyboard, we have this code:\n`// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄`\n\n```js\n_toggleKeyboard() {\n this.keyboard ? this._hideKeyboard() : this._showKeyboard();\n}\n```\n\nLet's create the functions that will send the text to be said into the call just in case we can't talk at that moment.\n\nTo send the Quick Replies that we set before:\n`// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄`\n\n```js\n_sendQuickReply(message) {\n if (!this.callId) return;\n console.log(`Sending quick reply: \"${message}\"`);\n\n // Give the user immediate visual feedback in the status bar\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, message)\n .then(() => {\n console.log('Quick reply sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${message}\"`;\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nIn the case we want to carry on the conversation but maybe can't speak (ie in a public space), we can send custom text:\n`// ⌄⌄⌄ Send Custom Text ⌄⌄⌄`\n\n```js\n_sendTypedText() {\n const text = this._currentTypedText.trim();\n if (!text) return;\n if (!this.callId) return;\n\n console.log(`Sending typed text: \"${text}\"`);\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, text)\n .then(() => {\n console.log('Typed text sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${text}\"`;\n\n // Clear the keyboard buffer and reset the display\n if (this.keyboard) this.keyboard.setText('');\n this._currentTypedText = '';\n if (this.typedTextView) this.typedTextView.text = 'Tap to type...';\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nHere we will create the Reply panel that will hold all the way we can send a text message into the call:\n`// ⌄⌄⌄ Create Reply panel ⌄⌄⌄`\n\n```js\n_createReplyPanel() {\n if (this.replyPanel) return;\n\n this.replyPanel = new xb.SpatialPanel({\n backgroundColor: '#1a1a2ecc',\n width: .75,\n height: 0.9,\n });\n // Offset to the right so it sits beside the main call panel\n this.replyPanel.position.set(\n 0.8,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n this.add(this.replyPanel);\n\n const grid = this.replyPanel.addGrid();\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Quick Replies',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n const pairs = [\n QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ]\n QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ]\n ];\n\n pairs.forEach(pair => {\n const row = grid.addRow({ weight: 0.20 });\n pair.forEach(({ label, message }) => {\n const btn = row.addCol({ weight: 0.5 }).addTextButton({\n text: label,\n fontSize: 0.35,\n backgroundColor: '#2e2e50',\n fontColor: '#ffffff',\n });\n btn.onTriggered = () => this._sendQuickReply(message);\n });\n });\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Talk via Text',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n this.typedTextView = grid.addRow({ weight: 0.18 }).addText({\n text: 'Tap to type...',\n fontColor: '#ffffff',\n fontSize: 0.065,\n textAlign: 'left',\n });\n\n const actionRow = grid.addRow({ weight: 0.30 });\n\n const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'keyboard',\n fontSize: 0.5,\n backgroundColor: '#2e3a4a',\n });\n kbBtn.onTriggered = () => this._toggleKeyboard();\n\n const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'send',\n fontSize: 0.5,\n backgroundColor: '#1a4a2a',\n });\n sendBtn.onTriggered = () => this._sendTypedText();\n\n this.replyPanel.updateLayouts();\n}\n```\n\nJust like with the Call panel, we will have a function to remove the Reply panel:\n`// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄`\n\n```js\n_removeReplyPanel() {\n this._hideKeyboard();\n if (this.replyPanel) {\n this.remove(this.replyPanel);\n this.replyPanel = null;\n this.typedTextView = null;\n }\n this._currentTypedText = '';\n}\n```\n\nThis function answers the call and updates the status and call control section:\n`// ⌄⌄⌄ Answer call method ⌄⌄⌄`\n\n```js\n_onAnswer() {\n console.log('Answering...');\n this.client.answer(this.callId)\n .then(() => {\n console.log(\"Success answering call.\");\n this.statusText.text = `Call answered.`;\n this.updateControlRow('CONNECTED');\n\n // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\n this._createReplyPanel();\n\n // get media stream\n const audioElement = this.client.getAudioOutputElement();\n if (audioElement && audioElement.srcObject) {\n // This is the active WebRTC MediaStream managed by Vonage\n const remoteStream = audioElement.srcObject;\n console.log('remoteStream: ', remoteStream);\n\n // Example: Grab individual audio tracks from the stream\n const audioTracks = remoteStream.getAudioTracks();\n console.log(\"Active Audio Tracks:\", audioTracks);\n\n // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\n this._createAvatar(remoteStream);\n }\n })\n .catch(error => {\n console.error(\"Error answering call: \", error);\n });\n}\n```\n\nThis function will reject the incoming call and remove the panel:\n`// ⌄⌄⌄ Reject call method ⌄⌄⌄`\n\n```js\n_onReject() {\n console.log('Rejecting...');\n this.client.reject(this.callId)\n .then(() => {\n console.log(\"Success rejecting call.\");\n })\n .catch(error => {\n console.error(\"Error rejecting call: \", error);\n });\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nThis function will hang up the ongoing call and remove the panel:\n`// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ `\n\n```js\n_onHangup() {\n console.log('Hanging up...');\n this.client.hangup(this.callId)\n .then(() => {\n console.log(\"Success hanging up call.\");\n })\n .catch(error => {\n console.error(\"Error hanging up call: \", error);\n });\n // We manually destroy the panel here too, just in case the event lags\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nSet up some listeners for the events that the Vonage Client SDK will emit and what to do:\n`// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄`\n\n```js\nsetupVonageListeners() {\n // --- CREATE UI ON INVITE ---\n this.client.on('callInvite', (callId, from, channelType) => {\n this.callId = callId;\n const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, \"*\")\n console.log(`Incoming call from ${maskedNumber}`);\n\n // Trigger the UI creation here\n this._createCallPanel(maskedNumber);\n });\n\n this.client.on('legStatusUpdate', (callId, legId, status) => {\n console.log(\"status: \", status);\n if (this.statusText) {\n this.statusText.text = `Status: ${status}`;\n }\n });\n\n // --- REMOVE UI ON CANCEL/HANGUP ---\n this.client.on('callInviteCancel', (callId) => {\n console.log(`Call cancelled: ${callId}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n\n this.client.on(\"callHangup\", (callId, callQuality, reason) => {\n console.log(`Call hung up: ${reason}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n}\n```\n\nGet a token from the server so you can connect to a session:\n`// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ `\n\n```js\nasync connectToVonage(name) {\n try {\n console.log(`Fetching token for ${name}...`);\n\n // 1. Fetch the token (AWAIT the result)\n const response = await fetch(`/token?name=${name}`);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n this.token = data.token;\n console.log(\"Fetched token successfully.\");\n\n // 2. Create the Session (AWAIT the result)\n const sessionId = await this.client.createSession(this.token);\n\n console.log(\"Session created successfully. Session ID:\", sessionId);\n\n // 3. Update UI\n // Instead, update your XR Panel text to show we are ready\n if(this.statusText) {\n this.statusText.text = \"Connected. Waiting for calls...\";\n }\n\n } catch (error) {\n console.error(\"Connection failed:\", error);\n if(this.statusText) this.statusText.text = \"Connection Failed.\";\n }\n}\n```\n\nInitialize the Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n\n```js\ninit() {\n console.log(\"Vonage init!\",this.client);\n this.setupVonageListeners();\n this.connectToVonage(this.userName);\n}\n```","src/content/docs/04_Vonage_Call_Panel.md","35a9af8a8ca7718e",{"html":101,"metadata":102},"\u003Cp>Now, we’ll be creating the UI.\u003C/p>\n\u003Cp>To recieve phone calls via the Vonage Voice API using the XR Blocks library’s \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\u003C/p>\n\u003Cp>To show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The Vonage Voice Client SDK’s \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\u003C/p>\n\u003Cp>The virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">VonageAudioCall.js\u003C/code> file.\u003C/p>\n\u003Cp>First, we will set the Quick Replies that the user can send into the call.\nFind \u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄\u003C/code> and add this code:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Meeting\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">In a meeting, I'll call you back.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk Later\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Can't talk right now. I'll talk later.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">OMW!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">On my way! Talk soon.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">5 Mins\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Call you back in 5 minutes.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"const QUICK_REPLIES = [ { label: "Meeting", message: "In a meeting, I'll call you back." }, { label: "Talk Later", message: "Can't talk right now. I'll talk later." }, { label: "OMW!", message: "On my way! Talk soon." }, { label: "5 Mins", message: "Call you back in 5 minutes." },];\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s initiate the constructor for our panel with some variables:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">vonageClientSDK\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageClient\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">XR_User_1\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_camWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_headWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"constructor() { super(); this.token = ''; this.client = new vonageClientSDK.VonageClient(); this.callId = null; // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.userName = "XR_User_1"; this.grid = null; this.controlRow = null; this.puppetHead = null; this.face = null; this.mouth = null; this._camWorld = new THREE.Vector3(); this._headWorld = new THREE.Vector3(); this.replyPanel = null; this.typedTextView = null; this._currentTypedText = ''; this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create an Avatar and add the MediaStream for the LipSync feature: \u003Ccode dir=\"auto\">// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Safety: don't create a second avatar if one already exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceR\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Group\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position: in front of the user, roughly at face height\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- Sphere face mesh ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceGeom\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SphereGeometry\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceR\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">32\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">24\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMat\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">MeshStandardMaterial\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">color: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0xf2d4b3\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">roughness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.6\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">metalness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.05\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Mesh\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceGeom\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">faceMat\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">StylizedFace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ showEyes: \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">true\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">LipsyncMouth\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, { target: \u003C/span>\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createAvatar(stream) { // Safety: don't create a second avatar if one already exists if (this.puppetHead) return; console.log("Creating lipsync avatar..."); const faceR = 0.1; const head = new THREE.Group(); // Position: in front of the user, roughly at face height head.position.set(0, xb.user.height, -1.2); // --- Sphere face mesh --- const faceGeom = new THREE.SphereGeometry(faceR, 32, 24); const faceMat = new THREE.MeshStandardMaterial({ color: 0xf2d4b3, roughness: 0.6, metalness: 0.05, }); const faceMesh = new THREE.Mesh(faceGeom, faceMat); head.add(faceMesh); this.face = new xb.StylizedFace({ showEyes: true }); head.add(this.face); this.mouth = new LipsyncMouth(stream, { target: this.face }); head.add(this.mouth); this.puppetHead = head; this.add(head);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the 3D Avatar when the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Removing lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Detach from the head group before nulling the reference\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">mouth\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// dispose() frees the underlying canvas/texture to avoid memory leaks\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">dispose\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeAvatar() { if (!this.puppetHead) return; console.log("Removing lipsync avatar..."); if (this.mouth) { // Detach from the head group before nulling the reference this.mouth.parent?.remove(this.mouth); this.mouth = null; } if (this.face) { this.face.parent?.remove(this.face); // dispose() frees the underlying canvas/texture to avoid memory leaks this.face.dispose(); this.face = null; } this.remove(this.puppetHead); this.puppetHead = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callerName\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.7\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callerName\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.08\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createCallPanel(callerName) { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Call UI..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.panel); this.grid = this.panel.addGrid(); // 2. Status Text this.statusText = this.grid.addRow({ weight: 0.7 }).addText({ text: `Incoming call from ${callerName}...`, fontColor: '#ffffff', fontSize: 0.08, }); this.updateControlRow('INCOMING');}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to update the call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Update Call controls ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Remove the existing row if it exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">resetLayout\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create a fresh row. It will naturally append below the Status Text.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We give it the full remaining weight (0.3 relative to the panel, or flexible)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- ANSWER BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#00ff00\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REJECT BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">else\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- HANGUP BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is a fresh row, so layouts will calculate correctly\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Force layout update\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"updateControlRow(state) { if (!this.grid) return; // 1. Remove the existing row if it exists if (this.controlRow) { this.grid.remove(this.controlRow); this.controlRow = null; this.grid.resetLayout(); } // 2. Create a fresh row. It will naturally append below the Status Text. // We give it the full remaining weight (0.3 relative to the panel, or flexible) this.controlRow = this.grid.addRow({ weight: 0.3 }); if (state === 'INCOMING') { // --- ANSWER BUTTON --- const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call', fontSize: 0.5, backgroundColor: '#00ff00' }); answerBtn.onTriggered = () => this._onAnswer(); // --- REJECT BUTTON --- const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); rejectBtn.onTriggered = () => this._onReject(); } else if (state === 'CONNECTED') { // --- HANGUP BUTTON --- // This is a fresh row, so layouts will calculate correctly const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); hangupBtn.onTriggered = () => this._onHangup(); } // 3. Force layout update this.panel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the panel once the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Destroying Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeCallPanel() { if (this.panel) { console.log("Destroying Call UI..."); this.remove(this.panel); this.panel = null; this.grid = null; this.statusText = null; this.controlRow = null; } this._removeReplyPanel();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Now, let’s add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\u003C/p>\n\u003Cp>Here’s the code to show the Keyboard:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position it below and aligned with the reply panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.35\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">+\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Update the display on every keystroke\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTextChanged\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">length\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Enter key sends immediately — same as tapping the Send button\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onEnterPressed\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_showKeyboard() { if (this.keyboard) return; this.keyboard = new Keyboard(); // Position it below and aligned with the reply panel this.keyboard.position.set( 0, xb.user.height - 1.35, -xb.user.objectDistance + 1 ); this.add(this.keyboard); // Update the display on every keystroke this.keyboard.onTextChanged = (text) => { this._currentTypedText = text; if (this.typedTextView) { this.typedTextView.text = text.length > 0 ? text : 'Tap to type...'; } }; // Enter key sends immediately — same as tapping the Send button this.keyboard.onEnterPressed = (text) => { this._sendTypedText(); };}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>If we want to hide the Keyboard, here’s the code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_hideKeyboard() { if (!this.keyboard) return; this.remove(this.keyboard); this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>To toggle between showing and hidding the keyboard, we have this code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_toggleKeyboard() { this.keyboard ? this._hideKeyboard() : this._showKeyboard();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s create the functions that will send the text to be said into the call just in case we can’t talk at that moment.\u003C/p>\n\u003Cp>To send the Quick Replies that we set before:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending quick reply: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Give the user immediate visual feedback in the status bar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick reply sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendQuickReply(message) { if (!this.callId) return; console.log(`Sending quick reply: "${message}"`); // Give the user immediate visual feedback in the status bar if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, message) .then(() => { console.log('Quick reply sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${message}"`; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>In the case we want to carry on the conversation but maybe can’t speak (ie in a public space), we can send custom text:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Custom Text ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">trim\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending typed text: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Typed text sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Clear the keyboard buffer and reset the display\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendTypedText() { const text = this._currentTypedText.trim(); if (!text) return; if (!this.callId) return; console.log(`Sending typed text: "${text}"`); if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, text) .then(() => { console.log('Typed text sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${text}"`; // Clear the keyboard buffer and reset the display if (this.keyboard) this.keyboard.setText(''); this._currentTypedText = ''; if (this.typedTextView) this.typedTextView.text = 'Tap to type...'; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here we will create the Reply panel that will hold all the way we can send a text message into the call:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a1a2ecc\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.75\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.9\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Offset to the right so it sits beside the main call panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.8\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick Replies\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ Meeting, Talk Later ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ OMW!, 5 Mins ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">pair\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.20\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pair\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">{ \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">label\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> }\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addTextButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">label\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.35\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e2e50\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk via Text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.18\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.065\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">textAlign: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">left\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.30\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">keyboard\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e3a4a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">send\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a4a2a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createReplyPanel() { if (this.replyPanel) return; this.replyPanel = new xb.SpatialPanel({ backgroundColor: '#1a1a2ecc', width: .75, height: 0.9, }); // Offset to the right so it sits beside the main call panel this.replyPanel.position.set( 0.8, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.replyPanel); const grid = this.replyPanel.addGrid(); grid.addRow({ weight: 0.06 }).addText({ text: 'Quick Replies', fontColor: '#9b9bff', fontSize: 0.055, }); const pairs = [ QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ] QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ] ]; pairs.forEach(pair => { const row = grid.addRow({ weight: 0.20 }); pair.forEach(({ label, message }) => { const btn = row.addCol({ weight: 0.5 }).addTextButton({ text: label, fontSize: 0.35, backgroundColor: '#2e2e50', fontColor: '#ffffff', }); btn.onTriggered = () => this._sendQuickReply(message); }); }); grid.addRow({ weight: 0.06 }).addText({ text: 'Talk via Text', fontColor: '#9b9bff', fontSize: 0.055, }); this.typedTextView = grid.addRow({ weight: 0.18 }).addText({ text: 'Tap to type...', fontColor: '#ffffff', fontSize: 0.065, textAlign: 'left', }); const actionRow = grid.addRow({ weight: 0.30 }); const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'keyboard', fontSize: 0.5, backgroundColor: '#2e3a4a', }); kbBtn.onTriggered = () => this._toggleKeyboard(); const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'send', fontSize: 0.5, backgroundColor: '#1a4a2a', }); sendBtn.onTriggered = () => this._sendTypedText(); this.replyPanel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Just like with the Call panel, we will have a function to remove the Reply panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeReplyPanel() { this._hideKeyboard(); if (this.replyPanel) { this.remove(this.replyPanel); this.replyPanel = null; this.typedTextView = null; } this._currentTypedText = '';}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function answers the call and updates the status and call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Answer call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Answering...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success answering call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call answered.\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// get media stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioOutputElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">&&\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is the active WebRTC MediaStream managed by Vonage\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">remoteStream: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Example: Grab individual audio tracks from the stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Active Audio Tracks:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error answering call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onAnswer() { console.log('Answering...'); this.client.answer(this.callId) .then(() => { console.log("Success answering call."); this.statusText.text = `Call answered.`; this.updateControlRow('CONNECTED'); // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄ this._createReplyPanel(); // get media stream const audioElement = this.client.getAudioOutputElement(); if (audioElement && audioElement.srcObject) { // This is the active WebRTC MediaStream managed by Vonage const remoteStream = audioElement.srcObject; console.log('remoteStream: ', remoteStream); // Example: Grab individual audio tracks from the stream const audioTracks = remoteStream.getAudioTracks(); console.log("Active Audio Tracks:", audioTracks); // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄ this._createAvatar(remoteStream); } }) .catch(error => { console.error("Error answering call: ", error); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will reject the incoming call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Reject call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Rejecting...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">reject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success rejecting call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error rejecting call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onReject() { console.log('Rejecting...'); this.client.reject(this.callId) .then(() => { console.log("Success rejecting call."); }) .catch(error => { console.error("Error rejecting call: ", error); }); this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will hang up the ongoing call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Hanging up...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success hanging up call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error hanging up call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We manually destroy the panel here too, just in case the event lags\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onHangup() { console.log('Hanging up...'); this.client.hangup(this.callId) .then(() => { console.log("Success hanging up call."); }) .catch(error => { console.error("Error hanging up call: ", error); }); // We manually destroy the panel here too, just in case the event lags this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Set up some listeners for the events that the Vonage Client SDK will emit and what to do:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- CREATE UI ON INVITE ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInvite\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">channelType\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">from\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">replace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">(?=(?:\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\D\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">*\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">{4}\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">g\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">*\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Trigger the UI creation here\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">legStatusUpdate\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">legId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">status: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REMOVE UI ON CANCEL/HANGUP ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInviteCancel\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call cancelled: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callHangup\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callQuality\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">reason\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call hung up: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">reason\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"setupVonageListeners() { // --- CREATE UI ON INVITE --- this.client.on('callInvite', (callId, from, channelType) => { this.callId = callId; const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, "*") console.log(`Incoming call from ${maskedNumber}`); // Trigger the UI creation here this._createCallPanel(maskedNumber); }); this.client.on('legStatusUpdate', (callId, legId, status) => { console.log("status: ", status); if (this.statusText) { this.statusText.text = `Status: ${status}`; } }); // --- REMOVE UI ON CANCEL/HANGUP --- this.client.on('callInviteCancel', (callId) => { console.log(`Call cancelled: ${callId}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); }); this.client.on("callHangup", (callId, callQuality, reason) => { console.log(`Call hung up: ${reason}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Get a token from the server so you can connect to a session:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">async\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">name\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">try\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Fetching token for \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Fetch the token (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">fetch\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">/token?name=\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">ok\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">throw\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">HTTP error! status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">json\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Fetched token successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create the Session (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sessionId\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createSession\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Session created successfully. Session ID:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">sessionId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Update UI\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Instead, update your XR Panel text to show we are ready\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connected. Waiting for calls...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection failed:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection Failed.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"async connectToVonage(name) { try { console.log(`Fetching token for ${name}...`); // 1. Fetch the token (AWAIT the result) const response = await fetch(`/token?name=${name}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); this.token = data.token; console.log("Fetched token successfully."); // 2. Create the Session (AWAIT the result) const sessionId = await this.client.createSession(this.token); console.log("Session created successfully. Session ID:", sessionId); // 3. Update UI // Instead, update your XR Panel text to show we are ready if(this.statusText) { this.statusText.text = "Connected. Waiting for calls..."; } } catch (error) { console.error("Connection failed:", error); if(this.statusText) this.statusText.text = "Connection Failed."; }}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize the Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Vonage init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"init() { console.log("Vonage init!",this.client); this.setupVonageListeners(); this.connectToVonage(this.userName);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":103,"localImagePaths":104,"remoteImagePaths":105,"frontmatter":106,"imagePaths":107},[],[],[],{"title":92,"description":93},[],"05_exit_button",{"id":108,"data":110,"body":116,"filePath":117,"digest":118,"rendered":119},{"title":111,"description":112,"editUrl":16,"head":113,"template":33,"sidebar":114,"pagefind":16,"draft":23},"Exiting WebXR application","Button to exit WebXR application",[],{"hidden":23,"attrs":115},{},"When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\n\nThe following code will be placed in the `ExitButton.js` file.\n\nCreate the constructor for the Class:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n```js\n constructor() {\n super();\n // Keep a reference to the panel so we can destroy it later\n this.panel = null; \n this.statusText = null;\n this.exitPanelText = \"Exit Demo\";\n }\n```\n\nFunction to create a panel for the Exit Button:\n`// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄`\n```js\n createExitPanel() {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Exit Button...\");\n \n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({\n width: 0.5,\n height: 0.5, \n backgroundColor: '#2b2b2baa'\n });\n\n this.panel.position.set(\n 0,\n xb.user.height,\n 2.0\n );\n\n this.panel.rotation.set(0, Math.PI, 0);\n this.add(this.panel);\n\n const grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = grid.addRow({ weight: 1 }).addText({\n text: this.exitPanelText,\n fontColor: '#ffffff',\n fontSize: .4,\n });\n\n // Orbiter\n const orbiter = grid.addOrbiter();\n orbiter.addExitButton();\n this.panel.updateLayouts();\n }\n```\n\nInitialize Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n```js\n init() {\n console.log(\"Exit Button init!\");\n this.createExitPanel();\n }\n```","src/content/docs/05_Exit_Button.md","976dff780a601e73",{"html":120,"metadata":121},"\u003Cp>When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">ExitButton.js\u003C/code> file.\u003C/p>\n\u003Cp>Create the constructor for the Class:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Demo\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" constructor() { super(); // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.exitPanelText = "Exit Demo"; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to create a panel for the Exit Button:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Exit Button...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2.0\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">rotation\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">Math\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">PI\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Orbiter\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addOrbiter\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addExitButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" createExitPanel() { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Exit Button..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ width: 0.5, height: 0.5, backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height, 2.0 ); this.panel.rotation.set(0, Math.PI, 0); this.add(this.panel); const grid = this.panel.addGrid(); // 2. Status Text this.statusText = grid.addRow({ weight: 1 }).addText({ text: this.exitPanelText, fontColor: '#ffffff', fontSize: .4, }); // Orbiter const orbiter = grid.addOrbiter(); orbiter.addExitButton(); this.panel.updateLayouts(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Button init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" init() { console.log("Exit Button init!"); this.createExitPanel(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"title":111,"description":112},[],"06_add_to_xr_blocks",{"id":127,"data":129,"body":135,"filePath":136,"digest":137,"rendered":138},{"title":130,"description":131,"editUrl":16,"head":132,"template":33,"sidebar":133,"pagefind":16,"draft":23},"Add panels to XR Blocks","adding panels to WebXR application",[],{"hidden":23,"attrs":134},{},"Let's add the 2 panels to the application.\n\nThe following code will be placed in the `main.js` file.\n\nFirst, import the Panels:\n`// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nimport { VonageAudioCall } from './VonageAudioCall.js';\nimport { ExitPanel } from './ExitButton.js';\n```\n\nCreate instances and add to the application:\n`// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nxb.add(new VonageAudioCall());\nxb.add(new ExitPanel());\n```\n\n## Time to test the application\nRefresh the application and try to call the phone number that was purchased and assigned while running the setup script.\n\n> Note: You can find the phone number connected to your Vonage application in the `.env` file.","src/content/docs/06_Add_To_XR_Blocks.md","d3b20f81f928d1fb",{"html":139,"metadata":140},"\u003Cp>Let’s add the 2 panels to the application.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">main.js\u003C/code> file.\u003C/p>\n\u003Cp>First, import the Panels:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { VonageAudioCall } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./VonageAudioCall.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { ExitPanel } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./ExitButton.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"import { VonageAudioCall } from './VonageAudioCall.js';import { ExitPanel } from './ExitButton.js';\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Create instances and add to the application:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageAudioCall\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">ExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"xb.add(new VonageAudioCall());xb.add(new ExitPanel());\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"time-to-test-the-application\">Time to test the application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#time-to-test-the-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Time to test the application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Refresh the application and try to call the phone number that was purchased and assigned while running the setup script.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can find the phone number connected to your Vonage application in the \u003Ccode dir=\"auto\">.env\u003C/code> file.\u003C/p>\n\u003C/blockquote>",{"headings":141,"localImagePaths":145,"remoteImagePaths":146,"frontmatter":147,"imagePaths":148},[142],{"depth":82,"slug":143,"text":144},"time-to-test-the-application","Time to test the application",[],[],{"title":130,"description":131},[],"07_congrats",{"id":149,"data":151,"body":157,"filePath":158,"digest":159,"rendered":160},{"title":152,"description":153,"editUrl":16,"head":154,"template":33,"sidebar":155,"pagefind":16,"draft":23},"Congratulations!","What's next.",[],{"hidden":23,"attrs":156},{},"## You did it!\n\nYou now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\n\n\n## Create your own XR Blocks application with AI\n\nXR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\n\n## Export your application\n\nIf you'd like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\n\n```bash\nchmod +x export.sh && ./export.sh\n```\n\n## Stop your Codespace\n\nDon't forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your `Active` instance and click `Stop codespace`\n\n## What's Next?\n\n- Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\n- Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\n- Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\n- Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\n- Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage","src/content/docs/07_Congrats.md","ebc29bb1698c9e61",{"html":161,"metadata":162},"\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"you-did-it\">You did it!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#you-did-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “You did it!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"create-your-own-xr-blocks-application-with-ai\">Create your own XR Blocks application with AI\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#create-your-own-xr-blocks-application-with-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Create your own XR Blocks application with AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>XR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-your-application\">Export your application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-your-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Export your application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you’d like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame is-terminal not-content\">\u003Cfigcaption class=\"header\">\u003Cspan class=\"title\">\u003C/span>\u003Cspan class=\"sr-only\">Terminal window\u003C/span>\u003C/figcaption>\u003Cpre data-language=\"bash\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">chmod\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">+x\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">export.sh\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> && \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">./export.sh\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"chmod +x export.sh && ./export.sh\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"stop-your-codespace\">Stop your Codespace\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#stop-your-codespace\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Stop your Codespace”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Don’t forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">\u003C/a>\u003Ca href=\"https://github.com/codespaces\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your \u003Ccode dir=\"auto\">Active\u003C/code> instance and click \u003Ccode dir=\"auto\">Stop codespace\u003C/code>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"whats-next\">What’s Next?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#whats-next\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “What’s Next?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\u003C/li>\n\u003Cli>Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\u003C/li>\n\u003Cli>Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\u003C/li>\n\u003Cli>Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\u003C/li>\n\u003Cli>Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage\u003C/li>\n\u003C/ul>",{"headings":163,"localImagePaths":179,"remoteImagePaths":180,"frontmatter":181,"imagePaths":182},[164,167,170,173,176],{"depth":82,"slug":165,"text":166},"you-did-it","You did it!",{"depth":82,"slug":168,"text":169},"create-your-own-xr-blocks-application-with-ai","Create your own XR Blocks application with AI",{"depth":82,"slug":171,"text":172},"export-your-application","Export your application",{"depth":82,"slug":174,"text":175},"stop-your-codespace","Stop your Codespace",{"depth":82,"slug":177,"text":178},"whats-next","What’s Next?",[],[],{"title":152,"description":153},[]] \ No newline at end of file +[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","a30a942a2ceda2e1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"where\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":false,\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[null,null,null],\"rehypePlugins\":[[null,{\"experimentalHeadingIdCompat\":false}],null,[null,{\"themes\":[{\"name\":\"Night Owl No Italics\",\"type\":\"dark\",\"colors\":{\"focusBorder\":\"#122d42\",\"foreground\":\"#d6deeb\",\"disabledForeground\":\"#cccccc80\",\"descriptionForeground\":\"#d6deebb3\",\"errorForeground\":\"#ef5350\",\"icon.foreground\":\"#c5c5c5\",\"contrastActiveBorder\":null,\"contrastBorder\":\"#122d42\",\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#4f4f4f\",\"textLink.activeForeground\":\"#3794ff\",\"textLink.foreground\":\"#3794ff\",\"textPreformat.foreground\":\"#d7ba7d\",\"textSeparator.foreground\":\"#ffffff2e\",\"editor.background\":\"#23262f\",\"editor.foreground\":\"#d6deeb\",\"editorLineNumber.foreground\":\"#4b6479\",\"editorLineNumber.activeForeground\":\"#c5e4fd\",\"editorActiveLineNumber.foreground\":\"#c6c6c6\",\"editor.selectionBackground\":\"#1d3b53\",\"editor.inactiveSelectionBackground\":\"#7e57c25a\",\"editor.selectionHighlightBackground\":\"#5f7e9779\",\"editorError.foreground\":\"#ef5350\",\"editorWarning.foreground\":\"#b39554\",\"editorInfo.foreground\":\"#3794ff\",\"editorHint.foreground\":\"#eeeeeeb2\",\"problemsErrorIcon.foreground\":\"#ef5350\",\"problemsWarningIcon.foreground\":\"#b39554\",\"problemsInfoIcon.foreground\":\"#3794ff\",\"editor.findMatchBackground\":\"#5f7e9779\",\"editor.findMatchHighlightBackground\":\"#1085bb5d\",\"editor.findRangeHighlightBackground\":\"#3a3d4166\",\"editorLink.activeForeground\":\"#4e94ce\",\"editorLightBulb.foreground\":\"#ffcc00\",\"editorLightBulbAutoFix.foreground\":\"#75beff\",\"diffEditor.insertedTextBackground\":\"#99b76d23\",\"diffEditor.insertedTextBorder\":\"#c5e47833\",\"diffEditor.removedTextBackground\":\"#ef535033\",\"diffEditor.removedTextBorder\":\"#ef53504d\",\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#011627\",\"editorStickyScrollHover.background\":\"#2a2d2e\",\"editorInlayHint.background\":\"#5f7e97cc\",\"editorInlayHint.foreground\":\"#ffffff\",\"editorInlayHint.typeBackground\":\"#5f7e97cc\",\"editorInlayHint.typeForeground\":\"#ffffff\",\"editorInlayHint.parameterBackground\":\"#5f7e97cc\",\"editorInlayHint.parameterForeground\":\"#ffffff\",\"editorPane.background\":\"#011627\",\"editorGroup.emptyBackground\":\"#011627\",\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-black)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#011627\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#011627\",\"editorGroup.dropBackground\":\"#7e57c273\",\"editorGroup.dropIntoPromptForeground\":\"#d6deeb\",\"editorGroup.dropIntoPromptBackground\":\"#021320\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#011627\",\"sideBySideEditor.verticalBorder\":\"#011627\",\"scrollbar.shadow\":\"#010b14\",\"scrollbarSlider.background\":\"#ffffff17\",\"scrollbarSlider.hoverBackground\":\"#ffffff40\",\"scrollbarSlider.activeBackground\":\"#084d8180\",\"panel.background\":\"#011627\",\"panel.border\":\"#5f7e97\",\"panelTitle.activeBorder\":\"#5f7e97\",\"panelTitle.activeForeground\":\"#ffffffcc\",\"panelTitle.inactiveForeground\":\"#d6deeb80\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#011627\",\"widget.shadow\":\"#011627\",\"editorWidget.background\":\"#021320\",\"editorWidget.foreground\":\"#d6deeb\",\"editorWidget.border\":\"#5f7e97\",\"quickInput.background\":\"#021320\",\"quickInput.foreground\":\"#d6deeb\",\"quickInputTitle.background\":\"#ffffff1a\",\"pickerGroup.foreground\":\"#d1aaff\",\"pickerGroup.border\":\"#011627\",\"editor.hoverHighlightBackground\":\"#7e57c25a\",\"editorHoverWidget.background\":\"#011627\",\"editorHoverWidget.foreground\":\"#d6deeb\",\"editorHoverWidget.border\":\"#5f7e97\",\"editorHoverWidget.statusBarBackground\":\"#011a2f\",\"titleBar.activeBackground\":\"var(--sl-color-black)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#010e1a\",\"titleBar.inactiveForeground\":\"#eeefff99\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#5a5d5e50\",\"toolbar.activeBackground\":\"#63666750\",\"tab.activeBackground\":\"#0b2942\",\"tab.unfocusedActiveBackground\":\"#0b2942\",\"tab.inactiveBackground\":\"#01111d\",\"tab.unfocusedInactiveBackground\":\"#01111d\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#5f7e97\",\"tab.unfocusedActiveForeground\":\"#5f7e97\",\"tab.unfocusedInactiveForeground\":\"#5f7e97\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#272b3b\",\"tab.lastPinnedBorder\":\"#585858\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":\"#262a39\",\"tab.activeBorderTop\":\"var(--sl-color-accent-high)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#3399cc\",\"tab.inactiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedActiveModifiedBorder\":\"#3399cc80\",\"tab.unfocusedInactiveModifiedBorder\":\"#3399cc40\",\"badge.background\":\"#5f7e97\",\"badge.foreground\":\"#ffffff\",\"button.background\":\"#7e57c2cc\",\"button.foreground\":\"#ffffffcc\",\"button.border\":\"#122d42\",\"button.separator\":\"#ffffff52\",\"button.hoverBackground\":\"#7e57c2\",\"button.secondaryBackground\":\"#3a3d41\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#46494e\",\"dropdown.background\":\"#011627\",\"dropdown.foreground\":\"#ffffffcc\",\"dropdown.border\":\"#5f7e97\",\"list.activeSelectionBackground\":\"#234d708c\",\"list.activeSelectionForeground\":\"#ffffff\",\"tree.indentGuidesStroke\":\"#585858\",\"input.background\":\"#0b253a\",\"input.foreground\":\"#ffffffcc\",\"input.placeholderForeground\":\"#5f7e97\",\"inputOption.activeBorder\":\"#ffffffcc\",\"inputOption.hoverBackground\":\"#5a5d5e80\",\"inputOption.activeBackground\":\"#122d4266\",\"inputOption.activeForeground\":\"#ffffff\",\"inputValidation.infoBackground\":\"#00589ef2\",\"inputValidation.infoBorder\":\"#64b5f6\",\"inputValidation.warningBackground\":\"#675700f2\",\"inputValidation.warningBorder\":\"#ffca28\",\"inputValidation.errorBackground\":\"#ab0300f2\",\"inputValidation.errorBorder\":\"#ef5350\",\"keybindingLabel.background\":\"#8080802b\",\"keybindingLabel.foreground\":\"#cccccc\",\"keybindingLabel.border\":\"#33333399\",\"keybindingLabel.bottomBorder\":\"#44444499\",\"menu.foreground\":\"#ffffffcc\",\"menu.background\":\"#011627\",\"menu.selectionForeground\":\"#ffffff\",\"menu.selectionBackground\":\"#234d708c\",\"menu.separatorBackground\":\"#606060\",\"editor.snippetTabstopHighlightBackground\":\"#7c7c74c\",\"editor.snippetFinalTabstopHighlightBorder\":\"#525252\",\"terminal.ansiBlack\":\"#011627\",\"terminal.ansiRed\":\"#ef5350\",\"terminal.ansiGreen\":\"#22da6e\",\"terminal.ansiYellow\":\"#c5e478\",\"terminal.ansiBlue\":\"#82aaff\",\"terminal.ansiMagenta\":\"#c792ea\",\"terminal.ansiCyan\":\"#21c7a8\",\"terminal.ansiWhite\":\"#ffffff\",\"terminal.ansiBrightBlack\":\"#575656\",\"terminal.ansiBrightRed\":\"#ef5350\",\"terminal.ansiBrightGreen\":\"#22da6e\",\"terminal.ansiBrightYellow\":\"#ffeb95\",\"terminal.ansiBrightBlue\":\"#82aaff\",\"terminal.ansiBrightMagenta\":\"#c792ea\",\"terminal.ansiBrightCyan\":\"#7fdbca\",\"terminal.ansiBrightWhite\":\"#ffffff\",\"selection.background\":\"#4373c2\",\"input.border\":\"#5f7e97\",\"punctuation.definition.generic.begin.html\":\"#ef5350f2\",\"progress.background\":\"#7e57c2\",\"breadcrumb.foreground\":\"#a599e9\",\"breadcrumb.focusForeground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#ffffff\",\"breadcrumbPicker.background\":\"#001122\",\"list.invalidItemForeground\":\"#975f94\",\"list.dropBackground\":\"#011627\",\"list.focusBackground\":\"#010d18\",\"list.focusForeground\":\"#ffffff\",\"list.highlightForeground\":\"#ffffff\",\"list.hoverBackground\":\"#011627\",\"list.hoverForeground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#0e293f\",\"list.inactiveSelectionForeground\":\"#5f7e97\",\"activityBar.background\":\"#011627\",\"activityBar.dropBackground\":\"#5f7e97\",\"activityBar.foreground\":\"#5f7e97\",\"activityBar.border\":\"#011627\",\"activityBarBadge.background\":\"#44596b\",\"activityBarBadge.foreground\":\"#ffffff\",\"sideBar.background\":\"#011627\",\"sideBar.foreground\":\"#89a4bb\",\"sideBar.border\":\"#011627\",\"sideBarTitle.foreground\":\"#5f7e97\",\"sideBarSectionHeader.background\":\"#011627\",\"sideBarSectionHeader.foreground\":\"#5f7e97\",\"editorCursor.foreground\":\"#80a4c2\",\"editor.wordHighlightBackground\":\"#f6bbe533\",\"editor.wordHighlightStrongBackground\":\"#e2a2f433\",\"editor.lineHighlightBackground\":\"#0003\",\"editor.rangeHighlightBackground\":\"#7e57c25a\",\"editorIndentGuide.background\":\"#5e81ce52\",\"editorIndentGuide.activeBackground\":\"#7e97ac\",\"editorRuler.foreground\":\"#5e81ce52\",\"editorCodeLens.foreground\":\"#5e82ceb4\",\"editorBracketMatch.background\":\"#5f7e974d\",\"editorOverviewRuler.currentContentForeground\":\"#7e57c2\",\"editorOverviewRuler.incomingContentForeground\":\"#7e57c2\",\"editorOverviewRuler.commonContentForeground\":\"#7e57c2\",\"editorGutter.background\":\"#011627\",\"editorGutter.modifiedBackground\":\"#e2b93d\",\"editorGutter.addedBackground\":\"#9ccc65\",\"editorGutter.deletedBackground\":\"#ef5350\",\"editorSuggestWidget.background\":\"#2c3043\",\"editorSuggestWidget.border\":\"#2b2f40\",\"editorSuggestWidget.foreground\":\"#d6deeb\",\"editorSuggestWidget.highlightForeground\":\"#ffffff\",\"editorSuggestWidget.selectedBackground\":\"#5f7e97\",\"debugExceptionWidget.background\":\"#011627\",\"debugExceptionWidget.border\":\"#5f7e97\",\"editorMarkerNavigation.background\":\"#0b2942\",\"editorMarkerNavigationError.background\":\"#ef5350\",\"editorMarkerNavigationWarning.background\":\"#ffca28\",\"peekView.border\":\"#5f7e97\",\"peekViewEditor.background\":\"#011627\",\"peekViewEditor.matchHighlightBackground\":\"#7e57c25a\",\"peekViewResult.background\":\"#011627\",\"peekViewResult.fileForeground\":\"#5f7e97\",\"peekViewResult.lineForeground\":\"#5f7e97\",\"peekViewResult.matchHighlightBackground\":\"#ffffffcc\",\"peekViewResult.selectionBackground\":\"#2e3250\",\"peekViewResult.selectionForeground\":\"#5f7e97\",\"peekViewTitle.background\":\"#011627\",\"peekViewTitleDescription.foreground\":\"#697098\",\"peekViewTitleLabel.foreground\":\"#5f7e97\",\"merge.currentHeaderBackground\":\"#5f7e97\",\"merge.incomingHeaderBackground\":\"#7e57c25a\",\"statusBar.background\":\"#011627\",\"statusBar.foreground\":\"#5f7e97\",\"statusBar.border\":\"#262a39\",\"statusBar.debuggingBackground\":\"#202431\",\"statusBar.debuggingBorder\":\"#1f2330\",\"statusBar.noFolderBackground\":\"#011627\",\"statusBar.noFolderBorder\":\"#25293a\",\"statusBarItem.activeBackground\":\"#202431\",\"statusBarItem.hoverBackground\":\"#202431\",\"statusBarItem.prominentBackground\":\"#202431\",\"statusBarItem.prominentHoverBackground\":\"#202431\",\"notifications.background\":\"#01111d\",\"notifications.border\":\"#262a39\",\"notificationCenter.border\":\"#262a39\",\"notificationToast.border\":\"#262a39\",\"notifications.foreground\":\"#ffffffcc\",\"notificationLink.foreground\":\"#80cbc4\",\"extensionButton.prominentForeground\":\"#ffffffcc\",\"extensionButton.prominentBackground\":\"#7e57c2cc\",\"extensionButton.prominentHoverBackground\":\"#7e57c2\",\"terminal.selectionBackground\":\"#1b90dd4d\",\"terminalCursor.background\":\"#234d70\",\"debugToolBar.background\":\"#011627\",\"welcomePage.buttonBackground\":\"#011627\",\"welcomePage.buttonHoverBackground\":\"#011627\",\"walkThrough.embeddedEditorBackground\":\"#011627\",\"gitDecoration.modifiedResourceForeground\":\"#a2bffc\",\"gitDecoration.deletedResourceForeground\":\"#ef535090\",\"gitDecoration.untrackedResourceForeground\":\"#c5e478ff\",\"gitDecoration.ignoredResourceForeground\":\"#395a75\",\"gitDecoration.conflictingResourceForeground\":\"#ffeb95cc\",\"source.elm\":\"#5f7e97\",\"string.quoted.single.js\":\"#ffffff\",\"meta.objectliteral.js\":\"#82aaff\"},\"fg\":\"#d6deeb\",\"bg\":\"#23262f\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#a2bffc\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#f27775fe\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#d6deeb\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#919f9f\",\"fontStyle\":\"\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#5ca7e4\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#caece6\",\"fontStyle\":\"\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"fontStyle\":\"\",\"foreground\":\"#c5e478\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"background\":\"#ff2c83\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#d3423e\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#919f9f\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#cdebf7\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#ffffff\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#7fdbca\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#80cbc4\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#57eaf1\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#fad430\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#faf39f\",\"fontStyle\":\"\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#82aaff\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Comparison, returns, imports, and Keyword Operator Ruby\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#989da0\",\"background\":\"#F78C6C\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"background\":\"#8BD649\",\"foreground\":\"#ffffff\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#ffffff\",\"background\":\"#ec5f67\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#ef787f\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#d9f5dd\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#e2817f\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#31e1eb\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Unquoted String Zone\",\"scope\":[\"string.unquoted.preprocessor.message.cs\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C# Region\",\"scope\":[\"punctuation.separator.hash.cs\",\"keyword.preprocessor.region.cs\",\"keyword.preprocessor.endregion.cs\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"bold\"}},{\"name\":\"C# Other Variables\",\"scope\":[\"variable.other.object.cs\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"C# Enum\",\"scope\":[\"entity.name.type.enum.cs\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Dart String\",\"scope\":[\"string.interpolated.single.dart\",\"string.interpolated.double.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Dart Class\",\"scope\":[\"support.class.dart\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#ff6d6d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#dddddd\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#e0dec6\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#6ae9f0\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#78ccf0\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#8b96ea\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#ffcb8b\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#c789d6\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#ecc48d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#c792ea\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#c5e478\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#969bb7\",\"fontStyle\":\"\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#80cbc4\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#ff869a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#d6deeb\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#82b1ff\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#ff6a83\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#b2ccd6\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#8eace3\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#c5e478\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#bec5d4\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#f78c6c\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#ffeb95\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#889fb2\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#7fdbca\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#d7dbe0\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#f78c6c\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#d6deeb\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#ffcb8b\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#c792ea\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#82aaff\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-6)\",\"terminalBackground\":\"var(--sl-color-gray-6)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-6)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#ffffff17\",\"markBorderColor\":\"#ffffff40\"}}},{\"name\":\"Night Owl Light\",\"type\":\"light\",\"colors\":{\"focusBorder\":\"#93a1a1\",\"foreground\":\"#403f53\",\"disabledForeground\":\"#61616180\",\"descriptionForeground\":\"#403f53\",\"errorForeground\":\"#403f53\",\"icon.foreground\":\"#424242\",\"contrastActiveBorder\":null,\"contrastBorder\":null,\"textBlockQuote.background\":\"#7f7f7f1a\",\"textBlockQuote.border\":\"#007acc80\",\"textCodeBlock.background\":\"#dcdcdc66\",\"textLink.activeForeground\":\"#006ab1\",\"textLink.foreground\":\"#006ab1\",\"textPreformat.foreground\":\"#a31515\",\"textSeparator.foreground\":\"#0000002e\",\"editor.background\":\"#f6f7f9\",\"editor.foreground\":\"#403f53\",\"editorLineNumber.foreground\":\"#90a7b2\",\"editorLineNumber.activeForeground\":\"#403f53\",\"editorActiveLineNumber.foreground\":\"#0b216f\",\"editor.selectionBackground\":\"#e0e0e0\",\"editor.inactiveSelectionBackground\":\"#e0e0e080\",\"editor.selectionHighlightBackground\":\"#339cec33\",\"editorError.foreground\":\"#e64d49\",\"editorWarning.foreground\":\"#daaa01\",\"editorInfo.foreground\":\"#1a85ff\",\"editorHint.foreground\":\"#6c6c6c\",\"problemsErrorIcon.foreground\":\"#e64d49\",\"problemsWarningIcon.foreground\":\"#daaa01\",\"problemsInfoIcon.foreground\":\"#1a85ff\",\"editor.findMatchBackground\":\"#93a1a16c\",\"editor.findMatchHighlightBackground\":\"#93a1a16c\",\"editor.findRangeHighlightBackground\":\"#7497a633\",\"editorLink.activeForeground\":\"#0000ff\",\"editorLightBulb.foreground\":\"#ddb100\",\"editorLightBulbAutoFix.foreground\":\"#007acc\",\"diffEditor.insertedTextBackground\":\"#9ccc2c40\",\"diffEditor.insertedTextBorder\":null,\"diffEditor.removedTextBackground\":\"#ff000033\",\"diffEditor.removedTextBorder\":null,\"diffEditor.insertedLineBackground\":\"#9bb95533\",\"diffEditor.removedLineBackground\":\"#ff000033\",\"editorStickyScroll.background\":\"#fbfbfb\",\"editorStickyScrollHover.background\":\"#f0f0f0\",\"editorInlayHint.background\":\"#2aa29899\",\"editorInlayHint.foreground\":\"#f0f0f0\",\"editorInlayHint.typeBackground\":\"#2aa29899\",\"editorInlayHint.typeForeground\":\"#f0f0f0\",\"editorInlayHint.parameterBackground\":\"#2aa29899\",\"editorInlayHint.parameterForeground\":\"#f0f0f0\",\"editorPane.background\":\"#fbfbfb\",\"editorGroup.emptyBackground\":null,\"editorGroup.focusedEmptyBorder\":null,\"editorGroupHeader.tabsBackground\":\"var(--sl-color-gray-6)\",\"editorGroupHeader.tabsBorder\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"editorGroupHeader.noTabsBackground\":\"#f0f0f0\",\"editorGroupHeader.border\":null,\"editorGroup.border\":\"#f0f0f0\",\"editorGroup.dropBackground\":\"#2677cb2d\",\"editorGroup.dropIntoPromptForeground\":\"#403f53\",\"editorGroup.dropIntoPromptBackground\":\"#f0f0f0\",\"editorGroup.dropIntoPromptBorder\":null,\"sideBySideEditor.horizontalBorder\":\"#f0f0f0\",\"sideBySideEditor.verticalBorder\":\"#f0f0f0\",\"scrollbar.shadow\":\"#cccccc\",\"scrollbarSlider.background\":\"#0000001a\",\"scrollbarSlider.hoverBackground\":\"#00000055\",\"scrollbarSlider.activeBackground\":\"#00000099\",\"panel.background\":\"#f0f0f0\",\"panel.border\":\"#d9d9d9\",\"panelTitle.activeBorder\":\"#424242\",\"panelTitle.activeForeground\":\"#424242\",\"panelTitle.inactiveForeground\":\"#424242bf\",\"panelSectionHeader.background\":\"#80808051\",\"terminal.background\":\"#f6f6f6\",\"widget.shadow\":\"#d9d9d9\",\"editorWidget.background\":\"#f0f0f0\",\"editorWidget.foreground\":\"#403f53\",\"editorWidget.border\":\"#d9d9d9\",\"quickInput.background\":\"#f0f0f0\",\"quickInput.foreground\":\"#403f53\",\"quickInputTitle.background\":\"#0000000f\",\"pickerGroup.foreground\":\"#403f53\",\"pickerGroup.border\":\"#d9d9d9\",\"editor.hoverHighlightBackground\":\"#339cec33\",\"editorHoverWidget.background\":\"#f0f0f0\",\"editorHoverWidget.foreground\":\"#403f53\",\"editorHoverWidget.border\":\"#d9d9d9\",\"editorHoverWidget.statusBarBackground\":\"#e4e4e4\",\"titleBar.activeBackground\":\"var(--sl-color-gray-6)\",\"titleBar.activeForeground\":\"var(--sl-color-text)\",\"titleBar.inactiveBackground\":\"#f0f0f099\",\"titleBar.inactiveForeground\":\"#33333399\",\"titleBar.border\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"toolbar.hoverBackground\":\"#b8b8b850\",\"toolbar.activeBackground\":\"#a6a6a650\",\"tab.activeBackground\":\"#f6f6f6\",\"tab.unfocusedActiveBackground\":\"#f6f6f6\",\"tab.inactiveBackground\":\"#f0f0f0\",\"tab.unfocusedInactiveBackground\":\"#f0f0f0\",\"tab.activeForeground\":\"var(--sl-color-text)\",\"tab.inactiveForeground\":\"#403f53\",\"tab.unfocusedActiveForeground\":\"#403f53b3\",\"tab.unfocusedInactiveForeground\":\"#403f5380\",\"tab.hoverBackground\":null,\"tab.unfocusedHoverBackground\":null,\"tab.hoverForeground\":null,\"tab.unfocusedHoverForeground\":null,\"tab.border\":\"#f0f0f0\",\"tab.lastPinnedBorder\":\"#a9a9a9\",\"tab.activeBorder\":\"transparent\",\"tab.unfocusedActiveBorder\":null,\"tab.activeBorderTop\":\"var(--sl-color-accent)\",\"tab.unfocusedActiveBorderTop\":null,\"tab.hoverBorder\":null,\"tab.unfocusedHoverBorder\":null,\"tab.activeModifiedBorder\":\"#2aa298\",\"tab.inactiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedActiveModifiedBorder\":\"#93a1a1\",\"tab.unfocusedInactiveModifiedBorder\":\"#93a1a1\",\"badge.background\":\"#2aa298\",\"badge.foreground\":\"#f0f0f0\",\"button.background\":\"#2aa298\",\"button.foreground\":\"#f0f0f0\",\"button.border\":null,\"button.separator\":\"#f0f0f066\",\"button.hoverBackground\":\"#22827a\",\"button.secondaryBackground\":\"#5f6a79\",\"button.secondaryForeground\":\"#ffffff\",\"button.secondaryHoverBackground\":\"#4c5561\",\"dropdown.background\":\"#f0f0f0\",\"dropdown.foreground\":\"#403f53\",\"dropdown.border\":\"#d9d9d9\",\"list.activeSelectionBackground\":\"#d3e8f8\",\"list.activeSelectionForeground\":\"#403f53\",\"tree.indentGuidesStroke\":\"#a9a9a9\",\"input.background\":\"#f0f0f0\",\"input.foreground\":\"#403f53\",\"input.placeholderForeground\":\"#93a1a1\",\"inputOption.activeBorder\":\"#2aa298\",\"inputOption.hoverBackground\":\"#b8b8b850\",\"inputOption.activeBackground\":\"#93a1a133\",\"inputOption.activeForeground\":\"#000000\",\"inputValidation.infoBackground\":\"#f0f0f0\",\"inputValidation.infoBorder\":\"#d0d0d0\",\"inputValidation.warningBackground\":\"#daaa01\",\"inputValidation.warningBorder\":\"#e0af02\",\"inputValidation.errorBackground\":\"#f76e6e\",\"inputValidation.errorBorder\":\"#de3d3b\",\"keybindingLabel.background\":\"#dddddd66\",\"keybindingLabel.foreground\":\"#555555\",\"keybindingLabel.border\":\"#cccccc66\",\"keybindingLabel.bottomBorder\":\"#bbbbbb66\",\"menu.foreground\":\"#403f53\",\"menu.background\":\"#f0f0f0\",\"menu.selectionForeground\":\"#403f53\",\"menu.selectionBackground\":\"#d3e8f8\",\"menu.separatorBackground\":\"#d4d4d4\",\"editor.snippetTabstopHighlightBackground\":\"#0a326433\",\"editor.snippetFinalTabstopHighlightBorder\":\"#0a326480\",\"terminal.ansiBlack\":\"#403f53\",\"terminal.ansiRed\":\"#de3d3b\",\"terminal.ansiGreen\":\"#08916a\",\"terminal.ansiYellow\":\"#e0af02\",\"terminal.ansiBlue\":\"#288ed7\",\"terminal.ansiMagenta\":\"#d6438a\",\"terminal.ansiCyan\":\"#2aa298\",\"terminal.ansiWhite\":\"#f0f0f0\",\"terminal.ansiBrightBlack\":\"#403f53\",\"terminal.ansiBrightRed\":\"#de3d3b\",\"terminal.ansiBrightGreen\":\"#08916a\",\"terminal.ansiBrightYellow\":\"#daaa01\",\"terminal.ansiBrightBlue\":\"#288ed7\",\"terminal.ansiBrightMagenta\":\"#d6438a\",\"terminal.ansiBrightCyan\":\"#2aa298\",\"terminal.ansiBrightWhite\":\"#f0f0f0\",\"selection.background\":\"#7a8181ad\",\"notifications.background\":\"#f0f0f0\",\"notifications.foreground\":\"#403f53\",\"notificationLink.foreground\":\"#994cc3\",\"notifications.border\":\"#cccccc\",\"notificationCenter.border\":\"#cccccc\",\"notificationToast.border\":\"#cccccc\",\"notificationCenterHeader.foreground\":\"#403f53\",\"notificationCenterHeader.background\":\"#f0f0f0\",\"input.border\":\"#d9d9d9\",\"progressBar.background\":\"#2aa298\",\"list.inactiveSelectionBackground\":\"#e0e7ea\",\"list.inactiveSelectionForeground\":\"#403f53\",\"list.focusBackground\":\"#d3e8f8\",\"list.hoverBackground\":\"#d3e8f8\",\"list.focusForeground\":\"#403f53\",\"list.hoverForeground\":\"#403f53\",\"list.highlightForeground\":\"#403f53\",\"list.errorForeground\":\"#e64d49\",\"list.warningForeground\":\"#daaa01\",\"activityBar.background\":\"#f0f0f0\",\"activityBar.foreground\":\"#403f53\",\"activityBar.dropBackground\":\"#d0d0d0\",\"activityBarBadge.background\":\"#403f53\",\"activityBarBadge.foreground\":\"#f0f0f0\",\"activityBar.border\":\"#f0f0f0\",\"sideBar.background\":\"#f0f0f0\",\"sideBar.foreground\":\"#403f53\",\"sideBarTitle.foreground\":\"#403f53\",\"sideBar.border\":\"#f0f0f0\",\"editorGroup.background\":\"#f6f6f6\",\"editorCursor.foreground\":\"#90a7b2\",\"editor.wordHighlightBackground\":\"#339cec33\",\"editor.wordHighlightStrongBackground\":\"#007dd659\",\"editor.lineHighlightBackground\":\"#f0f0f0\",\"editor.rangeHighlightBackground\":\"#7497a633\",\"editorWhitespace.foreground\":\"#d9d9d9\",\"editorIndentGuide.background\":\"#d9d9d9\",\"editorCodeLens.foreground\":\"#403f53\",\"editorBracketMatch.background\":\"#d3e8f8\",\"editorBracketMatch.border\":\"#2aa298\",\"editorError.border\":\"#fbfbfb\",\"editorWarning.border\":\"#daaa01\",\"editorGutter.addedBackground\":\"#49d0c5\",\"editorGutter.modifiedBackground\":\"#6fbef6\",\"editorGutter.deletedBackground\":\"#f76e6e\",\"editorRuler.foreground\":\"#d9d9d9\",\"editorOverviewRuler.errorForeground\":\"#e64d49\",\"editorOverviewRuler.warningForeground\":\"#daaa01\",\"editorSuggestWidget.background\":\"#f0f0f0\",\"editorSuggestWidget.foreground\":\"#403f53\",\"editorSuggestWidget.highlightForeground\":\"#403f53\",\"editorSuggestWidget.selectedBackground\":\"#d3e8f8\",\"editorSuggestWidget.border\":\"#d9d9d9\",\"debugExceptionWidget.background\":\"#f0f0f0\",\"debugExceptionWidget.border\":\"#d9d9d9\",\"editorMarkerNavigation.background\":\"#d0d0d0\",\"editorMarkerNavigationError.background\":\"#f76e6e\",\"editorMarkerNavigationWarning.background\":\"#daaa01\",\"debugToolBar.background\":\"#f0f0f0\",\"extensionButton.prominentBackground\":\"#2aa298\",\"extensionButton.prominentForeground\":\"#f0f0f0\",\"statusBar.background\":\"#f0f0f0\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f0f0f0\",\"statusBar.debuggingForeground\":\"#403f53\",\"statusBar.foreground\":\"#403f53\",\"statusBar.noFolderBackground\":\"#f0f0f0\",\"statusBar.noFolderForeground\":\"#403f53\",\"peekView.border\":\"#d9d9d9\",\"peekViewEditor.background\":\"#f6f6f6\",\"peekViewEditorGutter.background\":\"#f6f6f6\",\"peekViewEditor.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.background\":\"#f0f0f0\",\"peekViewResult.fileForeground\":\"#403f53\",\"peekViewResult.lineForeground\":\"#403f53\",\"peekViewResult.matchHighlightBackground\":\"#49d0c5\",\"peekViewResult.selectionBackground\":\"#e0e7ea\",\"peekViewResult.selectionForeground\":\"#403f53\",\"peekViewTitle.background\":\"#f0f0f0\",\"peekViewTitleLabel.foreground\":\"#403f53\",\"peekViewTitleDescription.foreground\":\"#403f53\",\"terminal.foreground\":\"#403f53\"},\"fg\":\"#403f53\",\"bg\":\"#f6f7f9\",\"semanticHighlighting\":false,\"settings\":[{\"name\":\"Changed\",\"scope\":[\"markup.changed\",\"meta.diff.header.git\",\"meta.diff.header.from-file\",\"meta.diff.header.to-file\"],\"settings\":{\"foreground\":\"#556484\"}},{\"name\":\"Deleted\",\"scope\":[\"markup.deleted.diff\"],\"settings\":{\"foreground\":\"#ae3c3afd\"}},{\"name\":\"Inserted\",\"scope\":[\"markup.inserted.diff\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Global settings\",\"settings\":{\"background\":\"#011627\",\"foreground\":\"#403f53\"}},{\"name\":\"Comment\",\"scope\":[\"comment\"],\"settings\":{\"foreground\":\"#5f636f\"}},{\"name\":\"String\",\"scope\":[\"string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"String Quoted\",\"scope\":[\"string.quoted\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Support Constant Math\",\"scope\":[\"support.constant.math\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Number\",\"scope\":[\"constant.numeric\",\"constant.character.numeric\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Built-in constant\",\"scope\":[\"constant.language\",\"punctuation.definition.constant\",\"variable.other.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"User-defined constant\",\"scope\":[\"constant.character\",\"constant.other\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Constant Character Escape\",\"scope\":[\"constant.character.escape\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"RegExp String\",\"scope\":[\"string.regexp\",\"string.regexp keyword.other\"],\"settings\":{\"foreground\":\"#3a688f\"}},{\"name\":\"Comma in functions\",\"scope\":[\"meta.function punctuation.separator.comma\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Variable\",\"scope\":[\"variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword\",\"scope\":[\"punctuation.accessor\",\"keyword\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage\",\"scope\":[\"storage\",\"meta.var.expr\",\"meta.class meta.method.declaration meta.var.expr storage.type.js\",\"storage.type.property.js\",\"storage.type.property.ts\",\"storage.type.property.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Storage type\",\"scope\":[\"storage.type.function.arrow.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Class name\",\"scope\":[\"entity.name.class\",\"meta.class entity.name.type.class\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Inherited class\",\"scope\":[\"entity.other.inherited-class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Function name\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Meta Tag\",\"scope\":[\"punctuation.definition.tag\",\"meta.tag\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Tag names\",\"scope\":[\"entity.name.tag\",\"meta.tag.other.html\",\"meta.tag.other.js\",\"meta.tag.other.tsx\",\"entity.name.tag.tsx\",\"entity.name.tag.js\",\"entity.name.tag\",\"meta.tag.js\",\"meta.tag.tsx\",\"meta.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Tag attribute\",\"scope\":[\"entity.other.attribute-name\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Entity Name Tag Custom\",\"scope\":[\"entity.name.tag.custom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Library (function & constant)\",\"scope\":[\"support.function\",\"support.constant\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Constant Property Value meta\",\"scope\":[\"support.constant.meta.property-value\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Library class/type\",\"scope\":[\"support.type\",\"support.class\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Support Variable DOM\",\"scope\":[\"support.variable.dom\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid\",\"scope\":[\"invalid\"],\"settings\":{\"foreground\":\"#bb2060\"}},{\"name\":\"Invalid deprecated\",\"scope\":[\"invalid.deprecated\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Keyword Operator\",\"scope\":[\"keyword.operator\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Keyword Operator Relational\",\"scope\":[\"keyword.operator.relational\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Assignment\",\"scope\":[\"keyword.operator.assignment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Arithmetic\",\"scope\":[\"keyword.operator.arithmetic\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Bitwise\",\"scope\":[\"keyword.operator.bitwise\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Increment\",\"scope\":[\"keyword.operator.increment\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Operator Ternary\",\"scope\":[\"keyword.operator.ternary\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Double-Slashed Comment\",\"scope\":[\"comment.line.double-slash\"],\"settings\":{\"foreground\":\"#5d6376\"}},{\"name\":\"Object\",\"scope\":[\"object\"],\"settings\":{\"foreground\":\"#58656a\"}},{\"name\":\"Null\",\"scope\":[\"constant.language.null\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Meta Brace\",\"scope\":[\"meta.brace\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Meta Delimiter Period\",\"scope\":[\"meta.delimiter.period\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition String\",\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuation Definition String Markdown\",\"scope\":[\"punctuation.definition.string.begin.markdown\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Boolean\",\"scope\":[\"constant.language.boolean\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Object Comma\",\"scope\":[\"object.comma\"],\"settings\":{\"foreground\":\"#646464\"}},{\"name\":\"Variable Parameter Function\",\"scope\":[\"variable.parameter.function\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Support Type Property Name & entity name tags\",\"scope\":[\"support.type.vendor.property-name\",\"support.constant.vendor.property-value\",\"support.type.property-name\",\"meta.property-list entity.name.tag\"],\"settings\":{\"foreground\":\"#096e72\",\"fontStyle\":\"\"}},{\"name\":\"Entity Name tag reference in stylesheets\",\"scope\":[\"meta.property-list entity.name.tag.reference\"],\"settings\":{\"foreground\":\"#286d70\"}},{\"name\":\"Constant Other Color RGB Value Punctuation Definition Constant\",\"scope\":[\"constant.other.color.rgb-value punctuation.definition.constant\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Constant Other Color\",\"scope\":[\"constant.other.color\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Keyword Other Unit\",\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Selector\",\"scope\":[\"meta.selector\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Entity Other Attribute Name Id\",\"scope\":[\"entity.other.attribute-name.id\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Meta Property Name\",\"scope\":[\"meta.property-name\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Doctypes\",\"scope\":[\"entity.name.tag.doctype\",\"meta.tag.sgml.doctype\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Punctuation Definition Parameters\",\"scope\":[\"punctuation.definition.parameters\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Keyword Control Operator\",\"scope\":[\"keyword.control.operator\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Keyword Operator Logical\",\"scope\":[\"keyword.operator.logical\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Variable Instances\",\"scope\":[\"variable.instance\",\"variable.other.instance\",\"variable.readwrite.instance\",\"variable.other.readwrite.instance\",\"variable.other.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Property Other object property\",\"scope\":[\"variable.other.object.property\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Variable Property Other object\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"fontStyle\":\"\"}},{\"name\":\"Entity Name Function\",\"scope\":[\"entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Keyword Operator Comparison, imports, returns and Keyword Operator Ruby\",\"scope\":[\"keyword.operator.comparison\",\"keyword.control.flow.js\",\"keyword.control.flow.ts\",\"keyword.control.flow.tsx\",\"keyword.control.ruby\",\"keyword.control.module.ruby\",\"keyword.control.class.ruby\",\"keyword.control.def.ruby\",\"keyword.control.loop.js\",\"keyword.control.loop.ts\",\"keyword.control.import.js\",\"keyword.control.import.ts\",\"keyword.control.import.tsx\",\"keyword.control.from.js\",\"keyword.control.from.ts\",\"keyword.control.from.tsx\",\"keyword.operator.instanceof.js\",\"keyword.operator.expression.instanceof.ts\",\"keyword.operator.expression.instanceof.tsx\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Keyword Control Conditional\",\"scope\":[\"keyword.control.conditional.js\",\"keyword.control.conditional.ts\",\"keyword.control.switch.js\",\"keyword.control.switch.ts\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"\"}},{\"name\":\"Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords\",\"scope\":[\"support.constant\",\"keyword.other.special-method\",\"keyword.other.new\",\"keyword.other.debugger\",\"keyword.control\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Function\",\"scope\":[\"support.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Invalid Broken\",\"scope\":[\"invalid.broken\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Invalid Unimplemented\",\"scope\":[\"invalid.unimplemented\"],\"settings\":{\"foreground\":\"#486e26\"}},{\"name\":\"Invalid Illegal\",\"scope\":[\"invalid.illegal\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Language Variable\",\"scope\":[\"variable.language\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Support Variable Property\",\"scope\":[\"support.variable.property\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Variable Function\",\"scope\":[\"variable.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variable Interpolation\",\"scope\":[\"variable.interpolation\"],\"settings\":{\"foreground\":\"#a64348\"}},{\"name\":\"Meta Function Call\",\"scope\":[\"meta.function-call\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Punctuation Section Embedded\",\"scope\":[\"punctuation.section.embedded\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Punctuation Tweaks\",\"scope\":[\"punctuation.terminator.expression\",\"punctuation.definition.arguments\",\"punctuation.definition.array\",\"punctuation.section.array\",\"meta.array\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"More Punctuation Tweaks\",\"scope\":[\"punctuation.definition.list.begin\",\"punctuation.definition.list.end\",\"punctuation.separator.arguments\",\"punctuation.definition.list\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Template Strings\",\"scope\":[\"string.template meta.template.expression\"],\"settings\":{\"foreground\":\"#b23834\"}},{\"name\":\"Backticks(``) in Template Strings\",\"scope\":[\"string.template punctuation.definition.string\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Italics\",\"scope\":[\"italic\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Bold\",\"scope\":[\"bold\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Quote\",\"scope\":[\"quote\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Raw Code\",\"scope\":[\"raw\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CoffeeScript Variable Assignment\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#186e73\"}},{\"name\":\"CoffeeScript Parameter Function\",\"scope\":[\"variable.parameter.function.coffee\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"CoffeeScript Assignments\",\"scope\":[\"variable.assignment.coffee\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C# Readwrite Variables\",\"scope\":[\"variable.other.readwrite.cs\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C# Classes & Storage types\",\"scope\":[\"entity.name.type.class.cs\",\"storage.type.cs\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"C# Namespaces\",\"scope\":[\"entity.name.type.namespace.cs\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Tag names in Stylesheets\",\"scope\":[\"entity.name.tag.css\",\"entity.name.tag.less\",\"entity.name.tag.custom.css\",\"support.constant.property-value.css\"],\"settings\":{\"foreground\":\"#984e4d\",\"fontStyle\":\"\"}},{\"name\":\"Wildcard(*) selector in Stylesheets\",\"scope\":[\"entity.name.tag.wildcard.css\",\"entity.name.tag.wildcard.less\",\"entity.name.tag.wildcard.scss\",\"entity.name.tag.wildcard.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"CSS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Attribute Name for CSS\",\"scope\":[\"meta.attribute-selector.css entity.other.attribute-name.attribute\",\"variable.other.readwrite.js\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Elixir Classes\",\"scope\":[\"source.elixir support.type.elixir\",\"source.elixir meta.module.elixir entity.name.class.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Functions\",\"scope\":[\"source.elixir entity.name.function\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Constants\",\"scope\":[\"source.elixir constant.other.symbol.elixir\",\"source.elixir constant.other.keywords.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir String Punctuations\",\"scope\":[\"source.elixir punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir\",\"scope\":[\"source.elixir variable.other.readwrite.module.elixir\",\"source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Elixir Binary Punctuations\",\"scope\":[\"source.elixir .punctuation.binary.elixir\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Closure Constant Keyword\",\"scope\":[\"constant.keyword.clojure\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Function Calls\",\"scope\":[\"source.go meta.function-call.go\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Go Keywords\",\"scope\":[\"source.go keyword.package.go\",\"source.go keyword.import.go\",\"source.go keyword.function.go\",\"source.go keyword.type.go\",\"source.go keyword.struct.go\",\"source.go keyword.interface.go\",\"source.go keyword.const.go\",\"source.go keyword.var.go\",\"source.go keyword.map.go\",\"source.go keyword.channel.go\",\"source.go keyword.control.go\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"Go Constants e.g. nil, string format (%s, %d, etc.)\",\"scope\":[\"source.go constant.language.go\",\"source.go constant.other.placeholder.go\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Functions\",\"scope\":[\"entity.name.function.preprocessor.cpp\",\"entity.scope.name.cpp\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"C++ Meta Namespace\",\"scope\":[\"meta.namespace-block.cpp\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"C++ Language Primitive Storage\",\"scope\":[\"storage.type.language.primitive.cpp\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"C++ Preprocessor Macro\",\"scope\":[\"meta.preprocessor.macro.cpp\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"C++ Variable Parameter\",\"scope\":[\"variable.parameter\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Powershell Variables\",\"scope\":[\"variable.other.readwrite.powershell\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Powershell Function\",\"scope\":[\"support.function.powershell\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"ID Attribute Name in HTML\",\"scope\":[\"entity.other.attribute-name.id.html\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"HTML Punctuation Definition Tag\",\"scope\":[\"punctuation.definition.tag.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"HTML Doctype\",\"scope\":[\"meta.tag.sgml.doctype.html\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"JavaScript Classes\",\"scope\":[\"meta.class entity.name.type.class.js\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.js\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JavaScript Terminator\",\"scope\":[\"terminator.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Meta Punctuation Definition\",\"scope\":[\"meta.js punctuation.definition.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Entity Names in Code Documentations\",\"scope\":[\"entity.name.type.instance.jsdoc\",\"entity.name.type.instance.phpdoc\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"Other Variables in Code Documentations\",\"scope\":[\"variable.other.jsdoc\",\"variable.other.phpdoc\"],\"settings\":{\"foreground\":\"#3e697c\"}},{\"name\":\"JavaScript module imports and exports\",\"scope\":[\"variable.other.meta.import.js\",\"meta.import.js variable.other\",\"variable.other.meta.export.js\",\"meta.export.js variable.other\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variable Parameter Function\",\"scope\":[\"variable.parameter.function.js\"],\"settings\":{\"foreground\":\"#555ea2\"}},{\"name\":\"JavaScript[React] Variable Other Object\",\"scope\":[\"variable.other.object.js\",\"variable.other.object.jsx\",\"variable.object.property.js\",\"variable.object.property.jsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Variables\",\"scope\":[\"variable.js\",\"variable.other.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JavaScript Entity Name Type\",\"scope\":[\"entity.name.type.js\",\"entity.name.type.module.js\"],\"settings\":{\"foreground\":\"#111111\",\"fontStyle\":\"\"}},{\"name\":\"JavaScript Support Classes\",\"scope\":[\"support.class.js\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"JSON Property Names\",\"scope\":[\"support.type.property-name.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"JSON Support Constants\",\"scope\":[\"support.constant.json\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"JSON Property values (string)\",\"scope\":[\"meta.structure.dictionary.value.json string.quoted.double\"],\"settings\":{\"foreground\":\"#7c5686\"}},{\"name\":\"Strings in JSON values\",\"scope\":[\"string.quoted.double.json punctuation.definition.string.json\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Specific JSON Property values like null\",\"scope\":[\"meta.structure.dictionary.json meta.structure.dictionary.value constant.language\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"JavaScript Other Variable\",\"scope\":[\"variable.other.object.js\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Variables\",\"scope\":[\"variable.other.ruby\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Ruby Class\",\"scope\":[\"entity.name.type.class.ruby\"],\"settings\":{\"foreground\":\"#984e4d\"}},{\"name\":\"Ruby Hashkeys\",\"scope\":[\"constant.language.symbol.hashkey.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Ruby Symbols\",\"scope\":[\"constant.language.symbol.ruby\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"LESS Tag names\",\"scope\":[\"entity.name.tag.less\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"LESS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.css\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Attribute Name for LESS\",\"scope\":[\"meta.attribute-selector.less entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Markdown Headings\",\"scope\":[\"markup.heading.markdown\",\"markup.heading.setext.1.markdown\",\"markup.heading.setext.2.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Italics\",\"scope\":[\"markup.italic.markdown\"],\"settings\":{\"foreground\":\"#8844ae\",\"fontStyle\":\"italic\"}},{\"name\":\"Markdown Bold\",\"scope\":[\"markup.bold.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\",\"fontStyle\":\"bold\"}},{\"name\":\"Markdown Quote + others\",\"scope\":[\"markup.quote.markdown\"],\"settings\":{\"foreground\":\"#5c6285\"}},{\"name\":\"Markdown Raw Code + others\",\"scope\":[\"markup.inline.raw.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown Links\",\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"foreground\":\"#954f5a\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Link Title and Description\",\"scope\":[\"string.other.link.title.markdown\",\"string.other.link.description.markdown\"],\"settings\":{\"foreground\":\"#403f53\",\"fontStyle\":\"underline\"}},{\"name\":\"Markdown Punctuation\",\"scope\":[\"punctuation.definition.string.markdown\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\",\"meta.link.inline.markdown punctuation.definition.string\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown MetaData Punctuation\",\"scope\":[\"punctuation.definition.metadata.markdown\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Markdown List Punctuation\",\"scope\":[\"beginning.punctuation.definition.list.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Markdown Inline Raw String\",\"scope\":[\"markup.inline.raw.string.markdown\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"PHP Variables\",\"scope\":[\"variable.other.php\",\"variable.other.property.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Support Classes in PHP\",\"scope\":[\"support.class.php\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Punctuations in PHP function calls\",\"scope\":[\"meta.function-call.php punctuation\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"PHP Global Variables\",\"scope\":[\"variable.other.global.php\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Declaration Punctuation in PHP Global Variables\",\"scope\":[\"variable.other.global.php punctuation.definition.variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Language Constants in Python\",\"scope\":[\"constant.language.python\"],\"settings\":{\"foreground\":\"#a24848\"}},{\"name\":\"Python Function Parameter and Arguments\",\"scope\":[\"variable.parameter.function.python\",\"meta.function-call.arguments.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Function Call\",\"scope\":[\"meta.function-call.python\",\"meta.function-call.generic.python\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"Punctuations in Python\",\"scope\":[\"punctuation.python\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Decorator Functions in Python\",\"scope\":[\"entity.name.function.decorator.python\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Python Language Variable\",\"scope\":[\"source.python variable.language.special\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Python import control keyword\",\"scope\":[\"keyword.control\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"SCSS Variable\",\"scope\":[\"variable.scss\",\"variable.sass\",\"variable.parameter.url.scss\",\"variable.parameter.url.sass\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"Variables in SASS At-Rules\",\"scope\":[\"source.css.scss meta.at-rule variable\",\"source.css.sass meta.at-rule variable\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"Attribute Name for SASS\",\"scope\":[\"meta.attribute-selector.scss entity.other.attribute-name.attribute\",\"meta.attribute-selector.sass entity.other.attribute-name.attribute\"],\"settings\":{\"foreground\":\"#aa0982\"}},{\"name\":\"Tag names in SASS\",\"scope\":[\"entity.name.tag.scss\",\"entity.name.tag.sass\"],\"settings\":{\"foreground\":\"#096e72\"}},{\"name\":\"SASS Keyword Other Unit\",\"scope\":[\"keyword.other.unit.scss\",\"keyword.other.unit.sass\"],\"settings\":{\"foreground\":\"#8844ae\"}},{\"name\":\"TypeScript[React] Variables and Object Properties\",\"scope\":[\"variable.other.readwrite.alias.ts\",\"variable.other.readwrite.alias.tsx\",\"variable.other.readwrite.ts\",\"variable.other.readwrite.tsx\",\"variable.other.object.ts\",\"variable.other.object.tsx\",\"variable.object.property.ts\",\"variable.object.property.tsx\",\"variable.other.ts\",\"variable.other.tsx\",\"variable.tsx\",\"variable.ts\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Entity Name Types\",\"scope\":[\"entity.name.type.ts\",\"entity.name.type.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript[React] Node Classes\",\"scope\":[\"support.class.node.ts\",\"support.class.node.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Entity Name Types as Parameters\",\"scope\":[\"meta.type.parameters.ts entity.name.type\",\"meta.type.parameters.tsx entity.name.type\"],\"settings\":{\"foreground\":\"#4d667b\"}},{\"name\":\"TypeScript[React] Import/Export Punctuations\",\"scope\":[\"meta.import.ts punctuation.definition.block\",\"meta.import.tsx punctuation.definition.block\",\"meta.export.ts punctuation.definition.block\",\"meta.export.tsx punctuation.definition.block\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.decorator punctuation.decorator.ts\",\"meta.decorator punctuation.decorator.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"TypeScript[React] Punctuation Decorators\",\"scope\":[\"meta.tag.js meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"YAML Entity Name Tags\",\"scope\":[\"entity.name.tag.yaml\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"JavaScript Variable Other ReadWrite\",\"scope\":[\"variable.other.readwrite.js\",\"variable.parameter\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"Support Class Component\",\"scope\":[\"support.class.component.js\",\"support.class.component.tsx\"],\"settings\":{\"foreground\":\"#aa0982\",\"fontStyle\":\"\"}},{\"name\":\"Text nested in React tags\",\"scope\":[\"meta.jsx.children\",\"meta.jsx.children.js\",\"meta.jsx.children.tsx\"],\"settings\":{\"foreground\":\"#403f53\"}},{\"name\":\"TypeScript Classes\",\"scope\":[\"meta.class entity.name.type.class.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Entity Name Type\",\"scope\":[\"entity.name.type.tsx\",\"entity.name.type.module.tsx\"],\"settings\":{\"foreground\":\"#111111\"}},{\"name\":\"TypeScript Class Variable Keyword\",\"scope\":[\"meta.class.ts meta.var.expr.ts storage.type.ts\",\"meta.class.tsx meta.var.expr.tsx storage.type.tsx\"],\"settings\":{\"foreground\":\"#76578b\"}},{\"name\":\"TypeScript Method Declaration e.g. `constructor`\",\"scope\":[\"meta.method.declaration storage.type.ts\",\"meta.method.declaration storage.type.tsx\"],\"settings\":{\"foreground\":\"#3b61b0\"}},{\"name\":\"normalize font style of certain components\",\"scope\":[\"meta.property-list.css meta.property-value.css variable.other.less\",\"meta.property-list.scss variable.scss\",\"meta.property-list.sass variable.sass\",\"meta.brace\",\"keyword.operator.operator\",\"keyword.operator.or.regexp\",\"keyword.operator.expression.in\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.comparison\",\"keyword.operator.type\",\"keyword.operator\",\"keyword\",\"punctuation.definition.string\",\"punctuation\",\"variable.other.readwrite.js\",\"storage.type\",\"source.css\",\"string.quoted\"],\"settings\":{\"fontStyle\":\"\"}}],\"styleOverrides\":{\"frames\":{\"editorBackground\":\"var(--sl-color-gray-7)\",\"terminalBackground\":\"var(--sl-color-gray-7)\",\"editorActiveTabBackground\":\"var(--sl-color-gray-7)\",\"terminalTitlebarDotsForeground\":\"color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)\",\"terminalTitlebarDotsOpacity\":\"0.75\",\"inlineButtonForeground\":\"var(--sl-color-text)\",\"frameBoxShadowCssValue\":\"none\"},\"textMarkers\":{\"markBackground\":\"#0000001a\",\"markBorderColor\":\"#00000055\"}}}],\"defaultLocale\":\"en\",\"cascadeLayer\":\"starlight.components\",\"styleOverrides\":{\"borderRadius\":\"0px\",\"borderWidth\":\"1px\",\"codePaddingBlock\":\"0.75rem\",\"codePaddingInline\":\"1rem\",\"codeFontFamily\":\"var(--__sl-font-mono)\",\"codeFontSize\":\"var(--sl-text-code)\",\"codeLineHeight\":\"var(--sl-line-height)\",\"uiFontFamily\":\"var(--__sl-font)\",\"textMarkers\":{\"lineDiffIndicatorMarginLeft\":\"0.25rem\",\"defaultChroma\":\"45\",\"backgroundOpacity\":\"60%\"}},\"plugins\":[{\"name\":\"Starlight Plugin\",\"hooks\":{}},{\"name\":\"astro-expressive-code\",\"hooks\":{}}]}]],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false},\"prefetch\":{\"prefetchAll\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[\"en\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":false,\"fallbackType\":\"redirect\"}}}","docs",["Map",11,12,27,28,47,48,66,67,89,90,108,109,127,128,149,150],"index",{"id":11,"data":13,"filePath":25,"digest":26,"deferredRender":16},{"title":14,"description":15,"editUrl":16,"head":17,"template":18,"hero":19,"sidebar":22,"pagefind":16,"draft":23},"CreateHer Fest","Let's build some sample applications!",true,[],"splash",{"tagline":20,"actions":21},"DIALED IN! Answer calls in WebXR.",[],{"hidden":23,"attrs":24},false,{},"src/content/docs/index.mdx","5742d2bb91f1973b","02_setup_application",{"id":27,"data":29,"body":36,"filePath":37,"digest":38,"rendered":39},{"title":30,"description":31,"editUrl":16,"head":32,"template":33,"sidebar":34,"pagefind":16,"draft":23},"Setup Application","Create an application.",[],"doc",{"hidden":23,"attrs":35},{},"> Note: Please make sure to redeem the coupon code to your Vonage account's \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\n\nIn the terminal below, you should see a set up script running asking for your `API key`. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\n\n> Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\n\nIf successful, you should see `APPLICATION READY` with a URL. Click the link to open in a new window or tab.","src/content/docs/02_Setup_Application.md","41ac2dedeb3ab62b",{"html":40,"metadata":41},"\u003Cblockquote>\n\u003Cp>Note: Please make sure to redeem the coupon code to your Vonage account’s \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">dashboard\u003C/a> before continuing. It is needed to purchase a phone number.\u003C/p>\n\u003C/blockquote>\n\u003Cp>In the terminal below, you should see a set up script running asking for your \u003Ccode dir=\"auto\">API key\u003C/code>. Complete the steps in the set up script. This will create an Application with Voice functionality, purchase a phone number, and create the needed Webhook endpoints.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can get your credentials in the \u003Ca href=\"https://dashboard.vonage.com/settings\" target=\"_blank\">Vonage dashboard Settings Page\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>If successful, you should see \u003Ccode dir=\"auto\">APPLICATION READY\u003C/code> with a URL. Click the link to open in a new window or tab.\u003C/p>",{"headings":42,"localImagePaths":43,"remoteImagePaths":44,"frontmatter":45,"imagePaths":46},[],[],[],{"title":30,"description":31},[],"01_create_account",{"id":47,"data":49,"body":55,"filePath":56,"digest":57,"rendered":58},{"title":50,"description":51,"editUrl":16,"head":52,"template":33,"sidebar":53,"pagefind":16,"draft":23},"Create an Account","Create a Vonage account.",[],{"hidden":23,"attrs":54},{},"First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\n\nHere's a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\n\n```html\nDIMFLCHF26\n```\n\n> Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.","src/content/docs/01_Create_Account.md","5828454718840d2d",{"html":59,"metadata":60},"\u003Cp>First, a Vonage account is needed to get the credentials to set up this workshop application. You can sign up for your account here: \u003Ca href=\"https://bit.ly/CHFMiami\" target=\"_blank\">Vonage dashboard\u003C/a>\u003C/p>\n\u003Cp>Here’s a coupon to add money to your \u003Ca href=\"https://dashboard.vonage.com/coupons\" target=\"_blank\">account\u003C/a>:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">DIMFLCHF26\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"DIMFLCHF26\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: Make sure to copy your API Key and API Secret somewhere. We will need it in the next step.\u003C/p>\n\u003C/blockquote>",{"headings":61,"localImagePaths":62,"remoteImagePaths":63,"frontmatter":64,"imagePaths":65},[],[],[],{"title":50,"description":51},[],"03_add_client_sdk",{"id":66,"data":68,"body":74,"filePath":75,"digest":76,"rendered":77},{"title":69,"description":70,"editUrl":16,"head":71,"template":33,"sidebar":72,"pagefind":16,"draft":23},"Add Client SDK","Add Vonage Client SDK to index.html",[],{"hidden":23,"attrs":73},{},"We'll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\n\nThe following code will be placed in the `pages/index.html` file.\n\nFirst, we will need to load the Vonage Client SDK from a CDN (`\u003C!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->`):\n```html\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\">\u003C/script>\n```\n\n> Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\n\n## That's it for the HTML!\n\nEverything else will be handled by XR Blocks.","src/content/docs/03_Add_Client_SDK.md","a37e767e9dc08641",{"html":78,"metadata":79},"\u003Cp>We’ll be creating a WebXR application using \u003Ca href=\"https://xrblocks.github.io\" target=\"_blank\">XR Blocks\u003C/a> that can answer phone calls.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">pages/index.html\u003C/code> file.\u003C/p>\n\u003Cp>First, we will need to load the Vonage Client SDK from a CDN (\u003Ccode dir=\"auto\"><!-- ⌄⌄⌄ Load the Vonage Client SDK ⌄⌄⌄ -->\u003C/code>):\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"html\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C5E478;--1:#3B61B0\">src\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#8844AE\">\u003Cspan style=\"--0:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--0:#CAECE6\">script\u003C/span>\u003Cspan style=\"--0:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"\u003Cscript src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js">\u003C/script>\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cblockquote>\n\u003Cp>Note: You can also install the Client SDK and point to the nodes module folder if you are using a bundler.\u003C/p>\n\u003C/blockquote>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"thats-it-for-the-html\">That’s it for the HTML!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#thats-it-for-the-html\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “That’s it for the HTML!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Everything else will be handled by XR Blocks.\u003C/p>",{"headings":80,"localImagePaths":85,"remoteImagePaths":86,"frontmatter":87,"imagePaths":88},[81],{"depth":82,"slug":83,"text":84},2,"thats-it-for-the-html","That’s it for the HTML!",[],[],{"title":69,"description":70},[],"04_vonage_call_panel",{"id":89,"data":91,"body":97,"filePath":98,"digest":99,"rendered":100},{"title":92,"description":93,"editUrl":16,"head":94,"template":33,"sidebar":95,"pagefind":16,"draft":23},"Vonage Call Panel","Create XR Blocks UI to answer phone calls",[],{"hidden":23,"attrs":96},{},"Now, we'll be creating the UI.\n\nTo recieve phone calls via the Vonage Voice API using the XR Blocks library's \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\n\nTo show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\n\nThe Vonage Voice Client SDK's \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\n\nThe virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\n\nThe following code will be placed in the `static/VonageAudioCall.js` file.\n\nFirst, we will set the Quick Replies that the user can send into the call.\nFind `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code:\n\n```js\nconst QUICK_REPLIES = [\n { label: \"Meeting\", message: \"In a meeting, I'll call you back.\" },\n { label: \"Talk Later\", message: \"Can't talk right now. I'll talk later.\" },\n { label: \"OMW!\", message: \"On my way! Talk soon.\" },\n { label: \"5 Mins\", message: \"Call you back in 5 minutes.\" },\n];\n```\n\nLet's initiate the constructor for our panel with some variables:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n\n```js\nconstructor() {\n super();\n this.token = '';\n this.client = new vonageClientSDK.VonageClient();\n this.callId = null;\n // Keep a reference to the panel so we can destroy it later\n this.panel = null;\n this.statusText = null;\n this.userName = \"XR_User_1\";\n this.grid = null;\n this.controlRow = null;\n this.puppetHead = null;\n this.face = null;\n this.mouth = null;\n this._camWorld = new THREE.Vector3();\n this._headWorld = new THREE.Vector3();\n this.replyPanel = null;\n this.typedTextView = null;\n this._currentTypedText = '';\n this.keyboard = null;\n}\n```\n\nHere's the function to create an Avatar and add the MediaStream for the LipSync feature: `// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄`\n\n```js\n_createAvatar(stream) {\n // Safety: don't create a second avatar if one already exists\n if (this.puppetHead) return;\n\n console.log(\"Creating lipsync avatar...\");\n\n const faceR = 0.1;\n\n const head = new THREE.Group();\n // Position: in front of the user, roughly at face height\n head.position.set(0, xb.user.height, -1.2);\n\n // --- Sphere face mesh ---\n const faceGeom = new THREE.SphereGeometry(faceR, 32, 24);\n const faceMat = new THREE.MeshStandardMaterial({\n color: 0xf2d4b3,\n roughness: 0.6,\n metalness: 0.05,\n });\n const faceMesh = new THREE.Mesh(faceGeom, faceMat);\n head.add(faceMesh);\n\n this.face = new xb.StylizedFace({ showEyes: true });\n head.add(this.face);\n\n this.mouth = new LipsyncMouth(stream, { target: this.face });\n head.add(this.mouth);\n\n this.puppetHead = head;\n this.add(head);\n}\n```\n\nThis function will remove the 3D Avatar when the call is over:\n`// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄`\n\n```js\n_removeAvatar() {\n if (!this.puppetHead) return;\n\n console.log(\"Removing lipsync avatar...\");\n\n if (this.mouth) {\n // Detach from the head group before nulling the reference\n this.mouth.parent?.remove(this.mouth);\n this.mouth = null;\n }\n\n if (this.face) {\n this.face.parent?.remove(this.face);\n // dispose() frees the underlying canvas/texture to avoid memory leaks\n this.face.dispose();\n this.face = null;\n }\n\n this.remove(this.puppetHead);\n this.puppetHead = null;\n}\n```\n\nHere's the function to create the panel:\n`// ⌄⌄⌄ Create Call panel ⌄⌄⌄`\n\n```js\n_createCallPanel(callerName) {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Call UI...\");\n\n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' });\n this.panel.position.set(\n 0,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n\n this.add(this.panel);\n\n this.grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = this.grid.addRow({ weight: 0.7 }).addText({\n text: `Incoming call from ${callerName}...`,\n fontColor: '#ffffff',\n fontSize: 0.08,\n });\n\n this.updateControlRow('INCOMING');\n}\n```\n\nFunction to update the call control section:\n`// ⌄⌄⌄ Update Call controls ⌄⌄⌄`\n\n```js\nupdateControlRow(state) {\n if (!this.grid) return;\n\n // 1. Remove the existing row if it exists\n if (this.controlRow) {\n this.grid.remove(this.controlRow);\n this.controlRow = null;\n this.grid.resetLayout();\n }\n\n // 2. Create a fresh row. It will naturally append below the Status Text.\n // We give it the full remaining weight (0.3 relative to the panel, or flexible)\n this.controlRow = this.grid.addRow({ weight: 0.3 });\n\n if (state === 'INCOMING') {\n // --- ANSWER BUTTON ---\n const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call',\n fontSize: 0.5,\n backgroundColor: '#00ff00'\n });\n answerBtn.onTriggered = () => this._onAnswer();\n\n // --- REJECT BUTTON ---\n const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n rejectBtn.onTriggered = () => this._onReject();\n\n } else if (state === 'CONNECTED') {\n // --- HANGUP BUTTON ---\n // This is a fresh row, so layouts will calculate correctly\n const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({\n text: 'call_end',\n fontSize: 0.5,\n backgroundColor: '#ff0000'\n });\n hangupBtn.onTriggered = () => this._onHangup();\n }\n\n // 3. Force layout update\n this.panel.updateLayouts();\n}\n```\n\nThis function will remove the panel once the call is over:\n`// ⌄⌄⌄ Remove Call panel ⌄⌄⌄`\n\n```js\n_removeCallPanel() {\n if (this.panel) {\n console.log(\"Destroying Call UI...\");\n this.remove(this.panel);\n this.panel = null;\n this.grid = null;\n this.statusText = null;\n this.controlRow = null;\n }\n this._removeReplyPanel();\n}\n```\n\nNow, let's add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\n\nHere's the code to show the Keyboard:\n`// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄`\n\n```js\n_showKeyboard() {\n if (this.keyboard) return;\n\n this.keyboard = new Keyboard();\n // Position it below and aligned with the reply panel\n this.keyboard.position.set(\n 0,\n xb.user.height - 1.35,\n -xb.user.objectDistance + 1\n );\n this.add(this.keyboard);\n\n // Update the display on every keystroke\n this.keyboard.onTextChanged = (text) => {\n this._currentTypedText = text;\n if (this.typedTextView) {\n this.typedTextView.text = text.length > 0 ? text : 'Tap to type...';\n }\n };\n\n // Enter key sends immediately — same as tapping the Send button\n this.keyboard.onEnterPressed = (text) => {\n this._sendTypedText();\n };\n}\n```\n\nIf we want to hide the Keyboard, here's the code:\n`// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄`\n\n```js\n_hideKeyboard() {\n if (!this.keyboard) return;\n this.remove(this.keyboard);\n this.keyboard = null;\n}\n```\n\nTo toggle between showing and hidding the keyboard, we have this code:\n`// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄`\n\n```js\n_toggleKeyboard() {\n this.keyboard ? this._hideKeyboard() : this._showKeyboard();\n}\n```\n\nLet's create the functions that will send the text to be said into the call just in case we can't talk at that moment.\n\nTo send the Quick Replies that we set before:\n`// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄`\n\n```js\n_sendQuickReply(message) {\n if (!this.callId) return;\n console.log(`Sending quick reply: \"${message}\"`);\n\n // Give the user immediate visual feedback in the status bar\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, message)\n .then(() => {\n console.log('Quick reply sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${message}\"`;\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nIn the case we want to carry on the conversation but maybe can't speak (ie in a public space), we can send custom text:\n`// ⌄⌄⌄ Send Custom Text ⌄⌄⌄`\n\n```js\n_sendTypedText() {\n const text = this._currentTypedText.trim();\n if (!text) return;\n if (!this.callId) return;\n\n console.log(`Sending typed text: \"${text}\"`);\n if (this.statusText) this.statusText.text = 'Sending...';\n\n this.client.say(this.callId, text)\n .then(() => {\n console.log('Typed text sent successfully.');\n if (this.statusText) this.statusText.text = `Sent: \"${text}\"`;\n\n // Clear the keyboard buffer and reset the display\n if (this.keyboard) this.keyboard.setText('');\n this._currentTypedText = '';\n if (this.typedTextView) this.typedTextView.text = 'Tap to type...';\n })\n .catch(err => {\n console.error('say() error:', err);\n if (this.statusText) this.statusText.text = 'Failed to send message.';\n });\n}\n```\n\nHere we will create the Reply panel that will hold all the way we can send a text message into the call:\n`// ⌄⌄⌄ Create Reply panel ⌄⌄⌄`\n\n```js\n_createReplyPanel() {\n if (this.replyPanel) return;\n\n this.replyPanel = new xb.SpatialPanel({\n backgroundColor: '#1a1a2ecc',\n width: .75,\n height: 0.9,\n });\n // Offset to the right so it sits beside the main call panel\n this.replyPanel.position.set(\n 0.8,\n xb.user.height - 0.5,\n -xb.user.objectDistance\n );\n this.add(this.replyPanel);\n\n const grid = this.replyPanel.addGrid();\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Quick Replies',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n const pairs = [\n QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ]\n QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ]\n ];\n\n pairs.forEach(pair => {\n const row = grid.addRow({ weight: 0.20 });\n pair.forEach(({ label, message }) => {\n const btn = row.addCol({ weight: 0.5 }).addTextButton({\n text: label,\n fontSize: 0.35,\n backgroundColor: '#2e2e50',\n fontColor: '#ffffff',\n });\n btn.onTriggered = () => this._sendQuickReply(message);\n });\n });\n\n grid.addRow({ weight: 0.06 }).addText({\n text: 'Talk via Text',\n fontColor: '#9b9bff',\n fontSize: 0.055,\n });\n\n this.typedTextView = grid.addRow({ weight: 0.18 }).addText({\n text: 'Tap to type...',\n fontColor: '#ffffff',\n fontSize: 0.065,\n textAlign: 'left',\n });\n\n const actionRow = grid.addRow({ weight: 0.30 });\n\n const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'keyboard',\n fontSize: 0.5,\n backgroundColor: '#2e3a4a',\n });\n kbBtn.onTriggered = () => this._toggleKeyboard();\n\n const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({\n text: 'send',\n fontSize: 0.5,\n backgroundColor: '#1a4a2a',\n });\n sendBtn.onTriggered = () => this._sendTypedText();\n\n this.replyPanel.updateLayouts();\n}\n```\n\nJust like with the Call panel, we will have a function to remove the Reply panel:\n`// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄`\n\n```js\n_removeReplyPanel() {\n this._hideKeyboard();\n if (this.replyPanel) {\n this.remove(this.replyPanel);\n this.replyPanel = null;\n this.typedTextView = null;\n }\n this._currentTypedText = '';\n}\n```\n\nThis function answers the call and updates the status and call control section:\n`// ⌄⌄⌄ Answer call method ⌄⌄⌄`\n\n```js\n_onAnswer() {\n console.log('Answering...');\n this.client.answer(this.callId)\n .then(() => {\n console.log(\"Success answering call.\");\n this.statusText.text = `Call answered.`;\n this.updateControlRow('CONNECTED');\n\n // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\n this._createReplyPanel();\n\n // get media stream\n const audioElement = this.client.getAudioOutputElement();\n if (audioElement && audioElement.srcObject) {\n // This is the active WebRTC MediaStream managed by Vonage\n const remoteStream = audioElement.srcObject;\n console.log('remoteStream: ', remoteStream);\n\n // Example: Grab individual audio tracks from the stream\n const audioTracks = remoteStream.getAudioTracks();\n console.log(\"Active Audio Tracks:\", audioTracks);\n\n // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\n this._createAvatar(remoteStream);\n }\n })\n .catch(error => {\n console.error(\"Error answering call: \", error);\n });\n}\n```\n\nThis function will reject the incoming call and remove the panel:\n`// ⌄⌄⌄ Reject call method ⌄⌄⌄`\n\n```js\n_onReject() {\n console.log('Rejecting...');\n this.client.reject(this.callId)\n .then(() => {\n console.log(\"Success rejecting call.\");\n })\n .catch(error => {\n console.error(\"Error rejecting call: \", error);\n });\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nThis function will hang up the ongoing call and remove the panel:\n`// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ `\n\n```js\n_onHangup() {\n console.log('Hanging up...');\n this.client.hangup(this.callId)\n .then(() => {\n console.log(\"Success hanging up call.\");\n })\n .catch(error => {\n console.error(\"Error hanging up call: \", error);\n });\n // We manually destroy the panel here too, just in case the event lags\n this._removeCallPanel();\n this._removeAvatar();\n}\n```\n\nSet up some listeners for the events that the Vonage Client SDK will emit and what to do:\n`// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄`\n\n```js\nsetupVonageListeners() {\n // --- CREATE UI ON INVITE ---\n this.client.on('callInvite', (callId, from, channelType) => {\n this.callId = callId;\n const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, \"*\")\n console.log(`Incoming call from ${maskedNumber}`);\n\n // Trigger the UI creation here\n this._createCallPanel(maskedNumber);\n });\n\n this.client.on('legStatusUpdate', (callId, legId, status) => {\n console.log(\"status: \", status);\n if (this.statusText) {\n this.statusText.text = `Status: ${status}`;\n }\n });\n\n // --- REMOVE UI ON CANCEL/HANGUP ---\n this.client.on('callInviteCancel', (callId) => {\n console.log(`Call cancelled: ${callId}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n\n this.client.on(\"callHangup\", (callId, callQuality, reason) => {\n console.log(`Call hung up: ${reason}`);\n this.callId = null;\n this._removeCallPanel();\n this._removeAvatar();\n });\n}\n```\n\nGet a token from the server so you can connect to a session:\n`// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ `\n\n```js\nasync connectToVonage(name) {\n try {\n console.log(`Fetching token for ${name}...`);\n\n // 1. Fetch the token (AWAIT the result)\n const response = await fetch(`/token?name=${name}`);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n this.token = data.token;\n console.log(\"Fetched token successfully.\");\n\n // 2. Create the Session (AWAIT the result)\n const sessionId = await this.client.createSession(this.token);\n\n console.log(\"Session created successfully. Session ID:\", sessionId);\n\n // 3. Update UI\n // Instead, update your XR Panel text to show we are ready\n if(this.statusText) {\n this.statusText.text = \"Connected. Waiting for calls...\";\n }\n\n } catch (error) {\n console.error(\"Connection failed:\", error);\n if(this.statusText) this.statusText.text = \"Connection Failed.\";\n }\n}\n```\n\nInitialize the Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n\n```js\ninit() {\n console.log(\"Vonage init!\",this.client);\n this.setupVonageListeners();\n this.connectToVonage(this.userName);\n}\n```","src/content/docs/04_Vonage_Call_Panel.md","e828a2221c12996d",{"html":101,"metadata":102},"\u003Cp>Now, we’ll be creating the UI.\u003C/p>\n\u003Cp>To recieve phone calls via the Vonage Voice API using the XR Blocks library’s \u003Ca href=\"https://xrblocks.github.io/docs/api/classes/SpatialPanel/\" target=\"_blank\">SpatialPanel Class\u003C/a>.\u003C/p>\n\u003Cp>To show the 3D Avatar for the caller, we will use the \u003Ca href=\"https://xrblocks.github.io/docs/manual/Lipsync/\" target=\"_blank\">Lipsync (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The Vonage Voice Client SDK’s \u003Ca href=\"https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/guides/say-call\" target=\"_blank\">Text to Speech\u003C/a> will be used to send the quick replies and typed messages into the call.\u003C/p>\n\u003Cp>The virtual keyboard that allows us to type those messages will come from the \u003Ca href=\"https://xrblocks.github.io/docs/manual/UI/#virtual-keyboard-addon\" target=\"_blank\">Virtual Keyboard (Addon)\u003C/a>.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/VonageAudioCall.js\u003C/code> file.\u003C/p>\n\u003Cp>First, we will set the Quick Replies that the user can send into the call.\nFind \u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄\u003C/code> and add this code:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Meeting\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">In a meeting, I'll call you back.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk Later\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Can't talk right now. I'll talk later.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">OMW!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">On my way! Talk soon.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">{ label: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">5 Mins\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, message: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Call you back in 5 minutes.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> },\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"const QUICK_REPLIES = [ { label: "Meeting", message: "In a meeting, I'll call you back." }, { label: "Talk Later", message: "Can't talk right now. I'll talk later." }, { label: "OMW!", message: "On my way! Talk soon." }, { label: "5 Mins", message: "Call you back in 5 minutes." },];\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s initiate the constructor for our panel with some variables:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">vonageClientSDK\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageClient\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">XR_User_1\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_camWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_headWorld\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Vector3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"constructor() { super(); this.token = ''; this.client = new vonageClientSDK.VonageClient(); this.callId = null; // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.userName = "XR_User_1"; this.grid = null; this.controlRow = null; this.puppetHead = null; this.face = null; this.mouth = null; this._camWorld = new THREE.Vector3(); this._headWorld = new THREE.Vector3(); this.replyPanel = null; this.typedTextView = null; this._currentTypedText = ''; this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create an Avatar and add the MediaStream for the LipSync feature: \u003Ccode dir=\"auto\">// ⌄⌄⌄ Create 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Safety: don't create a second avatar if one already exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceR\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Group\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position: in front of the user, roughly at face height\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- Sphere face mesh ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceGeom\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SphereGeometry\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceR\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">32\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">24\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMat\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">MeshStandardMaterial\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">color: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0xf2d4b3\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">roughness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.6\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">metalness: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.05\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">THREE\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Mesh\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceGeom\u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">faceMat\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">faceMesh\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">StylizedFace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ showEyes: \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">true\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">LipsyncMouth\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">stream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, { target: \u003C/span>\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">head\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">head\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createAvatar(stream) { // Safety: don't create a second avatar if one already exists if (this.puppetHead) return; console.log("Creating lipsync avatar..."); const faceR = 0.1; const head = new THREE.Group(); // Position: in front of the user, roughly at face height head.position.set(0, xb.user.height, -1.2); // --- Sphere face mesh --- const faceGeom = new THREE.SphereGeometry(faceR, 32, 24); const faceMat = new THREE.MeshStandardMaterial({ color: 0xf2d4b3, roughness: 0.6, metalness: 0.05, }); const faceMesh = new THREE.Mesh(faceGeom, faceMat); head.add(faceMesh); this.face = new xb.StylizedFace({ showEyes: true }); head.add(this.face); this.mouth = new LipsyncMouth(stream, { target: this.face }); head.add(this.mouth); this.puppetHead = head; this.add(head);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the 3D Avatar when the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove 3D Avatar ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Removing lipsync avatar...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Detach from the head group before nulling the reference\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">mouth\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">mouth\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">parent\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// dispose() frees the underlying canvas/texture to avoid memory leaks\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">face\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">dispose\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">face\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">puppetHead\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeAvatar() { if (!this.puppetHead) return; console.log("Removing lipsync avatar..."); if (this.mouth) { // Detach from the head group before nulling the reference this.mouth.parent?.remove(this.mouth); this.mouth = null; } if (this.face) { this.face.parent?.remove(this.face); // dispose() frees the underlying canvas/texture to avoid memory leaks this.face.dispose(); this.face = null; } this.remove(this.puppetHead); this.puppetHead = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here’s the function to create the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callerName\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.7\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callerName\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.08\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createCallPanel(callerName) { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Call UI..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.panel); this.grid = this.panel.addGrid(); // 2. Status Text this.statusText = this.grid.addRow({ weight: 0.7 }).addText({ text: `Incoming call from ${callerName}...`, fontColor: '#ffffff', fontSize: 0.08, }); this.updateControlRow('INCOMING');}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to update the call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Update Call controls ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Remove the existing row if it exists\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">resetLayout\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create a fresh row. It will naturally append below the Status Text.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We give it the full remaining weight (0.3 relative to the panel, or flexible)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.3\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> });\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">INCOMING\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- ANSWER BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#00ff00\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">answerBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REJECT BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">rejectBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">else\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">state\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">===\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- HANGUP BUTTON ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is a fresh row, so layouts will calculate correctly\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">controlRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">call_end\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ff0000\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">hangupBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Force layout update\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"updateControlRow(state) { if (!this.grid) return; // 1. Remove the existing row if it exists if (this.controlRow) { this.grid.remove(this.controlRow); this.controlRow = null; this.grid.resetLayout(); } // 2. Create a fresh row. It will naturally append below the Status Text. // We give it the full remaining weight (0.3 relative to the panel, or flexible) this.controlRow = this.grid.addRow({ weight: 0.3 }); if (state === 'INCOMING') { // --- ANSWER BUTTON --- const answerBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call', fontSize: 0.5, backgroundColor: '#00ff00' }); answerBtn.onTriggered = () => this._onAnswer(); // --- REJECT BUTTON --- const rejectBtn = this.controlRow.addCol({ weight: 0.5 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); rejectBtn.onTriggered = () => this._onReject(); } else if (state === 'CONNECTED') { // --- HANGUP BUTTON --- // This is a fresh row, so layouts will calculate correctly const hangupBtn = this.controlRow.addCol({ weight: 1 }).addIconButton({ text: 'call_end', fontSize: 0.5, backgroundColor: '#ff0000' }); hangupBtn.onTriggered = () => this._onHangup(); } // 3. Force layout update this.panel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will remove the panel once the call is over:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Call panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Destroying Call UI...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">controlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeCallPanel() { if (this.panel) { console.log("Destroying Call UI..."); this.remove(this.panel); this.panel = null; this.grid = null; this.statusText = null; this.controlRow = null; } this._removeReplyPanel();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Now, let’s add the Virtual Keyboard that will allow us to send text messages that will be spoken into the call.\u003C/p>\n\u003Cp>Here’s the code to show the Keyboard:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Show Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Position it below and aligned with the reply panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1.35\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">+\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Update the display on every keystroke\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTextChanged\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">length\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Enter key sends immediately — same as tapping the Send button\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onEnterPressed\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">};\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_showKeyboard() { if (this.keyboard) return; this.keyboard = new Keyboard(); // Position it below and aligned with the reply panel this.keyboard.position.set( 0, xb.user.height - 1.35, -xb.user.objectDistance + 1 ); this.add(this.keyboard); // Update the display on every keystroke this.keyboard.onTextChanged = (text) => { this._currentTypedText = text; if (this.typedTextView) { this.typedTextView.text = text.length > 0 ? text : 'Tap to type...'; } }; // Enter key sends immediately — same as tapping the Send button this.keyboard.onEnterPressed = (text) => { this._sendTypedText(); };}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>If we want to hide the Keyboard, here’s the code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hide Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_hideKeyboard() { if (!this.keyboard) return; this.remove(this.keyboard); this.keyboard = null;}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>To toggle between showing and hidding the keyboard, we have this code:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Toggle Virtual Keyboard ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">?\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">:\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_showKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_toggleKeyboard() { this.keyboard ? this._hideKeyboard() : this._showKeyboard();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Let’s create the functions that will send the text to be said into the call just in case we can’t talk at that moment.\u003C/p>\n\u003Cp>To send the Quick Replies that we set before:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Quick Reply ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending quick reply: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Give the user immediate visual feedback in the status bar\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick reply sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">message\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendQuickReply(message) { if (!this.callId) return; console.log(`Sending quick reply: "${message}"`); // Give the user immediate visual feedback in the status bar if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, message) .then(() => { console.log('Quick reply sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${message}"`; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>In the case we want to carry on the conversation but maybe can’t speak (ie in a public space), we can send custom text:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Send Custom Text ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">text\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">trim\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sending typed text: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Sending...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">say\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Typed text sent successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Sent: \"\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">text\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Clear the keyboard buffer and reset the display\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">keyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">keyboard\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">typedTextView\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">say() error:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">err\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Failed to send message.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_sendTypedText() { const text = this._currentTypedText.trim(); if (!text) return; if (!this.callId) return; console.log(`Sending typed text: "${text}"`); if (this.statusText) this.statusText.text = 'Sending...'; this.client.say(this.callId, text) .then(() => { console.log('Typed text sent successfully.'); if (this.statusText) this.statusText.text = `Sent: "${text}"`; // Clear the keyboard buffer and reset the display if (this.keyboard) this.keyboard.setText(''); this._currentTypedText = ''; if (this.typedTextView) this.typedTextView.text = 'Tap to type...'; }) .catch(err => { console.error('say() error:', err); if (this.statusText) this.statusText.text = 'Failed to send message.'; });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Here we will create the Reply panel that will hold all the way we can send a text message into the call:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a1a2ecc\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.75\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.9\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Offset to the right so it sits beside the main call panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.8\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">-\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">objectDistance\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Quick Replies\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> =\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> [\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ Meeting, Talk Later ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">QUICK_REPLIES\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">slice\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">), \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// [ OMW!, 5 Mins ]\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">];\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pairs\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">pair\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.20\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">pair\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">forEach\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">{ \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">label\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> }\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">row\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addTextButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">label\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.35\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e2e50\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">btn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendQuickReply\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">message\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.06\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Talk via Text\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#9b9bff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.055\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.18\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Tap to type...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.065\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">textAlign: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">left\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.30\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">keyboard\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2e3a4a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">kbBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_toggleKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">actionRow\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addCol\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> }\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addIconButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">{\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">text: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">send\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#1a4a2a\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">sendBtn\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">onTriggered\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_sendTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">replyPanel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_createReplyPanel() { if (this.replyPanel) return; this.replyPanel = new xb.SpatialPanel({ backgroundColor: '#1a1a2ecc', width: .75, height: 0.9, }); // Offset to the right so it sits beside the main call panel this.replyPanel.position.set( 0.8, xb.user.height - 0.5, -xb.user.objectDistance ); this.add(this.replyPanel); const grid = this.replyPanel.addGrid(); grid.addRow({ weight: 0.06 }).addText({ text: 'Quick Replies', fontColor: '#9b9bff', fontSize: 0.055, }); const pairs = [ QUICK_REPLIES.slice(0, 2), // [ Meeting, Talk Later ] QUICK_REPLIES.slice(2, 4), // [ OMW!, 5 Mins ] ]; pairs.forEach(pair => { const row = grid.addRow({ weight: 0.20 }); pair.forEach(({ label, message }) => { const btn = row.addCol({ weight: 0.5 }).addTextButton({ text: label, fontSize: 0.35, backgroundColor: '#2e2e50', fontColor: '#ffffff', }); btn.onTriggered = () => this._sendQuickReply(message); }); }); grid.addRow({ weight: 0.06 }).addText({ text: 'Talk via Text', fontColor: '#9b9bff', fontSize: 0.055, }); this.typedTextView = grid.addRow({ weight: 0.18 }).addText({ text: 'Tap to type...', fontColor: '#ffffff', fontSize: 0.065, textAlign: 'left', }); const actionRow = grid.addRow({ weight: 0.30 }); const kbBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'keyboard', fontSize: 0.5, backgroundColor: '#2e3a4a', }); kbBtn.onTriggered = () => this._toggleKeyboard(); const sendBtn = actionRow.addCol({ weight: 0.5 }).addIconButton({ text: 'send', fontSize: 0.5, backgroundColor: '#1a4a2a', }); sendBtn.onTriggered = () => this._sendTypedText(); this.replyPanel.updateLayouts();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Just like with the Call panel, we will have a function to remove the Reply panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Remove Reply panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_hideKeyboard\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remove\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">replyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">typedTextView\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">_currentTypedText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">''\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_removeReplyPanel() { this._hideKeyboard(); if (this.replyPanel) { this.remove(this.replyPanel); this.replyPanel = null; this.typedTextView = null; } this._currentTypedText = '';}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function answers the call and updates the status and call control section:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Answer call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onAnswer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Answering...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">answer\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success answering call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call answered.\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateControlRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">CONNECTED\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createReplyPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// get media stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioOutputElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioElement\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">&&\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// This is the active WebRTC MediaStream managed by Vonage\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">audioElement\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">srcObject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">remoteStream: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Example: Grab individual audio tracks from the stream\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">remoteStream\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">getAudioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Active Audio Tracks:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">audioTracks\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createAvatar\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">remoteStream\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error answering call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onAnswer() { console.log('Answering...'); this.client.answer(this.callId) .then(() => { console.log("Success answering call."); this.statusText.text = `Call answered.`; this.updateControlRow('CONNECTED'); // ⌄⌄⌄ Show reply panel alongside the call panel ⌄⌄⌄ this._createReplyPanel(); // get media stream const audioElement = this.client.getAudioOutputElement(); if (audioElement && audioElement.srcObject) { // This is the active WebRTC MediaStream managed by Vonage const remoteStream = audioElement.srcObject; console.log('remoteStream: ', remoteStream); // Example: Grab individual audio tracks from the stream const audioTracks = remoteStream.getAudioTracks(); console.log("Active Audio Tracks:", audioTracks); // ⌄⌄⌄ Spin up the lipsync avatar driven by the remote stream ⌄⌄⌄ this._createAvatar(remoteStream); } }) .catch(error => { console.error("Error answering call: ", error); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will reject the incoming call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Reject call method ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onReject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Rejecting...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">reject\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success rejecting call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error rejecting call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onReject() { console.log('Rejecting...'); this.client.reject(this.callId) .then(() => { console.log("Success rejecting call."); }) .catch(error => { console.error("Error rejecting call: ", error); }); this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>This function will hang up the ongoing call and remove the panel:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Hang Up call method ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_onHangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Hanging up...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">hangup\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">then\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">()\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Success hanging up call.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">})\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Error hanging up call: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// We manually destroy the panel here too, just in case the event lags\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"_onHangup() { console.log('Hanging up...'); this.client.hangup(this.callId) .then(() => { console.log("Success hanging up call."); }) .catch(error => { console.error("Error hanging up call: ", error); }); // We manually destroy the panel here too, just in case the event lags this._removeCallPanel(); this._removeAvatar();}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Set up some listeners for the events that the Vonage Client SDK will emit and what to do:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Set Up Vonage Listeners ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- CREATE UI ON INVITE ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInvite\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">channelType\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">from\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">replace\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">(?=(?:\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\D\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">*\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">\\d\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">{4}\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">)\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">/\u003C/span>\u003Cspan style=\"--0:#5CA7E4;--1:#3A688F\">g\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">*\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Incoming call from \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Trigger the UI creation here\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_createCallPanel\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">maskedNumber\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">legStatusUpdate\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">legId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">status: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">status\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// --- REMOVE UI ON CANCEL/HANGUP ---\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callInviteCancel\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call cancelled: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">callId\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">on\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">callHangup\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">(\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">callQuality\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">reason\u003C/span>\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">)\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Call hung up: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">reason\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">callId\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeCallPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">_removeAvatar\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"setupVonageListeners() { // --- CREATE UI ON INVITE --- this.client.on('callInvite', (callId, from, channelType) => { this.callId = callId; const maskedNumber = from.replace(/\\d(?=(?:\\D*\\d){4})/g, "*") console.log(`Incoming call from ${maskedNumber}`); // Trigger the UI creation here this._createCallPanel(maskedNumber); }); this.client.on('legStatusUpdate', (callId, legId, status) => { console.log("status: ", status); if (this.statusText) { this.statusText.text = `Status: ${status}`; } }); // --- REMOVE UI ON CANCEL/HANGUP --- this.client.on('callInviteCancel', (callId) => { console.log(`Call cancelled: ${callId}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); }); this.client.on("callHangup", (callId, callQuality, reason) => { console.log(`Call hung up: ${reason}`); this.callId = null; this._removeCallPanel(); this._removeAvatar(); });}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Get a token from the server so you can connect to a session:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Connect to server to get token ⌄⌄⌄ \u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D7DBE0\">async\u003C/span>\u003Cspan style=\"--0:#D6DEEB\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">name\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">try\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">Fetching token for \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">...\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Fetch the token (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">fetch\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">/token?name=\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#D7DBE0;--1:#403F53\">name\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">!\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">ok\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">throw\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">Error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">HTTP error! status: \u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">${\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">status\u003C/span>\u003Cspan style=\"--0:#E2817F;--1:#B23834\">}\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">`\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">response\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">json\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">data\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Fetched token successfully.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Create the Session (AWAIT the result)\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">sessionId\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = await \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">client\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createSession\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">token\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Session created successfully. Session ID:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">sessionId\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 3. Update UI\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Instead, update your XR Panel text to show we are ready\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connected. Waiting for calls...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">} \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">catch\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">) {\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection failed:\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--1:#403F53\">\u003Cspan style=\"--0:#D6DEEB\">, \u003C/span>\u003Cspan style=\"--0:#D7DBE0\">error\u003C/span>\u003Cspan style=\"--0:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">statusText\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">text\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Connection Failed.\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"async connectToVonage(name) { try { console.log(`Fetching token for ${name}...`); // 1. Fetch the token (AWAIT the result) const response = await fetch(`/token?name=${name}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); this.token = data.token; console.log("Fetched token successfully."); // 2. Create the Session (AWAIT the result) const sessionId = await this.client.createSession(this.token); console.log("Session created successfully. Session ID:", sessionId); // 3. Update UI // Instead, update your XR Panel text to show we are ready if(this.statusText) { this.statusText.text = "Connected. Waiting for calls..."; } } catch (error) { console.error("Connection failed:", error); if(this.statusText) this.statusText.text = "Connection Failed."; }}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize the Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Vonage init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">client\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">setupVonageListeners\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">connectToVonage\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">userName\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"init() { console.log("Vonage init!",this.client); this.setupVonageListeners(); this.connectToVonage(this.userName);}\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":103,"localImagePaths":104,"remoteImagePaths":105,"frontmatter":106,"imagePaths":107},[],[],[],{"title":92,"description":93},[],"05_exit_button",{"id":108,"data":110,"body":116,"filePath":117,"digest":118,"rendered":119},{"title":111,"description":112,"editUrl":16,"head":113,"template":33,"sidebar":114,"pagefind":16,"draft":23},"Exiting WebXR application","Button to exit WebXR application",[],{"hidden":23,"attrs":115},{},"When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\n\nThe following code will be placed in the `static/ExitButton.js` file.\n\nCreate the constructor for the Class:\n`// ⌄⌄⌄ Create constructor ⌄⌄⌄`\n```js\n constructor() {\n super();\n // Keep a reference to the panel so we can destroy it later\n this.panel = null; \n this.statusText = null;\n this.exitPanelText = \"Exit Demo\";\n }\n```\n\nFunction to create a panel for the Exit Button:\n`// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄`\n```js\n createExitPanel() {\n // SAFETY: If a panel already exists, don't create another one.\n if (this.panel) return;\n\n console.log(\"Creating Exit Button...\");\n \n // 1. Create the Panel\n this.panel = new xb.SpatialPanel({\n width: 0.5,\n height: 0.5, \n backgroundColor: '#2b2b2baa'\n });\n\n this.panel.position.set(\n 0,\n xb.user.height,\n 2.0\n );\n\n this.panel.rotation.set(0, Math.PI, 0);\n this.add(this.panel);\n\n const grid = this.panel.addGrid();\n\n // 2. Status Text\n this.statusText = grid.addRow({ weight: 1 }).addText({\n text: this.exitPanelText,\n fontColor: '#ffffff',\n fontSize: .4,\n });\n\n // Orbiter\n const orbiter = grid.addOrbiter();\n orbiter.addExitButton();\n this.panel.updateLayouts();\n }\n```\n\nInitialize Class when loaded into the page:\n`// ⌄⌄⌄ Initialize ⌄⌄⌄`\n```js\n init() {\n console.log(\"Exit Button init!\");\n this.createExitPanel();\n }\n```","src/content/docs/05_Exit_Button.md","ca1a48912fc826e3",{"html":120,"metadata":121},"\u003Cp>When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/ExitButton.js\u003C/code> file.\u003C/p>\n\u003Cp>Create the constructor for the Class:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create constructor ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">constructor\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">super\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Keep a reference to the panel so we can destroy it later\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#FF6A83;--1:#A24848\">null\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Demo\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" constructor() { super(); // Keep a reference to the panel so we can destroy it later this.panel = null; this.statusText = null; this.exitPanelText = "Exit Demo"; }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Function to create a panel for the Exit Button:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Create Exit Button panel ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// SAFETY: If a panel already exists, don't create another one.\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">if\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> (\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">) \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">return\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Creating Exit Button...\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 1. Create the Panel\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">SpatialPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">width: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">height: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0.5\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">backgroundColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#2b2b2baa\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">position\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">user\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">height\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">2.0\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">rotation\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">set\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">Math\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">PI\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">, \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">0\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">panel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addGrid\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// 2. Status Text\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">statusText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">=\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addRow\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({ weight: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">1\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> })\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">({\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">text: \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">exitPanelText\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontColor: \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">#ffffff\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">fontSize: \u003C/span>\u003Cspan style=\"--0:#F78C6C;--1:#AA0982\">.4\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">,\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">});\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\n\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#919F9F;--1:#5D6376\">// Orbiter\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">const \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\"> = \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">grid\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addOrbiter\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">orbiter\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">addExitButton\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#FAF39F;--1:#111111\">panel\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">updateLayouts\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" createExitPanel() { // SAFETY: If a panel already exists, don't create another one. if (this.panel) return; console.log("Creating Exit Button..."); // 1. Create the Panel this.panel = new xb.SpatialPanel({ width: 0.5, height: 0.5, backgroundColor: '#2b2b2baa' }); this.panel.position.set( 0, xb.user.height, 2.0 ); this.panel.rotation.set(0, Math.PI, 0); this.add(this.panel); const grid = this.panel.addGrid(); // 2. Status Text this.statusText = grid.addRow({ weight: 1 }).addText({ text: this.exitPanelText, fontColor: '#ffffff', fontSize: .4, }); // Orbiter const orbiter = grid.addOrbiter(); orbiter.addExitButton(); this.panel.updateLayouts(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Initialize Class when loaded into the page:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ Initialize ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">init\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">() {\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">console\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">log\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">Exit Button init!\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">\"\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">);\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\"> \u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">this\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">createExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">();\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan class=\"indent\">\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">}\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\" init() { console.log("Exit Button init!"); this.createExitPanel(); }\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>",{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"title":111,"description":112},[],"06_add_to_xr_blocks",{"id":127,"data":129,"body":135,"filePath":136,"digest":137,"rendered":138},{"title":130,"description":131,"editUrl":16,"head":132,"template":33,"sidebar":133,"pagefind":16,"draft":23},"Add panels to XR Blocks","adding panels to WebXR application",[],{"hidden":23,"attrs":134},{},"Let's add the 2 panels to the application.\n\nThe following code will be placed in the `static/main.js` file.\n\nFirst, import the Panels:\n`// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nimport { VonageAudioCall } from './VonageAudioCall.js';\nimport { ExitPanel } from './ExitButton.js';\n```\n\nCreate instances and add to the application:\n`// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄`\n```js\nxb.add(new VonageAudioCall());\nxb.add(new ExitPanel());\n```\n\n## Time to test the application\nRefresh the application and try to call the phone number that was purchased and assigned while running the setup script.\n\n> Note: You can find the phone number connected to your Vonage application in the `.env` file.","src/content/docs/06_Add_To_XR_Blocks.md","48e51c4493e772dc",{"html":139,"metadata":140},"\u003Cp>Let’s add the 2 panels to the application.\u003C/p>\n\u003Cp>The following code will be placed in the \u003Ccode dir=\"auto\">static/main.js\u003C/code> file.\u003C/p>\n\u003Cp>First, import the Panels:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { VonageAudioCall } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./VonageAudioCall.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">import\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> { ExitPanel } \u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">from\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#984E4D\">./ExitButton.js\u003C/span>\u003Cspan style=\"--0:#D9F5DD;--1:#111111\">'\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">;\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"import { VonageAudioCall } from './VonageAudioCall.js';import { ExitPanel } from './ExitButton.js';\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cp>Create instances and add to the application:\n\u003Ccode dir=\"auto\">// ⌄⌄⌄ add Vonage Call Panel and Exit Button ⌄⌄⌄\u003C/code>\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Cfigure class=\"frame not-content\">\u003Cfigcaption class=\"header\">\u003C/figcaption>\u003Cpre data-language=\"js\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">VonageAudioCall\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">xb\u003C/span>\u003Cspan style=\"--0:#C792EA;--1:#8844AE\">.\u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">add\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">(\u003C/span>\u003Cspan style=\"--0:#7FDBCA;--1:#096E72\">new\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">ExitPanel\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\">());\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"xb.add(new VonageAudioCall());xb.add(new ExitPanel());\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"time-to-test-the-application\">Time to test the application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#time-to-test-the-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Time to test the application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Refresh the application and try to call the phone number that was purchased and assigned while running the setup script.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Note: You can find the phone number connected to your Vonage application in the \u003Ccode dir=\"auto\">.env\u003C/code> file.\u003C/p>\n\u003C/blockquote>",{"headings":141,"localImagePaths":145,"remoteImagePaths":146,"frontmatter":147,"imagePaths":148},[142],{"depth":82,"slug":143,"text":144},"time-to-test-the-application","Time to test the application",[],[],{"title":130,"description":131},[],"07_congrats",{"id":149,"data":151,"body":157,"filePath":158,"digest":159,"rendered":160},{"title":152,"description":153,"editUrl":16,"head":154,"template":33,"sidebar":155,"pagefind":16,"draft":23},"Congratulations!","What's next.",[],{"hidden":23,"attrs":156},{},"## You did it!\n\nYou now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\n\n\n## Create your own XR Blocks application with AI\n\nXR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\n\n## Export your application\n\nIf you'd like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\n\n```bash\nchmod +x export.sh && ./export.sh\n```\n\n## Stop your Codespace\n\nDon't forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your `Active` instance and click `Stop codespace`\n\n## What's Next?\n\n- Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\n- Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\n- Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\n- Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\n- Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage","src/content/docs/07_Congrats.md","ebc29bb1698c9e61",{"html":161,"metadata":162},"\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"you-did-it\">You did it!\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#you-did-it\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “You did it!”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>You now have a WebXR application using XR Blocks and the Vonage Voice API that can receive phone calls.\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"create-your-own-xr-blocks-application-with-ai\">Create your own XR Blocks application with AI\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#create-your-own-xr-blocks-application-with-ai\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Create your own XR Blocks application with AI”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>XR Blocks has a Google Gemini Gem, that allows you to create a WebXR application using just plain text. Want to create something? \u003Ca href=\"https://xrblocks.github.io/gem\" target=\"_blank\">Give it a try.\u003C/a>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"export-your-application\">Export your application\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#export-your-application\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Export your application”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>If you’d like to save the application you created to your personal GitHub acoount, open a new Terminal window (press the + button) and run this command:\u003C/p>\n\u003Cdiv class=\"expressive-code\">\u003Clink rel=\"stylesheet\" href=\"/_astro/ec.v4551.css\">\u003Cscript type=\"module\" src=\"/_astro/ec.0vx5m.js\">\u003C/script>\u003Cfigure class=\"frame is-terminal not-content\">\u003Cfigcaption class=\"header\">\u003Cspan class=\"title\">\u003C/span>\u003Cspan class=\"sr-only\">Terminal window\u003C/span>\u003C/figcaption>\u003Cpre data-language=\"bash\">\u003Ccode>\u003Cdiv class=\"ec-line\">\u003Cdiv class=\"code\">\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">chmod\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">+x\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> \u003C/span>\u003Cspan style=\"--0:#ECC48D;--1:#3B61B0\">export.sh\u003C/span>\u003Cspan style=\"--0:#D6DEEB;--1:#403F53\"> && \u003C/span>\u003Cspan style=\"--0:#82AAFF;--1:#3B61B0\">./export.sh\u003C/span>\u003C/div>\u003C/div>\u003C/code>\u003C/pre>\u003Cdiv class=\"copy\">\u003Cdiv aria-live=\"polite\">\u003C/div>\u003Cbutton title=\"Copy to clipboard\" data-copied=\"Copied!\" data-code=\"chmod +x export.sh && ./export.sh\">\u003Cdiv>\u003C/div>\u003C/button>\u003C/div>\u003C/figure>\u003C/div>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"stop-your-codespace\">Stop your Codespace\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#stop-your-codespace\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “Stop your Codespace”\u003C/span>\u003C/a>\u003C/div>\n\u003Cp>Don’t forget to stop your Codespace once you are done. Just to \u003Ca href=\"https://github.com/codespaces\" target=\"_blank\">\u003C/a>\u003Ca href=\"https://github.com/codespaces\">https://github.com/codespaces\u003C/a>. Click the 3 dots of your \u003Ccode dir=\"auto\">Active\u003C/code> instance and click \u003Ccode dir=\"auto\">Stop codespace\u003C/code>\u003C/p>\n\u003Cdiv class=\"sl-heading-wrapper level-h2\">\u003Ch2 id=\"whats-next\">What’s Next?\u003C/h2>\u003Ca class=\"sl-anchor-link\" href=\"#whats-next\">\u003Cspan aria-hidden=\"true\" class=\"sl-anchor-icon\">\u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\u003Cpath fill=\"currentcolor\" d=\"m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z\">\u003C/path>\u003C/svg>\u003C/span>\u003Cspan class=\"sr-only\" data-pagefind-ignore=\"\">Section titled “What’s Next?”\u003C/span>\u003C/a>\u003C/div>\n\u003Cul>\n\u003Cli>Can you create a WebXR application that makes phone calls? How about a voice chat in a WebXR environment?\u003C/li>\n\u003Cli>Learn more about the Vonage Voice API in our \u003Ca href=\"https://developer.vonage.com/en/voice/voice-api/overview\" target=\"_blank\">developer documenation\u003C/a>\u003C/li>\n\u003Cli>Connect with CreateHER Fest on \u003Ca href=\"https://createherfest.fyi/linkedin\" target=\"_blank\">LinkedIn\u003C/a>, \u003Ca href=\"https://createherfest.fyi/ig\" target=\"_blank\">Instagram\u003C/a>, \u003Ca href=\"https://createherfest.fyi/x\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://createherfest.fyi/newsy\" target=\"_blank\">Newsletter\u003C/a>, \u003Ca href=\"https://createherfest.fyi/discord\" target=\"_blank\">Discord\u003C/a> and \u003Ca href=\"https://createherfest.fyi/youtube\" target=\"_blank\">Youtube\u003C/a>\u003C/li>\n\u003Cli>Connect with Vonage on \u003Ca href=\"https://x.com/vonagedev\" target=\"_blank\">Twitter / X\u003C/a>, \u003Ca href=\"https://bsky.app/profile/developer.vonage.com\" target=\"_blank\">Bluesky\u003C/a> and \u003Ca href=\"https://www.linkedin.com/company/vonage-dev\" target=\"_blank\">LinkedIn\u003C/a>\u003C/li>\n\u003Cli>Join our \u003Ca href=\"https://vonage.dev/slack\" target=\"_blank\">Developer Community Slack channel\u003C/a> to connect with others building with Vonage\u003C/li>\n\u003C/ul>",{"headings":163,"localImagePaths":179,"remoteImagePaths":180,"frontmatter":181,"imagePaths":182},[164,167,170,173,176],{"depth":82,"slug":165,"text":166},"you-did-it","You did it!",{"depth":82,"slug":168,"text":169},"create-your-own-xr-blocks-application-with-ai","Create your own XR Blocks application with AI",{"depth":82,"slug":171,"text":172},"export-your-application","Export your application",{"depth":82,"slug":174,"text":175},"stop-your-codespace","Stop your Codespace",{"depth":82,"slug":177,"text":178},"whats-next","What’s Next?",[],[],{"title":152,"description":153},[]] \ No newline at end of file diff --git a/tutorials/webxr-javascript-workshop/project/static/background-splat.webp b/tutorials/webxr-javascript-workshop/project/static/background-splat.webp deleted file mode 100644 index af0bbfe98f888e2007321ade1a9d3ec4cb47a164..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 129434 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

Io+@PT(c(n(fe?8V@?x$D0t>Ysu2e*wpV2?%S%g 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 Blocks that can answer phone calls. -The following code will be placed in the `index.html` file. +The following code will be placed in the `pages/index.html` file. First, we will need to load the Vonage Client SDK from a CDN (``): ```html diff --git a/tutorials/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md b/tutorials/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md index b32e40c8..75afecd5 100644 --- a/tutorials/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md +++ b/tutorials/webxr-javascript-workshop/src/content/docs/04_Vonage_Call_Panel.md @@ -13,7 +13,7 @@ The Vonage Voice Client SDK's Virtual Keyboard (Addon). -The following code will be placed in the `VonageAudioCall.js` file. +The following code will be placed in the `static/VonageAudioCall.js` file. First, we will set the Quick Replies that the user can send into the call. Find `// ⌄⌄⌄ Set Quick Replies ⌄⌄⌄` and add this code: diff --git a/tutorials/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md b/tutorials/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md index 7bb5d055..71c32d52 100644 --- a/tutorials/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md +++ b/tutorials/webxr-javascript-workshop/src/content/docs/05_Exit_Button.md @@ -5,7 +5,7 @@ description: Button to exit WebXR application When in the WebXR environment using a headset, I could not figure out how to leave the experience, so I made an Exit Demo Panel. -The following code will be placed in the `ExitButton.js` file. +The following code will be placed in the `static/ExitButton.js` file. Create the constructor for the Class: `// ⌄⌄⌄ Create constructor ⌄⌄⌄` diff --git a/tutorials/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md b/tutorials/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md index feaa2c20..cbdb2451 100644 --- a/tutorials/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md +++ b/tutorials/webxr-javascript-workshop/src/content/docs/06_Add_To_XR_Blocks.md @@ -5,7 +5,7 @@ description: adding panels to WebXR application Let's add the 2 panels to the application. -The following code will be placed in the `main.js` file. +The following code will be placed in the `static/main.js` file. First, import the Panels: `// ⌄⌄⌄ import Vonage Call Panel and Exit Button ⌄⌄⌄` diff --git a/tutorials/webxr-javascript-workshop/steps/01_create_account/index.html b/tutorials/webxr-javascript-workshop/steps/01_create_account/index.html index bdcd02d8..31b259f5 100644 --- a/tutorials/webxr-javascript-workshop/steps/01_create_account/index.html +++ b/tutorials/webxr-javascript-workshop/steps/01_create_account/index.html @@ -24,7 +24,7 @@ }, }; })(); - Skip to content

Vonage Coding Exercise
Skip to content
Vonage Coding Exercise