msc-help-me-write

「OpenAI」 is so powerful for all kinds services. That's why I try to adopt OpenAI to help Y! Auction's seller submit merchandise quickly.

With <msc-help-me-write /> support, developers just need to set some configs and everything will be all set. All user need to do is just press the trigger and <msc-help-me-write /> will display cool appearance for pick up.

Basic Usage

<msc-help-me-write /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-help-me-write />'s html structure and everything will be all set.

• Required Script

1<script
2  type="module"
3  src="https://your-domain/wc-msc-help-me-write.js">        
4</script>

• Structure

Put <msc-help-me-write /> into HTML document. It will have different functions and looks with attribute mutation.

1<msc-help-me-write>
2  <script type="application/json">
3    {
4      "l10n": {
5        "title": "Assistant",
6        "apply": "Apply",
7        "applied": "Applied",
8        "applyAll": "Apply All"
9      },
10      "webservice": {
11        "url": "https://your-domain/api",
12        "params": {
13          "id": "mei",
14          "sex": "M"
15        },
16        "headers": {
17          "Content-Type": "application/json"
18        },
19        "method": "POST",
20        "withCredentials": false,
21        "timeout": 30000
22      }
23    }
24  </script>
25</msc-help-me-write>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-help-me-write />.

1<msc-help-me-write
2  remoteconfig="https://your-domain/api-path"
3>
4</msc-help-me-write>

JavaScript Instantiation

<msc-help-me-write /> could also use JavaScript to create DOM element. Here comes some examples.

1<script type="module">
2import { MscHelpMeWrite } from 'https://your-domain/wc-msc-help-me-write.js';
3
4// use DOM api
5const nodeA = document.createElement('msc-help-me-write');
6document.body.appendChild(nodeA);
7nodeA.l10n = {
8  title: 'AI Assistant',
9  apply: 'apply'
10};
11nodeA.webservice = {
12  url: 'https://your-domain/api',
13  method: 'GET',
14  timeout: 10000
15};
16
17// new instance with Class
18const nodeB = new MscHelpMeWrite();
19document.body.appendChild(nodeB);
20nodeB.l10n = {
21  title: 'AI Assistant',
22  apply: 'apply'
23};
24nodeB.webservice = {
25  url: 'https://your-domain/api',
26  method: 'GET',
27  timeout: 10000
28};
29
30// new instance with Class & default config
31const config = {
32  {
33    "l10n": {
34      "title": "Assistant",
35      "apply": "Apply",
36      "applied": "Applied",
37      "applyAll": "Apply All"
38    },
39    "webservice": {
40      "url": "https://your-domain/api",
41      "params": {
42        "id": "mei",
43        "sex": "M"
44      },
45      "headers": {
46        "Content-Type": "application/json"
47      },
48      "method": "POST",
49      "withCredentials": false,
50      "timeout": 30000
51    }
52  }
53};
54
55const nodeC = new MscHelpMeWrite(config);
56document.body.appendChild(nodeC);
57</script>

API response

<msc-help-me-write /> will need api response the following payload. Both 「title」 and 「content」 need to set in each unit.

1{
2  "units": [
3    {
4      "title": "xxxxx",
5      "content": "xxxxx",
6      ...
7      ...
8      ...
9    },
10    {
11      "title": "xxxxx",
12      "content": "xxxxx",
13      ...
14      ...
15      ...
16    },
17    ...
18    ...
19    ...
20  ]
21}

Style Customization

Developers could apply styles to decorate <msc-help-me-write />'s looking.

1<style>
2msc-help-me-write {
3  --msc-help-me-write-trigger-size: 48px;
4  --msc-help-me-write-trigger-icon-scale: 1;
5  --msc-help-me-write-shadow-color-rgb: 0 0 0;
6
7  /* window */
8  --msc-help-me-write-window-inline-size: 360px;
9  --msc-help-me-write-window-block-size: 50dvh;
10  --msc-help-me-write-window-border-radius: 16px;
11  --msc-help-me-write-window-padding: 12px;
12  --msc-help-me-write-window-bgc: rgba(255 255 255);
13  --msc-help-me-write-window-border-color: transparent;
14  --msc-help-me-write-scrollbar-thumb-color: rgba(0 0 0/.2);
15  --msc-help-me-write-window-subject-color: rgba(35 42 49);
16  --msc-help-me-write-window-subject-bgc: rgba(240 243 245);
17  --msc-help-me-write-window-cancel-color: #5f6368;
18  --msc-help-me-write-window-cancel-overlay-color-rgb: 224 228 233;
19  --msc-help-me-write-transition-duration: 450ms;
20
21  /* result */
22  --msc-help-me-write-divide-line-color: rgba(0 0 0/.15);
23  --msc-help-me-write-result-title-color: rgba(35 42 49);
24  --msc-help-me-write-result-content-color: rgba(91 99 106);
25  --msc-help-me-write-result-content-bgc: rgba(245 248 250);
26  --msc-help-me-write-result-content-border-color: rgba(0 0 0/.1);
27  --msc-help-me-write-result-apply-color: rgba(15 105 255);
28  --msc-help-me-write-result-agent-color: rgba(253 97 0);
29}
30</style>

Attributes

<msc-help-me-write /> supports some attributes to let it become more convenience & useful.

• l10n

Set localization for <msc-help-me-write />. It will replace some content & button text to anything you like. It should be JSON string Developers could set title、apply、applied and applyAll here.

• title：Set window title. Default is Assistant.
• apply：Set apply button text. Default is Apply.
• applied：Set apply button text（user pressed）. Default is Applied.
• applyAll：Set apply all button text. This button showed only when results > 1. Default is Apply All.

1<msc-help-me-write
2  l10n='{"title":"Assistant","apply":"Apply","applied":"Applied","applyAll":"Apply All"}'
3>
4  ...
5</msc-help-me-write>

• webservice

Set web service information for <msc-help-me-write />. It should be JSON string. Developers could set url、params、headers、method、withCredentials and timeout here.

• url：api address for upload image. Default is /.
• params：Set parameters. Each of them will be attached with fetch. Default is {}.
• headers：Set fetch header. Default is {}.
• method：Set method for fetch. Default is POST.
• withCredentials：Set withCredentials for fetch. Default is false.
• timeout：Set timeout for fetch. Default is 30000 (ms).

1<msc-help-me-write
2  webservice='{"url":"/","params":{},"headers":{},"method":"POST","withCredentials":false,"timeout":30000}'
3>
4  ...
5</msc-help-me-write>

Properties

Property Name	Type	Description
l10n	Object	Getter / Setter for l10n. It will replace some UI text to anything you like. Developers could set title、apply、applied and applyAll.
webservice	Object	Getter / Setter for web service information. Developers could set url、params、headers、method、withCredentials and timeout.

Method

Method Signature	Description
query(params = {})	Go fetch suggestions with parameters you liked. Window will pop up when api success response. This is an async method. Such as：element.query({ title:'show me the money' })
refresh()	Correct trigger's display position.
dismiss()	Dissmiss window.

Event

Event Signature	Description
msc-help-me-write-apply	Fired when user apply suggestion. Developers could get data througn event.detatil（complete API response information）.
msc-help-me-write-error	Fired when error occured.
msc-help-me-write-cancel	Fired when window dismiss.

Reference

• <msc-help-me-write />
• WEBCOMPONENTS.ORG
• YouTube