ChatGPT Look and Feel

<?php

namespace app\widgets;

use Yii;
use yii\base\Widget;
use yii\helpers\Html;
use yii\helpers\Url;

class ChatResponseWidget extends Widget
{
public $initialText = “Click Regenerate to get a response…”;
public $generateUrl = [‘/chat/generate’]; // URL for AJAX regeneration

public function run()
{
$this->registerAssets();
return Html::tag(‘div’,
Html::tag(‘pre’, $this->initialText, [‘id’ => ‘chat-output’, ‘class’ => ‘whitespace-pre-wrap p-4 bg-gray-100 rounded-lg shadow-md’]) .
Html::tag(‘div’,
Html::button(‘Copy’, [‘id’ => ‘copyBtn’, ‘class’ => ‘px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600’]) .
Html::button(‘Regenerate’, [‘id’ => ‘regenerateBtn’, ‘class’ => ‘px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 ml-2’]) .
Html::button(‘Edit’, [‘id’ => ‘editBtn’, ‘class’ => ‘px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 ml-2’]),
[‘class’ => ‘flex gap-2 mt-2’]
),
[‘class’ => ‘relative’]
);
}

protected function registerAssets()
{
$generateUrl = Url::to($this->generateUrl);

$js = <<<JS
document.getElementById(‘copyBtn’).addEventListener(‘click’, function() {
navigator.clipboard.writeText(document.getElementById(‘chat-output’).textContent);
alert(“Copied to clipboard!”);
});

document.getElementById(‘regenerateBtn’).addEventListener(‘click’, function() {
fetch(‘$generateUrl‘)
.then(response => response.json())
.then(data => document.getElementById(‘chat-output’).textContent = data.response)
.catch(error => console.error(“Error:”, error));
});

document.getElementById(‘editBtn’).addEventListener(‘click’, function() {
let newText = prompt(“Edit response:”, document.getElementById(‘chat-output’).textContent);
if (newText !== null) document.getElementById(‘chat-output’).textContent = newText;
});
JS;

$this->view->registerJs($js);
}
}

<?php

namespace app\controllers;

use Yii;
use yii\web\Controller;
use yii\web\Response;

class ChatController extends Controller
{
public function actionGenerate()
{
Yii::$app->response->format = Response::FORMAT_JSON;
return [‘response’ => “This is a regenerated response…”];
}
}

use app\widgets\ChatResponseWidget;

echo ChatResponseWidget::widget();