Advanced ChatGPT Widget
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #e0f7fa;
}
#chatbox {
width: 300px;
border: 1px solid #00796b;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
#chat-content {
padding: 10px;
flex-grow: 1;
overflow-y: auto;
max-height: 300px;
}
.message {
margin: 5px 0;
}
#input-container {
display: flex;
flex-direction: column;
border-top: 1px solid #00796b;
}
#user-input1, #user-input2, #user-input3 {
border: none;
padding: 10px;
width: calc(100% - 20px);
border-bottom: 1px solid #00796b;
}
#send-btn {
border: none;
background-color: #00796b;
color: white;
padding: 10px;
cursor: pointer;
width: 100%;
border-radius: 0 0 10px 10px;
}
#send-btn:hover {
background-color: #004d40;
}
document.getElementById('send-btn').addEventListener('click', () => {
const userInput1 = document.getElementById('user-input1').value;
const userInput2 = document.getElementById('user-input2').value;
const userInput3 = document.getElementById('user-input3').value;
if (userInput1.trim() !== '' && userInput2.trim() !== '' && userInput3.trim() !== '') {
addMessage('User1', userInput1);
addMessage('User2', userInput2);
addMessage('User3', userInput3);
document.getElementById('user-input1').value = '';
document.getElementById('user-input2').value = '';
document.getElementById('user-input3').value = '';
// Simulate response from ChatGPT
setTimeout(() => {
const response1 = generateResponse(userInput1, 'chart1');
const response2 = generateResponse(userInput2, 'chart2');
const response3 = generateResponse(userInput3, 'chart3');
addMessage('ChatGPT', response1);
addMessage('ChatGPT', response2);
addMessage('ChatGPT', response3);
}, 1000);
}
});
function addMessage(sender, message) {
const chatContent = document.getElementById('chat-content');
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `
${sender}: ${message}`;
chatContent.appendChild(messageElement);
chatContent.scrollTop = chatContent.scrollHeight;
}
function generateResponse(input, chartId) {
let response;
if (input.toLowerCase().includes('business intel analytics of 1st quarter')) {
response = 'Look in figure 4 for projected analytics forecast.';
displayChart1(chartId);
} else if (input.toLowerCase().includes('show market target and compare variables')) {
response = 'Look to the pie chart for chances of market target success.';
displayChart2(chartId);
} else if (input.toLowerCase().includes('data analytics')) {
response = 'Data analytics details are provided in the charts below.';
displayChart1(chartId);
displayChart2(chartId);
} else {
response = `You said: ${input}`;
}
return response;
}
function displayChart1(chartId) {
const ctx = document.getElementById(chartId).getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Projected Analytics',
data: [65, 59, 80, 81],
backgroundColor: ['#00796b', '#004d40', '#00796b', '#004d40']
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
function displayChart2(chartId) {
const ctx = document.getElementById(chartId).getContext('2d');
new Chart(ctx, {
type: 'pie',
data: {
labels: ['Target A', 'Target B', 'Target C'],
datasets: [{
label: 'Market Target Success',
data: [30, 40, 30],
backgroundColor: ['#00796b', '#004d40', '#00796b']
}]
},
options: {
responsive: true
}
});
}
function displayChart3(chartId) {
const ctx = document.getElementById(chartId).getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Performance Over Time',
data: [65, 59, 80, 81, 56],
borderColor: '#00796b',
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
