Подсказка для длинных текстов в картах героев - PullRequest
Новая
       20

Подсказка для длинных текстов в картах героев

0 голосов
/ 28 мая 2019

Я использую Bot Framework Webchat (на основе React). Я использую Card Actions (Карты Героев), чтобы предложить список похожих вопросов. Иногда текст на Карте Героев может быть слишком длинным. В этом случае текст обрезается и заменяется тремя точками. Можно ли иметь подсказку для карт героев?

enter image description here

Я просмотрел параметры HeroCard в коде, но не нашел ничего подходящего.

enter image description here

Я поднял это на Github: https://github.com/microsoft/BotFramework-WebChat/issues/2032

Любая помощь с этим, пожалуйста?

1 Ответ

1 голос
/ 28 мая 2019

Веб-чат использует пакет NPM Adaptive Cards для рендеринга карт, и, к сожалению, Adaptive Cards не поддерживает добавление описания всплывающей подсказки к элементам карты. Однако на GitHub открыто несколько проблем , касающихся добавления функции всплывающей подсказки, поэтому, надеюсь, эта функция будет доступна в веб-чате в ближайшее время.

Несмотря на то, что Adaptive Cards не поддерживает добавление всплывающих подсказок, вы можете создать промежуточное программное обеспечение для веб-чата и внедрить свой собственный рендер-редактор Hero Card. Приведенный ниже фрагмент кода показывает базовый рендерер Карты Героев без каких-либо стилей. 

<script type="text/babel">

  const HeroCardAttachment = ({ buttons, images, title, store }) =>
    <div className='ac-container'>
      <div className='ac-container'>
        { images.map(({ url }, index) => 
          <window.React.Fragment key={ index }>
            <div>
              <img src= { url } />
            </div>
            <div style={{height: '8px'}}/>
          </window.React.Fragment>
        )}
        <div>{ title }</div>
      </div>
      <div />
      <div >
        { buttons.map(({ title, type, value }, index) => (
          <window.React.Fragment key={ index }>
            <button 
              aria-label={ title }
              type='button' 
              title={ title }
              onClick={ () => {
                switch (type) {
                  case 'openUrl':
                    window.open(value)
                    break;
                  case 'postBack':
                    store.dispatch({
                      type: 'WEB_CHAT/SEND_POST_BACK',
                      payload: { value }
                    });
                    break;
                  default:
                    store.dispatch({
                      type: 'WEB_CHAT/SEND_MESSAGE_BACK',
                      payload: { value, text: value, displayText: value }
                    });
                }
              }}
            >
              <div title={ title }>
                { title }
              </div>
            </button>
            <div />
          </window.React.Fragment>
        ))}
      </div>
    </div>;

  (async function () {

    const res = await fetch('/directline/token', { method: 'POST' });
    const { token } = await res.json();
    const { createStore, ReactWebChat } = window.WebChat;
    const store = createStore();

    const attachmentMiddleware = () => next => card => {
      switch (card.attachment.contentType) {
        case 'application/vnd.microsoft.card.hero':
          return <HeroCardAttachment {...card.attachment.content} store={ store }/>;
        default:
          return next(card);
      }
    };

    window.ReactDOM.render(
      <ReactWebChat
        attachmentMiddleware={ attachmentMiddleware }
        directLine={ window.WebChat.createDirectLine({ token }) }
        store={ store }
      />,
      document.getElementById('webchat')
    );

    store.dispatch({
      type: 'WEB_CHAT/SET_SEND_BOX',
      payload: { text: 'sample:github-repository' }
    });

    document.querySelector('#webchat > *').focus();
  })().catch(err => console.error(err));
</script>

enter image description here

Для получения более подробной информации о промежуточном программном обеспечении вложений, посмотрите на этот образец .

Надеюсь, это поможет.

...