Vertex AI Script не открывает чат ⇐ CSS

[Anonymous]

Я создал ИИ-агент с помощью Google Vertex AI и хотел бы интегрировать его на свой веб-сайт с помощью виджета.
Интеграция отлично работает со стандартным сценарием, предоставленным Google. Однако стандартный стиль не соответствует нашим требованиям к дизайну, поэтому я соответствующим образом настроил код виджета.
После внесения этих изменений возникли следующие проблемы:

• Когда я нажимаю на свой настроенный виджет, окно чата больше не открывается.
• Кроме того, после открытия окно чата должно появиться в том месте на странице, которое я определил (не в том месте, которое я определил по умолчанию). положение исходного виджета).

Есть ли у кого-нибудь опыт того, как правильно восстановить поведение открытия и как аккуратно перезаписать положение окна чата, не влияя на функциональность скрипта?




/* 1. Der seitliche Tab (Rein optisch) */
#custom-ai-sidebar-tab {
position: fixed;
right: 0;
top: 65%;
transform: translateY(-50%);
background-color: #4C9176;
color: #ffffff;
padding: 25px 12px;
cursor: pointer;
border-radius: 12px 0 0 12px;
box-shadow: -4px 0 15px rgba(0,0,0,0.15);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

/* Text von unten nach oben */
#custom-ai-sidebar-tab span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none; /* Klick geht an den Container */
}

#custom-ai-sidebar-tab:hover {
padding-right: 20px;
background-color: #3d755f;
}

/* 2. Google Messenger - Position unten rechts fixiert */
df-messenger {
z-index: 9999;
position: fixed;
bottom: 16px;
right: 16px;
--df-messenger-font-color: #000;
--df-messenger-font-family: Roboto;
--df-messenger-chat-background: #f3f6fc;
--df-messenger-message-user-background: #d3e3fd;
--df-messenger-message-bot-background: #fff;
--df-messenger-titlebar-background: #4C9176;
--df-messenger-chat-bubble-background: #A5C8BA;
}

/* Versteckt die Standard-Bubble komplett */
df-messenger-chat-bubble {
display: none !important;
}


AI COMPASS






function triggerGoogleChat() {
const messenger = document.querySelector('df-messenger');

// Weg 1: Versuche die offizielle API
if (messenger.showChat) {
messenger.showChat();
}

// Weg 2: Falls showChat gesperrt ist, Attribut setzen
messenger.setAttribute('opened', 'true');

// Weg 3: Direkter Klick-Event für den Fall, dass der Shadow DOM blockt
const event = new CustomEvent('df-messenger-open', { bubbles: true });
messenger.dispatchEvent(event);
}

// Tab verstecken, wenn Chat offen ist
window.addEventListener('df-messenger-chat-opened', () => {
document.getElementById('custom-ai-sidebar-tab').style.display = 'none';
});

window.addEventListener('df-messenger-chat-closed', () => {
document.getElementById('custom-ai-sidebar-tab').style.display = 'flex';
});



Подробнее здесь: https://stackoverflow.com/questions/798 ... en-chatbox