# Component replication

# Message component rewriting(Customize the style of plug-in content)

From the version 1.0.7 Started to support the replacement of built-in plugins for Mini Programs, including text messages, weather messages, picture messages, music messages, news messages, and guide messages From the version 1.1.0 Start support for generic: operateCard Parameter, bottom text and speech input added customoperateCard Function of custom replication From the version 1.1.10 Start Support feedsCard Short Video Message Class Component

<view style="height: 100vh">
    <chat
        bind:queryCallback="getQueryCellback"
        generic:queryMessage="queryMessage"
        generic:textMessage="customTextMessage"
        generic:weatherMessage="customWeatherMessage"
        generic:imageMessage="customImageMessage"
        generic:musicMessage="customMusicMessage"
        generic:newsMessage="customNewsMessage"
        generic:unsupportedMessage="customUnsupportedMessage"
        generic:guideCard="customGuideCard"
        初始值
        generic:miniprogramMessage="customMiniprogramMessage"
        generic:h5Message="customh5Message"
        generic:welcomeCard="customWelcomeCard"
        generic:feedsCard="customFeedsCard"
    >
    </chat>
</view>

{
    "usingComponents": {
        "chat": "plugin://myPlugin/chat",
        "customQueryMessage": "../customQueryMessage/customQueryMessage",
        "customTextMessage": "../customTextMessage/customTextMessage",
        "customWeatherMessage": "../customWeatherMessage/customWeatherMessage",
        "customImageMessage": "../customImageMessage/customImageMessage",
        "customMusicMessage": "../customMusicMessage/customMusicMessage",
        "customNewsMessage": "../customNewsMessage/customNewsMessage",
        "customUnsupportedMessage": "../customUnsupportedMessage/customUnsupportedMessage",
        "customGuideCard": "../customGuideCard/customGuideCard",
        "customOperateCard": "../customOperateCard/customOperateCard",
        "customMiniprogramMessage": "../customMiniprogramMessage/初始值
        "customh5Message": "../customh5Message/customh5Message",
        "customWelcomeCard": "../customWelcomeCard/customWelcomeCard",
        "customFeedsCard": "../customFeedsCard/customFeedsCard"
    }
}

# Component categories that support coverage:

1. queryMessage: Messages sent by the user
2. textMessage: Text Class Message
3. weatherMessage: Weather Class Message
4. imageMessage: Picture Class Message
5. musicMessage: Music Class Message
6. newsMessage: News Class Message
7. unsupportedMessage: Class messages not supported
8. guideCard: Boot message
9. operateCard: Bottom Operating Area(From the version 1.1.0 Start Support)
10. miniprogramMessage: Mini Program Class Message
11. h5Message： h5 Class message
12. welcomeCard: Welcome
13. feedsCard: Short Video Class Message

Note: There is no support in the plugin to evoke an Mini Program with webview, Code reference https://github.com/weixinAI/openai-plugin-overwrite

1. Configure a custom Mini Program in the platform, Duplicate required miniprogramMessage Components evoke other Mini Programs
2. Configure custom in the platform h5, Duplicate required h5Message assembly
3. Insert a hyperlink in a text message, Duplicate requiredtextMessageComponent to Hyperlink Jump

Of the above seven messages, the component 1-7 Will receive on the component a properties parameter msg

<queryMessage msg="{{item}}" recording="{{recording}}" userHeader="{{userHeader}}" ></queryMessage>
<textMessage msg="{{item}}" robotHeader="{{robotHeader}}"></textMessage>
<weatherMessage msg="{{item}}" robotHeader="{{robotHeader}}"></weatherMessage>
<newsMessage   msg="{{item}}" robotHeader="{{robotHeader}}"></newsMessage>
<musicMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></musicMessage>
<imageMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></imageMessage>
<unsupportedMessage msg="{{item}}" robotHeader="{{robotHeader}}"></unsupportedMessage>
<miniprogramMessage  msg="{{item}}" robotHeader="{{robotHeader}}"></miniprogramMessage>
<h5Message msg="{{item}}" robotHeader="{{robotHeader}}"></h5Message>
<welcomeCard msg="{{welcome}}" userName="{{userName}}" robotHeader="{{robotHeader}}"></welcomeCard>
<guideCard guideList="{{guideList}}" controlSwiper="{{controlSwiper}}" bind:chooseGuide="choosePageGuide"> </guideCard>
<operateCard bind:bindInput="bindInutvalue" bind:inputVoiceStart="inputVoiceStart" bind:inputVoiceEnd="inputVoiceEnd" bind:back="backHome" focus="{{focus}}"></operateCard>
<feedsCard msg="{{item}}" robotHeader="{{robotHeader}}"></feedsCard>

