コメントコンポーネントは、コメントエディタの上に複数の入力サジェストを表示し、クリックするとその内容をコメントとして送信できます。
showSuggestionsメソッドを使用することで、入力サジェストを配列で指定します。なお、hideSuggestionsメソッドを使用して入力サジェストを非表示に設定することができます。
設定例は以下の通りです。
import './styles.css';
import '@mescius/inputman.comment/CSS/gc.inputman.comment.css';
import { InputMan } from '@mescius/inputman.comment';
import { chatBotData } from './data.js';
function buildMaps(data) {
const queryToMessage = new Map();
const messageToQuery = new Map();
const mappingConfig = [
{
category: 'first',
messageKeys: ['account', 'product', 'license', 'other'],
returnTo: (msgKey) => data.queries[msgKey]
},
{
category: 'license',
messageKeys: ['licenseInfo', 'priceInfo'],
returnTo: () => data.queries.return
},
{
category: 'account',
messageKeys: ['accountCreate', 'resetPassword', 'purchase'],
returnTo: () => data.queries.return
},
{
category: 'product',
messageKeys: ['productInfo', 'useInfo'],
returnTo: () => data.queries.return
}
];
mappingConfig.forEach(({ category, messageKeys, returnTo }) => {
data.queries[category].forEach((query, index) => {
const messageKey = messageKeys[index];
const message = data.messages[messageKey];
queryToMessage.set(query, message);
messageToQuery.set(message, returnTo(messageKey));
});
});
const otherCases = [
{ query: '前の質問に戻る', message: data.messages.first },
{ query: '最初の質問に戻る', message: data.messages.first },
{ query: '', message: data.messages.selectItem }
];
otherCases.forEach(({ query, message }) => {
queryToMessage.set(query, message);
});
messageToQuery.set(data.messages.other, data.queries.return);
return { queryToMessage, messageToQuery };
}
const { queryToMessage: queryToMessageMap, messageToQuery: messageToQueryMap } = buildMaps(chatBotData);
const getMessage = (query) => queryToMessageMap.get(query) || chatBotData.messages.selectItem;
const getQueryItems = (message) => messageToQueryMap.get(message) || chatBotData.queries.first;
const scrollToComment = (commentId) => {
setTimeout(() => {
if (commentId) {
const renderedMsgElement = gcComment.getCommentElement(commentId);
if (renderedMsgElement) {
renderedMsgElement.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest',
});
} else {
const allComments = document.querySelectorAll('.gcim-comment');
if (allComments.length > 0) {
allComments[allComments.length - 1].scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest',
});
}
}
}
}, 100);
};
const postChatBot = (text) => {
const date = new Date();
const comment = {
id: date.valueOf().toString(),
userInfo: {
id: '0',
name: 'チャットボット',
},
content: text,
postTime: date,
updateTime: date,
reactions: text.includes('class="finalAnswer"')
? [
{ reactionChar: '👍', count: 0 },
{ reactionChar: '👎', count: 0 },
]
: [],
scrollIntoView: false,
};
gcComment.execCommand(InputMan.GcCommentCommand.AddCommentElement, { comment });
scrollToComment(comment.id);
};
const generateChat = (query) => {
setTimeout(() => {
const message = getMessage(query);
postChatBot(message);
gcComment.showSuggestions(getQueryItems(message));
}, 800);
};
const gcComment = new InputMan.GcComment(document.getElementById('gcComment'), {
userInfo: {
id: '1',
name: '森上 偉久馬',
},
loadComments: () => ({
comments: [],
hasMore: false
}),
banner: `<div style="text-align:center;">
<h1>InputManJSへようこそ</h1>
<div>ご用件をお伺いいたします</div>
</div>`,
showOpenReactionListButton: false,
showZeroReaction: true,
editorConfig: {},
header: [],
showIcon: false,
contextToolbar: [],
commentInfoAction: [],
openLinkMode: InputMan.OpenLinkMode.GoToComment,
height: 500,
commentMode: InputMan.GcCommentMode.ChatMode,
addCommentEditorPosition: InputMan.GcCommentEditorPosition.FixedBottom,
});
const initialQuery = chatBotData.messages.first;
gcComment.showSuggestions(getQueryItems(initialQuery));
gcComment.addEventListener(
InputMan.GcCommentEvent.AfterExecuteCommand,
(args) => {
if (
!args ||
!args.value ||
!args.value.comment ||
!args.value.comment.userInfo
) {
return;
}
const isAddCommand =
args.command === InputMan.GcCommentCommand.AddCommentElement;
const isUserComment = args.value.comment.userInfo.id === '1';
if (isAddCommand && isUserComment) {
const inputMsg = args.value.comment.content;
generateChat(inputMsg);
} else if (isAddCommand) {
scrollToComment(args.value.comment.id);
}
}
);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="コメントコンポーネント 使い方" lang="ja" xml:lang="ja" />
<title>コメントコンポーネント - 入力サジェスト</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<div id="gcComment"></div>
</body>
</html>
body {
box-sizing: content-box !important;
height: 551px !important;
}
export const chatBotData = {
queries: {
first: [
'アカウントや購入について',
'製品機能について',
'価格やライセンスについて',
'その他',
],
license: [
'ライセンスの種類を知りたい',
'製品の価格を知りたい',
'前の質問に戻る',
],
product: [
'製品の特長を紹介してほしい',
'製品の使い方を知りたい',
'前の質問に戻る',
],
account: [
'アカウントを作成したい',
'パスワードを忘れた',
'製品を購入したい',
'前の質問に戻る',
],
return: ['最初の質問に戻る'],
},
messages: {
first: 'ご用件をお伺いいたします。',
selectItem: 'ご質問内容を選択ください。',
license: '製品や価格に関するお問い合わせですね。ご要望をお選びください。',
product: '製品機能関するお問い合わせですね。ご要望をお選びください。',
account:
'アカウントや製品の購入に関するお問い合わせですね。ご要望をお選びください。',
other: `<p class="finalAnswer">その他のお問い合わせにつきましては、弊社営業部までお問い合わせください。</p>
<table style="width:100%;"><tbody><tr><th>専用窓口</th><td>営業部</td></tr><tr><th>営業時間</th><td>月～金 10:00～12:00／13:30～17:00</td></tr><tr><th>電話番号</th><td>050-5490-4661</td></tr><tr><th>FAX番号</th><td>050-3156-3561</td></tr><tr><th>メールアドレス</th><td><a href="mailto:sales@mescius.com">sales@mescius.com</a></td></tr></tbody></table>`,
accountCreate: `<p class="finalAnswer">アカウントの作成についてですね。</p><p>アカウント作成の手順は、弊社ホームページから確認することができます。<br>製品ページ:<a href="https://developer.mescius.jp/support/user/create" target="_blank" rel="noopener">アカウント作成・変更</a><br>上記のページをご参照下さい。</p>`,
resetPassword: `<p class="finalAnswer">パスワードの再設定についてですね。</p><p>パスワードの再設定は、以下のパスワードの再設定ページから行ってください。</p><a href="https://developer.mescius.jp/login/forgot-password" target="_blank" rel="noopener">パスワードの再設定ページ</a>`,
purchase: `<p class="finalAnswer">製品のご購入についてですね。</p><p class="margin">最新バージョンをお求めの場合には次の方法によりご購入いただけます。購入ルートによってお取引条件が異なりますので、直接お問合せください。</p>
<ul class="list">
<li>弊社から直接の購入する場合：<a href="https://developer.mescius.jp/purchase/how-to-buy#directsales" target="_blank" rel="noopener">こちら</a>をご覧ください。</li>
<li>オンラインから購入する場合:<a href="https://developer.mescius.jp/purchase/how-to-buy#onlinesales" target="_blank" rel="noopener">こちら</a>をご覧ください。</li>
<li>販売パートナーから購入する場合:<a href="https://developer.mescius.jp/purchase/how-to-buy#partnersales" target="_blank" rel="noopener">こちら</a>をご覧ください。</li>
</ul>`,
licenseInfo: `<p class="finalAnswer">InputManJSのライセンスの種類についてですね。InputManJSには次のライセンスがあります。</p><ul class="list">
<li>開発ライセンス：InputManJSを組み込んだアプリケーションを開発する際に利用するライセンスです。</li>
<li>配布ライセンス：InputManJSを組み込んだアプリケーションを配布する際に利用するライセンスです。</li>
</ul>
<p>ライセンスに関するより詳細な情報は、弊社製品ページから確認することができます。</p>
<p>製品ページ:<a href="https://developer.mescius.jp/license/javascript" target="_blank" rel="noopener">URL</a></p>`,
priceInfo: `<p class="finalAnswer">製品の価格についてですね。</p>
<p class="margin">一例として、製品のを開発する際に必要な、開発ライセンス（イニシャル）の価格は、税込みで <b>121,000円</b> となります。<br>他のライセンスの価格は、弊社製品ページから確認することができます。</p>
<p>製品ページ:<a href="https://developer.mescius.jp/inputmanjs/pricelist" target="_blank" rel="noopener">URL</a></p>`,
productInfo: `<p class="finalAnswer">製品の特長についてですね。</p>
<img src="https://demo.mescius.jp/inputmanjs/demos/resource/logo.png" style="width:50%; height:20%;" alt="InputManJSのロゴ">
<p class="margin">InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された日本仕様の入力用JavaScriptコントロールセットです。収録されているコントロールの実際の動作は、弊社デモ環境で確認することができます。</p>
<p>製品デモページ:<a href="https://demo.mescius.jp/inputmanjs/demos/" target="_blank" rel="noopener">InputManJS デモ</a></p>`,
useInfo: `<p class="finalAnswer">製品の利用方法についてですね。<br>以下の情報をご参考にしていただければと思います。</p>
<ul class="list">
<li>製品の実際の動作を確認したい場合：<a href="https://demo.mescius.jp/inputmanjs/demos/" target="_blank" rel="noopener">製品デモ</a>をご覧ください。</li>
<li>製品のドキュメントを確認したい場合:<a href="https://demo.mescius.jp/inputmanjs/docs/welcome" target="_blank" rel="noopener">製品ヘルプ</a>をご覧ください。</li>
<li>その他の技術情報を確認したい場合:<a href="https://support.mescius.jp/hc/ja/categories/360000686076" target="_blank" rel="noopener">ナレッジベース</a>をご覧ください。</li>
</ul>`,
},
};
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
