-.main-section{
+#repl_chat{
width: 300px;
position: fixed;
right:50px;
.first-section:hover{
cursor: pointer;
}
-.open-more{
+#repl_chat.open-more{
bottom:0px;
transition:1s;
}
.right-chat img{
float:right;
}
-.second-section{
+#repl_chat .second-section{
padding: 0px;
margin: 0px;
background-color: #F3F3F3;
background-color: #FFFFFF;
color:#FD8468;
}
-.third-section{
-/*.text-bar {*/
+.third-section {
+ width:100%;
+ margin-top:-1px;
border-top: 1px solid #EEEEEE;
}
.text-bar input{
- width:120%;
- margin-left:-15px;
+ width:100%;
padding:10px 10px;
border:1px solid #fff;
}
margin-top: 8px;
border-radius: 50%;
text-align: center;
+
+ position: absolute;
+ right:0px;
+ bottom:10px;
}
.left-chat:before{
content: " ";
bottom:150px;
border:15px solid transparent;
border-top-color:#fff;
-}
\ No newline at end of file
+}
+/* プレースホルダー */
+input:focus:placeholder-shown {
+color: transparent;
+}
+input:focus::-webkit-input-placeholder {
+color: transparent;
+}
+input:focus::-moz-placeholder {
+color: transparent;
+}
+input:focus:-ms-input-placeholder {
+color: transparent;
+}
+input:focus::-ms-input-placeholder {
+color: transparent;
+}
if (empty($this->configId)) $this->configId = $defConfigId; // 呼び出しウィンドウから引き継いだ定義ID
// 入力値を取得
- $name = $request->trimValueOf('item_name'); // ヘッダタイトル
- $text = $request->valueOf('item_text'); // コンテンツ
+ $name = $request->trimValueOf('item_name'); // 設定名
+ $apiKey = $request->valueOf('item_apikey'); // Repl-AIのAPIキー
+ $botId = $request->valueOf('item_botid'); // ボットID
+ $scenarioId = $request->valueOf('item_scenarioid'); // シナリオID
$replaceNew = false; // データを再取得するかどうか
if ($act == 'add'){// 新規追加
private $cssFilePath; // CSSファイル
const DEFAULT_CONFIG_ID = 0;
- const DEFAULT_TITLE = '簡易Wikiコンテンツ'; // デフォルトのウィジェットタイトル名
+ const DEFAULT_TITLE = 'Repl-AIチャットロボット'; // デフォルトのウィジェットタイトル名
const DEFAULT_CSS_FILE = '/default.css'; // CSSファイル
+ const REPLAI_INIT_URL = 'https://api.repl-ai.jp/v1/registration'; // チャット初期化用API
+ const REPLAI_MESSAGE_URL = 'https://api.repl-ai.jp/v1/dialogue'; // チャットメッセージ送受信用API
+ const SESSION_KEY_APP_USER_ID = 'app_user_id'; // チャットユーザID保存用セッションキー
/**
* コンストラクタ
return;
}
- // wikiコンテンツを変換
- $text = $targetObj->text; // コンテンツ
-
- // 画面に埋め込む
- $this->tmpl->addVar("_widget", "content", $text);
+ $act = $request->trimValueOf('act');
+ if ($act == 'chatinit'){ // チャット開始
+ // ##### ウィジェット出力処理中断 ######
+ $this->gPage->abortWidget();
+
+ $headers = array(
+ 'Content-Type: application/json; charset=UTF-8',
+ 'x-api-key: tUwueVKJzTPEiVNj4bdZgGLVThx3W84CkkXK2d7L'
+ );
+ $data = array(
+ 'botId' => 'sample'
+ );
+
+ $options = array('http' => array(
+ 'method' => 'POST',
+ 'header' => implode("\r\n", $headers),
+ 'content' => json_encode($data)
+ ));
+
+ $context = stream_context_create($options);
+ $response = file_get_contents(self::REPLAI_INIT_URL, false, $context);
+ $res = json_decode($response);
+
+ $message = '';
+ if (!empty($res->appUserId)){
+ // セッションにユーザIDを保存
+ $this->setWidgetSession(self::SESSION_KEY_APP_USER_ID, $res->appUserId);
+
+ // 初回メッセージを取得
+ $data = array(
+ 'appUserId' => $res->appUserId,
+ 'botId' => 'sample',
+ 'voiceText' => 'init',
+ 'initTalkingFlag' => true,
+ 'initTopicId' => 'simple'
+ );
+
+ $options = array('http' => array(
+ 'method' => 'POST',
+ 'header' => implode("\r\n", $headers),
+ 'content' => json_encode($data)
+ ));
+
+ $context = stream_context_create($options);
+ $response = file_get_contents(self::REPLAI_MESSAGE_URL, false, $context);
+ $res = json_decode($response);
+ $message = $res->systemText->expression;
+ //$res->systemText->utterance // 音声合成用テキスト
+ //$res->serverSendTime // レスポンス時刻
+ }
+ // フロントへ返す値を設定
+ $this->gInstance->getAjaxManager()->addData('message', $message);
+ return;
+ } else if ($act == 'chatmsg'){ // フロントからのメッセージを受信
+ // ##### ウィジェット出力処理中断 ######
+ $this->gPage->abortWidget();
+
+ // セッションからユーザIDを取得
+ $appUserId = $this->setWidgetSession(self::SESSION_KEY_APP_USER_ID);
+ $peerid = $request->trimValueOf('peerid');
+
+ // フロントへ返す値を設定
+ $this->gInstance->getAjaxManager()->addData('result', $ret); // メール送信結果
+ return;
+ }
}
/**
* ウィジェットのタイトルを設定
*
* @package Magic3 Framework
* @author 平田直毅(Naoki Hirata) <naoki@aplo.co.jp>
- * @copyright Copyright 2006-2015 Magic3 Project.
+ * @copyright Copyright 2006-2018 Magic3 Project.
* @license http://www.gnu.org/copyleft/gpl.html GPL License
* @version SVN: $Id$
* @link http://www.magic3.org
<tr>
<th>名前</th>
<td>
- <div class="col-sm-4 m3config_item">
+ <div class="col-sm-4 m3config_item justify-3">
<select name="item_id" class="form-control" onchange="selectItem();" {ID_DISABLED}>
<option value="0">-- 新規登録 --</option>
<patTemplate:tmpl name="title_list">
</select>
</div>
<patTemplate:tmpl name="item_name_visible" visibility="hidden">
- <div class="col-sm-4 m3config_item"><input type="text" name="item_name" class="form-control" value="{NAME}" size="40" maxlength="40" /></div>
+ <div class="col-sm-4 m3config_item justify-3"><input type="text" name="item_name" class="form-control" value="{NAME}" size="40" maxlength="40" /></div>
</patTemplate:tmpl>
</td>
</tr>
<tr>
- <th>コンテンツ</th>
- <td class="ckeditor"><textarea name="item_text" rows="20">{TEXT}</textarea></td>
+ <th><span {_HELP_UNTITLEDTASK_APIKEY}>開発者向け<br />APIキー</span></th>
+ <td><input type="text" name="item_apikey" value="{API_KEY}" maxlength="100" /></td>
+ </tr>
+ <tr>
+ <th><span {_HELP_UNTITLEDTASK_BOTID}>ボットID</span></th>
+ <td><div class="col-sm-4 m3config_item"><input type="text" name="item_botid" value="{BOT_ID}" maxlength="20" /></div></td>
+ </tr>
+ <tr>
+ <th><span {_HELP_UNTITLEDTASK_SCENARIOID}>シナリオID</span></th>
+ <td><div class="col-sm-4 m3config_item"><input type="text" name="item_scenarioid" value="{SCENARIO_ID}" maxlength="20" /></div></td>
</tr>
</tbody>
</table>
<div class="well m3config_update_buttons">
+<div class="pull-left text-left" style="width:80%;"><i class="glyphicon glyphicon-info-sign"></i> チャットロボットRepl-AI(<a href="https://repl-ai.jp/">https://repl-ai.jp/</a>)を使用するには登録が必要です。設定値はRepl-AIの管理画面から取得してください。</div>
<patTemplate:tmpl name="del_button" visibility="hidden">
<input type="button" class="button" onclick="deleteItem();" value="削除" />
</patTemplate:tmpl>
faSpan.remove();
var html = '';
- html += '<div class="main-section">';
+ html += '<div id="repl_chat">';
html += '<div class="row border-chat">';
html += '<div class="col-md-12 col-sm-12 col-xs-12 first-section">';
html += '<div class="row">';
html += '</div>';
html += '</div>';
html += '</div>';
- html += '<div class="row border-chat third-section ">';
- html += '<div class="col-md-10 text-bar">';
+ html += '<div class="row border-chat">';
+ html += '<div class="third-section text-bar">';
html += '<input type="text" id="chat_message" placeholder="メッセージをどうぞ">';
html += '</div>';
- html += '<div class="
col-md-2 text-right text-bar-icon"><a href="javascript:void(0);" id="chat_sendmessage"><i class="fa fa-arrow-right" aria-hidden="true"></i></a></div>';
+ html += '<div class="text-right text-bar-icon"><a href="javascript:void(0);" id="chat_sendmessage"><i class="fa fa-arrow-right" aria-hidden="true"></i></a></div>';
html += '</div>';
html += '</div>';
-
$("body").append(html);
+
+ $(".left-first-section").click(function(){
+ $('#repl_chat').toggleClass("open-more");
+ });
+ $("#chat_open_panel").click(function(){
+ $('#repl_chat').toggleClass("open-more");
+ });
+ $("#chat_sendmessage").click(function(){
+ var message = $('#chat_message').val();
+ if (message == '') return;
+
+ m3_ajax_request('', 'act=chatmsg&message=' + message, function(request, retcode, jsondata){ // 正常終了
+ // 返答メッセージを表示
+ /*if (jsondata.message){
+ if (jsondata.message != '') alert(jsondata.message);
+ }*/
+ $('#chat_message').val('');
+ }, function(request){ // 異常終了
+ alert('通信に失敗しました。');
+ });
+ });
+
+ // チャット初期化
+ m3_ajax_request('', 'act=chatinit', function(request, retcode, jsondata){ // 正常終了
+ // 返答メッセージを表示
+ /*if (jsondata.message){
+ if (jsondata.message != '') alert(jsondata.message);
+ }*/
+ }, function(request){ // 異常終了
+ alert('通信に失敗しました。');
+ });
});
//]]>
</script>
OSDN Git Service
