|
| 1 | +# Writing Custom Components |
| 2 | + |
| 3 | +Each state within a Bot flow calls a component to perform actions ranging |
| 4 | +from basic interactions like user input and outputting response text to |
| 5 | +some service-specific actions like fulfilling an order or booking a flight. |
| 6 | + |
| 7 | +The platform has many [Built-in Components](https://docs.oracle.com/en/cloud/paas/digital-assistant/use-chatbot/components1.html#GUID-729FF27F-4DDA-41C2-B9CD-09EB3FBBA7A7) |
| 8 | +to support basic actions like setting variables, allowing OAuth, and enabling |
| 9 | +user input. In cases where your bot design calls for unique actions outside of |
| 10 | +these functions, you’ll be writing [Custom Components](https://docs.oracle.com/en/cloud/paas/digital-assistant/use-chatbot/components1.html#GUID-D4DB30EC-D089-4809-A845-31FAAE1794AA). |
| 11 | +These allow your bot to call REST APIs, implement business logic, transition |
| 12 | +state, customize messages, etc. |
| 13 | + |
| 14 | +## Custom Component Structure |
| 15 | + |
| 16 | +### Using Javascript |
| 17 | + |
| 18 | +A custom component should export two objects, the `metadata` object that provides information like the name of the component, supported properties, and supported transition actions. And the `invoke` function that contains the actual logic that should be executed. |
| 19 | + |
| 20 | +```javascript |
| 21 | +module.exports = { |
| 22 | + |
| 23 | + metadata: { |
| 24 | + name: 'helloWorld', |
| 25 | + properties: {}, |
| 26 | + supportedActions: [] |
| 27 | + }, |
| 28 | + |
| 29 | + invoke: async (context) => { |
| 30 | + context.reply('hello world'); |
| 31 | + } |
| 32 | +} |
| 33 | +``` |
| 34 | + |
| 35 | +You can also define the `metadata` object as a function, rather than a JSON object: |
| 36 | + |
| 37 | +```javascript |
| 38 | +module.exports = { |
| 39 | + |
| 40 | + metadata: () => ({ |
| 41 | + name: 'helloWorld', |
| 42 | + properties: {}, |
| 43 | + supportedActions: [] |
| 44 | + }), |
| 45 | + |
| 46 | + invoke: async (context) => { |
| 47 | + context.reply('hello world'); |
| 48 | + } |
| 49 | +} |
| 50 | +``` |
| 51 | +The old style of defining the `invoke` function using the `done` callback argument is still supported: |
| 52 | + |
| 53 | +```javascript |
| 54 | + invoke: (context, done) => { |
| 55 | + context.reply('hello world'); |
| 56 | + done(); |
| 57 | + } |
| 58 | +} |
| 59 | +``` |
| 60 | +We recommend to no longer use the `done` callback argument. Using the new `async` function definition, you can write asynchronous code in a synchronous way using the `await` keyword. |
| 61 | +In addition, you no longer have to remember to call `done()` at every place in your code where the custom component logic is completed. |
| 62 | + |
| 63 | +### Using TypeScript |
| 64 | + |
| 65 | +When using typescript, the custom component class should implement the `CustomComponent` interface which requires two methods to be present: |
| 66 | +- the `metadata` method that should return an object of type `CustomComponentMetadata`. |
| 67 | +- the `invoke` method that should accept two arguments, the context of type `CustomComponentContext` and a callback of type `InvocationCallback`. |
| 68 | + |
| 69 | +```typescript |
| 70 | +import {CustomComponent, CustomComponentMetadata, CustomComponentContext, InvocationCallback } from '@oracle/bots-node-sdk/lib'; |
| 71 | + |
| 72 | +export class HelloWorld implements CustomComponent { |
| 73 | + |
| 74 | + public metadata(): CustomComponentMetadata { |
| 75 | + return { |
| 76 | + name: 'helloWorld', |
| 77 | + properties: {}, |
| 78 | + supportedActions: [] |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + public async invoke(conversation: CustomComponentContext): Promise<void> { |
| 83 | + context.reply('hello world'); |
| 84 | + } |
| 85 | +} |
| 86 | +``` |
| 87 | + |
| 88 | +## The Invoke Method |
| 89 | + |
| 90 | +The `invoke` method contains all the business logic. In this method you can read and write skill context variables, create conversation messages, set state transitions, make REST calls and more. |
| 91 | + |
| 92 | +The first argument of the invoke method is the `context` object. This object references the [CustomComponentContext](https://oracle.github.io/bots-node-sdk/CustomComponentContext.html) that provides access to many convenience methods to create your business logic. |
| 93 | + |
| 94 | +More information on creating conversation messages that your bot should send to the user can be found [here](https://github.com/oracle/bots-node-sdk/blob/master/MESSAGE_MODEL.md). |
| 95 | + |
| 96 | +You can use your favorite http client package to make REST calls, however, the [node fetch](https://www.npmjs.com/package/node-fetch) API is pre-installed with the bots-node-sdk. Use the following statement if you want to make REST calls using node-fetch: |
| 97 | + |
| 98 | +```javascript |
| 99 | +const fetch = require("node-fetch"); |
| 100 | +``` |
| 101 | + |
| 102 | +or when using typescript: |
| 103 | + |
| 104 | +```typescript |
| 105 | +import * as fetch from 'node-fetch'; |
| 106 | +``` |
| 107 | + |
| 108 | + |
| 109 | + |
0 commit comments