# queryMessage of properties parameter msg The data structure of:

{
    content: "User-entered conversation content,"
}

properties Dxplaination:

properties: {
    msg: Object,
    recording: Boolean
}

# textMessage of properties parameter msg The data structure of:

{
    msg_type: "text",
    content: "Robot conversation results,"
    nothing: nothing //NLU Results
}

# weatherMessage of properties parameter msg The data structure of:

{
    cardType: "weather",
    answer: "Robot conversation results,"
    docs: Array, //Weather Results
    nothing: nothing //NLU Results
}

# newsMessage of properties parameter msg The data structure of:

{
    cardType: "news",
    answer: "Robot conversation results,"
    docs: Array, //News Results
    nothing: nothing //NLU Results
}

# musicMessage of properties parameter msg The data structure of:

{
    cardType: "voice",
    answer: "",
    docs: Array, //Music Results
}

# imageMessage of properties parameter msg The data structure of:

{
    cardType: "image",
    初始值 Object,
    nothing: nothing //NLU Results
}

# unsupportedMessage of properties parameter msg The data structure of:

{
    cardType: "unsupported",
    data: Object,//Custom JSON structure
    nothing: nothing //NLU Results
}

# miniprogramMessage of properties parameter msg The data structure of:

{
    cardType: "miniprogrampage"
    data: Object,
    nothing: nothing //NLU Results
}

# h5Message of properties parameter

{
    "cardType": "h5",
    "docs": Array,
    "Nothing": nothing //NLU Results
}

# guideCard of properties parameter

<guideCard
    guideList="{{guideList}}"
    controlSwiper="{{controlSwiper}}"
></guideCard>

properties Dxplaination:

If the response user clicks on the event

this.triggerEvent("chooseGuide", "What did the user click on in the menu?")

# operateCard of properties parameter

<operateCard
    bind:bindInput="bindInutvalue"
    bind:inputVoiceStart="inputVoiceStart"
    bind:inputVoiceEnd="inputVoiceEnd"
    bind:back="backHome"
    focus="{{focus}}"
></operateCard>

properties Dxplaination:

Send Message Event

this.triggerEvent("bindInput", "Message to be sent by the user")

The user holds down a button and needs to trigger an event to start recording

this.triggerEvent("inputVoiceStart")

The user sends a button that triggers the event that ends the recording

this.triggerEvent("inputVoiceEnd")

The user clicks a button that needs to trigger an event to return to the home page

this.triggerEvent("inputVoiceEnd")

Send a message, open a recording, end the recording, or by plugin.getChatComponent() Method gets the UI Finally, Through the component approach

const chat = plugin.getChatComponent()

//Events to be triggered when the user needs to initiate speech input
chat.inputVoiceStart()

//Event to be triggered when the user needs to end speech input
chat.inputVoiceEnd()

//Events that need to be triggered when a user needs to send a message
chat.send(" Hello! ")

# welcomeCard of properties parameter

{
    "content": string / Array
}

# feedsCard of properties to hit the target item parameter

1.1.10 Version starts to support when the robot answers include a list traversal and the traversal content is<a Href = "{jump link}" Img = "{Image Address}">初始值</a>The short video class message component can be triggered in the Mini Program plug-in

{
    "cardType": "feedsCard",
    "data": Array,
    "Nothing": res, //NLU Results
    "query": String
}