Как изменить SendIcon в WebChat

Question

Я пытаюсь заменить значок отправки в веб-чате. Я могу изменить цвета существующего значка, но как я могу заменить изображение SVG другим?

Answer 1

Если вы не хотите раскошелиться и построить репо, альтернативой является изменение элемента непосредственно в html. Вообще говоря, изменение DOM напрямую в среде React не является наилучшей практикой, однако в этом случае результаты выглядят стабильными.

Существует также открытый вопрос о репозитории BotFramework-WebChat ( # 1839 ), в котором обсуждается возможность настройки sendBox. Нет ETA, когда это может произойти, но что-то нужно иметь в виду.

Чтобы добавить это на свою страницу, добавьте код, начинающийся с const parent. Обязательно установите размер изображения 28x28, если вы хотите сохранить тот же размер, что и текущая стрелка.

<script>
  ( async function () {
    const res = await fetch( 'http://somesite/directline/token', { method: 'POST' } );
    const { token } = await res.json();

    [...]

    document.querySelector( '#webchat > *' ).focus();

    const parent = document.getElementsByClassName( 'main' )
    const child = parent[0].children[2].getElementsByTagName('svg');
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    const img = document.createElement("img");
    img.src= 'bot - small.png';
    svg.setAttribute('height', '28');
    svg.setAttribute('width', '28');
    svg.appendChild(img);
    child[0].replaceWith(img);

    }
  )().catch( err => console.error( err ) );
</script>

Надежда на помощь!

Answer 2

Похоже, что значок не может быть изменен в качестве настройки в настоящее время.

Но вы все равно можете разветвить хранилище и изменить значок, его определение находится здесь: https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/SendBox/Assets/SendIcon.js

import React from 'react';

const SendIcon = () => (
  <svg height={28} viewBox="0 0 45.7 33.8" width={28}>
    <path clipRule="evenodd" d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z" />
  </svg>
);

export default SendIcon;