From 322dfd2a6aae425c9ac1412055edcf35d7b29720 Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 15:57:34 +0200 Subject: [PATCH 1/7] feat: add new column to Chat logs for thumbs up/down Refs: RW-928 --- modules/ocha_ai_chat/ocha_ai_chat.install | 26 +++++++++++++++++++ .../src/Form/OchaAiChatLogsForm.php | 4 +++ 2 files changed, 30 insertions(+) diff --git a/modules/ocha_ai_chat/ocha_ai_chat.install b/modules/ocha_ai_chat/ocha_ai_chat.install index 9ba130a..a8bc7a5 100644 --- a/modules/ocha_ai_chat/ocha_ai_chat.install +++ b/modules/ocha_ai_chat/ocha_ai_chat.install @@ -133,6 +133,13 @@ function ocha_ai_chat_schema() { 'size' => 'medium', 'not null' => FALSE, ], + 'thumbs' => [ + 'description' => 'Whether user clicked thumbs up or down.', + 'type' => 'text', + 'size' => 'normal', + 'not null' => TRUE, + 'default' => '', + ], ], 'primary key' => ['id'], ]; @@ -197,3 +204,22 @@ function ocha_ai_chat_update_10003(array &$sandbox) { $schema->createTable('ocha_ai_chat_preferences', ocha_ai_chat_schema()['ocha_ai_chat_preferences']); } } + +/** + * Implements hook_update_N(). + * + * Add field to the OCHA AI chat logs table. + */ +function ocha_ai_chat_update_10004(array &$sandbox) { + $schema = \Drupal::database()->schema(); + + $thumbs = [ + 'description' => 'Whether user clicked thumbs up or down.', + 'type' => 'text', + 'size' => 'normal', + 'not null' => TRUE, + 'default' => '', + ]; + + $schema->addField('ocha_ai_chat_logs', 'thumbs', $thumbs); +} diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatLogsForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatLogsForm.php index bb5d196..337bead 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatLogsForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatLogsForm.php @@ -197,6 +197,9 @@ public function buildForm(array $form, FormStateInterface $form_state): array { 'feedback' => [ 'data' => $this->t('Feedback'), ], + 'thumbs' => [ + 'data' => $this->t('Thumbs'), + ], 'stats' => [ 'data' => $this->t('Stats'), ], @@ -265,6 +268,7 @@ public function buildForm(array $form, FormStateInterface $form_state): array { ], ], ], + 'thumbs' => $record->thumbs ?? '', 'stats' => [ 'data' => [ '#type' => 'details', From 6c947e165dd6255ed8523ebf67de811d9bb24578 Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:00:07 +0200 Subject: [PATCH 2/7] fix: send thumbs up/down feedback to new column Refs: RW-928 --- .../src/Form/OchaAiChatChatForm.php | 24 ++++++++++--------- .../src/Form/OchaAiChatConfigForm.php | 1 + .../ocha_ai_chat/src/Services/OchaAiChat.php | 23 ++++++++++++++++++ 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php index e0a7a92..bfa90be 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php @@ -193,9 +193,11 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po ], ]; - if ($feedback_type === 'simple') { + // There are multiple "modes" for feedback. We check the config value/ + // before deciding what UI widgets to render. + if ($feedback_type === 'simple' || $feedback_type === 'both') { // Container for simple feedback. - $form['chat'][$index]['feedback'] = [ + $form['chat'][$index]['feedback_simple'] = [ '#type' => 'fieldset', '#title' => $this->t('Provide feedback'), '#title_display' => 'invisible', @@ -206,7 +208,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po ]; // Thumbs up. - $form['chat'][$index]['feedback']['good'] = [ + $form['chat'][$index]['feedback_simple']['good'] = [ '#type' => 'submit', '#name' => 'chat-result-' . $index . '-simple-feedback-good', '#value' => $this->t('Good'), @@ -222,7 +224,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po ]; // Thumbs down. - $form['chat'][$index]['feedback']['bad'] = [ + $form['chat'][$index]['feedback_simple']['bad'] = [ '#type' => 'submit', '#name' => 'chat-result-' . $index . '-simple-feedback-bad', '#value' => $this->t('Bad'), @@ -238,7 +240,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po ]; // Copy button. - $form['chat'][$index]['feedback']['copy'] = [ + $form['chat'][$index]['feedback_simple']['copy'] = [ '#type' => 'inline_template', '#template' => '', '#context' => [ @@ -247,7 +249,9 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po ], ]; } - else { + + // Detailed feedback. + if ($feedback_type !== 'simple') { $form['chat'][$index]['feedback'] = [ '#type' => 'details', '#title' => $this->t('Please give feedback'), @@ -447,16 +451,14 @@ public function submitSimpleFeedback(array &$form, FormStateInterface $form_stat // Convert the thumbs up/down to an integer. if ($feedback === 'good') { - $feedback_int = 4; - $feedback_msg = 'User clicked thumbs up'; + $feedback_val = 'up'; } else { - $feedback_int = 2; - $feedback_msg = 'User clicked thumbs down'; + $feedback_val = 'down'; } // Record the feedback. - $this->ochaAiChat->addAnswerFeedback($id, $feedback_int, $feedback_msg); + $this->ochaAiChat->addAnswerThumbs($id, $feedback_val); $response = new AjaxResponse(); $response->addCommand(new MessageCommand($this->t('Feedback submitted, thank you.'), $selector)); diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatConfigForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatConfigForm.php index 005d115..6c32fa8 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatConfigForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatConfigForm.php @@ -154,6 +154,7 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#options' => [ 'detailed' => $this->t('Detailed feedback'), 'simple' => $this->t('Simple feedback'), + 'both' => $this->t('Both feedback modes'), ], '#description' => $this->t('Simple feedback displays a thumbs up/down instead of offering open comment fields on each answer.'), ]; diff --git a/modules/ocha_ai_chat/src/Services/OchaAiChat.php b/modules/ocha_ai_chat/src/Services/OchaAiChat.php index dbfdcff..2cb0e42 100644 --- a/modules/ocha_ai_chat/src/Services/OchaAiChat.php +++ b/modules/ocha_ai_chat/src/Services/OchaAiChat.php @@ -374,6 +374,29 @@ public function addAnswerFeedback(int $id, int $satisfaction, string $feedback): return !empty($updated); } + /** + * Add thumbs up/down to an answer's log entry. + * + * @param int $id + * The ID of the answer log. + * @param string $value + * Up or down. + * + * @return bool + * TRUE if a record was updated. + */ + public function addAnswerThumbs(int $id, string $value): bool { + $updated = $this->database + ->update('ocha_ai_chat_logs') + ->fields([ + 'thumbs' => $value, + ]) + ->condition('id', $id, '=') + ->execute(); + + return !empty($updated); + } + /** * Get a list of source documents for the given document source URL. * From 0136e2d904e7cddb84b89612cde73d738966b663 Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:02:08 +0200 Subject: [PATCH 3/7] fix(ux): style tweaks now that both widgets are visible Refs: RW-928 --- modules/ocha_ai_chat/components/chat-form/chat-form.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/ocha_ai_chat/components/chat-form/chat-form.css b/modules/ocha_ai_chat/components/chat-form/chat-form.css index df899c5..f9c4f20 100644 --- a/modules/ocha_ai_chat/components/chat-form/chat-form.css +++ b/modules/ocha_ai_chat/components/chat-form/chat-form.css @@ -135,7 +135,7 @@ button doesn't overlay any text */ */ .ocha-ai-chat-chat-form details { display: block; - margin: 0 12px; + margin: 0; padding: 12px; border: 1px solid #ddd; border-radius: 3px; @@ -168,6 +168,10 @@ button doesn't overlay any text */ max-width: 100%; } +.ocha-ai-chat-chat-form__advanced { + margin-inline: 12px; +} + /** * Q/A history * From 7148e8aae66ae3d9af458fdd2f1746b4f3dfb43d Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:11:13 +0200 Subject: [PATCH 4/7] fix(ux): context-specific feedback for thumbs up/down Refs: RW-928 --- modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php index bfa90be..5e19125 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php @@ -452,16 +452,18 @@ public function submitSimpleFeedback(array &$form, FormStateInterface $form_stat // Convert the thumbs up/down to an integer. if ($feedback === 'good') { $feedback_val = 'up'; + $feedback_msg = $this->t('Glad you liked this answer.'); } else { $feedback_val = 'down'; + $feedback_msg = $this->t('Thank you for your feedback.'); } // Record the feedback. $this->ochaAiChat->addAnswerThumbs($id, $feedback_val); $response = new AjaxResponse(); - $response->addCommand(new MessageCommand($this->t('Feedback submitted, thank you.'), $selector)); + $response->addCommand(new MessageCommand($feedback_msg, $selector)); return $response; } From d049ecd747684935de134985ee837fed9d93c792 Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:24:55 +0200 Subject: [PATCH 5/7] fix(ux): clean up the clipboard feedback Refs: RW-928 --- .../components/chat-form/chat-form.css | 14 ++++++++++---- .../ocha_ai_chat/src/Form/OchaAiChatChatForm.php | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/modules/ocha_ai_chat/components/chat-form/chat-form.css b/modules/ocha_ai_chat/components/chat-form/chat-form.css index f9c4f20..d5d466b 100644 --- a/modules/ocha_ai_chat/components/chat-form/chat-form.css +++ b/modules/ocha_ai_chat/components/chat-form/chat-form.css @@ -341,12 +341,18 @@ button.feedback-button.feedback-button.feedback-button.feedback-button:focus { background-color: var(--cd-green--light); } -/* for copy button only */ -.ocha-ai-chat-result-feedback .feedback-button--copy + [role="status"] { - font-size: .8em; - margin-inline-start: 0.5rem; +/** + * Clipboard feedback message + */ +.clipboard-feedback { + font-size: .75em; position: relative; top: -3px; + background: var(--cd-black); + color: var(--cd-white); + border-radius: 3px; + margin-inline-start: 0.5rem; + padding: 0.2rem 0.25rem; } /** diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php index 5e19125..69aff52 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php @@ -242,7 +242,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po // Copy button. $form['chat'][$index]['feedback_simple']['copy'] = [ '#type' => 'inline_template', - '#template' => '', + '#template' => '', '#context' => [ 'answer_id' => $answer_id, 'success_message' => $this->t('Answer was copied to clipboard'), From c27df69f54632d9bf0e3729986a4be9b6e10a5ae Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:29:02 +0200 Subject: [PATCH 6/7] fix(ux): labels for thumbs up/down buttons Refs: RW-928 --- modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php index 69aff52..aa02d36 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php @@ -211,7 +211,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po $form['chat'][$index]['feedback_simple']['good'] = [ '#type' => 'submit', '#name' => 'chat-result-' . $index . '-simple-feedback-good', - '#value' => $this->t('Good'), + '#value' => $this->t('Like'), '#attributes' => [ 'class' => ['feedback-button', 'feedback-button--good'], 'data-result-id' => $record['id'], @@ -227,7 +227,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po $form['chat'][$index]['feedback_simple']['bad'] = [ '#type' => 'submit', '#name' => 'chat-result-' . $index . '-simple-feedback-bad', - '#value' => $this->t('Bad'), + '#value' => $this->t('Dislike'), '#attributes' => [ 'class' => ['feedback-button', 'feedback-button--bad'], 'data-result-id' => $record['id'], From a7724b6a1e6dfa117fe53fe6d20f276dd40d0936 Mon Sep 17 00:00:00 2001 From: Chris Ruppel Date: Tue, 2 Apr 2024 16:47:20 +0200 Subject: [PATCH 7/7] fix(ux): label for detailed feedback Refs: RW-928 --- modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php index aa02d36..8603866 100644 --- a/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php +++ b/modules/ocha_ai_chat/src/Form/OchaAiChatChatForm.php @@ -254,7 +254,7 @@ public function buildForm(array $form, FormStateInterface $form_state, ?bool $po if ($feedback_type !== 'simple') { $form['chat'][$index]['feedback'] = [ '#type' => 'details', - '#title' => $this->t('Please give feedback'), + '#title' => $this->t('Provide detailed feedback'), '#id' => 'chat-result-' . $index . '-feedback', '#open' => FALSE, '#attributes' => [