@anarock/genie-sdk
v0.0.3
Published
## Installation
Keywords
Readme
anarock.genie-sdk
Installation
yarn add ssh://[email protected]/anarock/anarock.genie-sdk#buildNextJS
Install peer dependencies
yarn add react-native-web@^0.18.0
yarn add -D next-transpile-modules@^7.0.0Copy assets
cp -r node_modules/genie-sdk/lib/assets/fonts/. public/fonts
cp -r node_modules/genie-sdk/lib/assets/audio/. public/audioReact Native
Install peer dependencies
yarn add \
@react-native-community/blur \
@react-native-masked-view/masked-view \
react-native-fs \
react-native-linear-gradient \
react-native-live-audio-stream \
react-native-sound \
react-native-sseInstall iOS dependencies
(cd ios/ ; bundle ; bundle exec pod install)Copy assets
Autolinking
add assets in react-native.config.js
module.exports = {
...
assets: [
...
"node_modules/genie-sdk/lib/assets/native/fonts",
"node_modules/genie-sdk/lib/assets/native/audio",
],
};run react-native-asset to copy files into android and ios folders
npx react-native-assetManually
Android
cp -r node_modules/genie-sdk/lib/assets/native/fonts/. android/app/src/main/assets/fonts/
cp -r node_modules/genie-sdk/lib/assets/native/audio/. android/app/src/main/res/raw/iOS
Setup
NextJS
load fonts
export default class MyDocument extends Document {
...
render() {
return (
<Html lang="en-us">
<Head>
...
<link rel="stylesheet" href="/fonts/style.css" />
<link
rel="preload"
as="font"
href="/fonts/InterVariable.woff2"
crossOrigin=""
/>
<link
rel="preload"
as="font"
href="/fonts/InterVariable-Italic.woff2"
crossOrigin=""
/>
</Head>
...
</Html>
);
}
}
configure node_modules
// 1. add `genie-sdk` to the list of modules to transpile
const withTM = require("next-transpile-modules")(["genie-sdk"]);
module.exports = withTM({
...
webpack(config) {
...
// 2. resolve `react-native` imports to `react-native-web`
config.resolve.alias["react-native$"] = require.resolve("react-native-web");
},
});Optional
- if
assetPrefixis set conditionally, set it to empty string instead ofundefinedornull
module.exports = {
...
- assetPrefix: production ? ASSET_PREFIX : undefined, ❌
+ assetPrefix: production ? ASSET_PREFIX : "", ✅
}- exclude
genie-sdkfrom loaders for font and images
module.exports = {
...
webpack(config) {
...
config.module.rules.push({
test: /\.(ttf|woff|woff2|jpg|png|svg|gif)$/,
+ exclude: /genie-sdk/,
use: { ... }
});
}
}React Native
Android
add RECORD_AUDIO permission to AndroidManifest.xml
<manifest ...>
...
<uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>iOS
add NSMicrophoneUsageDescription to Info.plist
<plist version="1.0">
<dict>
...
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access for voice chat</string>
</dict>
</plist>Usage
<GenieSdk
sdkConfig={{
api_url: "https://api.staging.anarockgenie.com/backend-api",
llm_url: "wss://llm.staging.anarockgenie.com",
agent_id: "3", // genie llm agent id
session_type: "DEFAULT",
source: "WEB",
// use employee service auth token for anarock users
auth_token: "djshwey8urt9...",
anarock_id: 123,
// and use phone number for public users
phone_number: "9760288023",
country_code: "+91",
}}
/>Development
Install dependencies
yarn
(cd examples/my-web ; yarn)
(cd examples/MyApp ; yarn)
(cd examples/MyApp/ios ; bundle ; bundle exec pod install)Run dev script
yarn devStart dev servers
Web
(cd examples/my-web ; yarn dev)Native
(cd examples/MyApp ; yarn android ; yarn start)
(cd examples/MyApp ; yarn ios ; yarn start)Fonts
Variable font
Native platforms (android, ios) do not support dynamic weights with variable fonts.
We use Slice to generate "static" fonts for each weight used in design.
Generated fonts are saved with sliced axes names and values added in filename.
For example: Inter_italic_opsz14_wght500.ttf is generated from InterVariable-Italic.ttf with sliced axes opsz and wght with values 14 and 500.
Font family
Each platform (web, android, ios) has its own way to map fontFamily style property to actual font file.
- web -
font-familyproperty in@font-facerule - android - filename in
app/src/main/assets/fontsfolder - ios - PostScript name declared in each font file
We use TTFEdit to edit PostScript name and set it to filename.
By doing so, we can use same fontFamily style property on native platforms (android, ios).
Audio
We use audio assets from Android Leanback to provide feedback for voice input.
- https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:leanback/leanback/src/main/res/raw/
- https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/leanback/leanback/src/main/res/raw/
Autolinking
Use autolinking to copy font files by adding genie dependency in examples/MyApp/package.json
{
...
"dependencies": {
...
"genie-sdk": "0.0.0"
}
}and running autolinking command
yarn react-native link genie-sdk