@patternfly/chatbot 6.5.0 → 6.6.0-prerelease.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DeepThinking/DeepThinking.d.ts +5 -1
- package/dist/cjs/DeepThinking/DeepThinking.js +2 -2
- package/dist/cjs/DeepThinking/DeepThinking.test.js +18 -0
- package/dist/cjs/MessageBar/MessageBar.d.ts +6 -0
- package/dist/cjs/MessageBar/MessageBar.js +29 -12
- package/dist/cjs/MessageBar/MessageBar.test.js +12 -0
- package/dist/css/main.css +13 -1
- package/dist/css/main.css.map +1 -1
- package/dist/esm/DeepThinking/DeepThinking.d.ts +5 -1
- package/dist/esm/DeepThinking/DeepThinking.js +4 -4
- package/dist/esm/DeepThinking/DeepThinking.test.js +18 -0
- package/dist/esm/MessageBar/MessageBar.d.ts +6 -0
- package/dist/esm/MessageBar/MessageBar.js +29 -12
- package/dist/esm/MessageBar/MessageBar.test.js +12 -0
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +57 -19
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithDeepThinking.tsx +13 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx +190 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +15 -2
- package/patternfly-docs/content/extensions/chatbot/img/custom-source-card.svg +37 -0
- package/patternfly-docs/content/extensions/chatbot/img/new-chat-in-nav.svg +21 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-card-expanded.svg +141 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-card-summary.svg +83 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-card.svg +76 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-tile-expanded.svg +134 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-tile-summary.svg +82 -0
- package/patternfly-docs/content/extensions/chatbot/img/source-tile.svg +30 -17
- package/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg +57 -0
- package/src/DeepThinking/DeepThinking.test.tsx +23 -0
- package/src/DeepThinking/DeepThinking.tsx +16 -3
- package/src/MessageBar/MessageBar.scss +15 -1
- package/src/MessageBar/MessageBar.test.tsx +27 -0
- package/src/MessageBar/MessageBar.tsx +92 -50
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<svg width="602" height="179" viewBox="0 0 602 179" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_3372_31930)">
|
|
3
|
+
<rect width="602" height="179" fill="white"/>
|
|
4
|
+
<rect x="59" y="115" width="484" height="254" fill="#F2F2F2"/>
|
|
5
|
+
<mask id="path-2-outside-1_3372_31930" maskUnits="userSpaceOnUse" x="59" y="46" width="484" height="88" fill="black">
|
|
6
|
+
<rect fill="white" x="59" y="46" width="484" height="88"/>
|
|
7
|
+
<path d="M59 62C59 53.1634 66.1634 46 75 46H527C535.837 46 543 53.1634 543 62V133H59V62Z"/>
|
|
8
|
+
</mask>
|
|
9
|
+
<path d="M59 46H543H59ZM543 134H59V132H543V134ZM59 133V46V133ZM543 46V133V46Z" fill="#E0E0E0" mask="url(#path-2-outside-1_3372_31930)"/>
|
|
10
|
+
<path d="M59 62C59 53.1634 66.1634 46 75 46H527C535.837 46 543 53.1634 543 62V133H59V62Z" fill="#F2F2F2"/>
|
|
11
|
+
<path d="M75 89.5C75 76.2452 85.7452 65.5 99 65.5C112.255 65.5 123 76.2452 123 89.5C123 102.755 112.255 113.5 99 113.5C85.7452 113.5 75 102.755 75 89.5Z" fill="#C7C7C7" fill-opacity="0.25"/>
|
|
12
|
+
<path d="M109.106 78.5172C108.08 77.4907 106.42 77.4907 105.394 78.5172L103.983 79.9235L108.572 84.5125L109.983 83.1016C111.009 82.075 111.009 80.4157 109.983 79.3891L109.106 78.5172ZM95.0812 88.8297C94.7953 89.1157 94.575 89.4672 94.4484 89.8563L93.0609 94.0188C92.925 94.4219 93.0328 94.8672 93.3328 95.1719C93.6328 95.4766 94.0781 95.5797 94.4859 95.4438L98.6484 94.0563C99.0328 93.9297 99.3844 93.7094 99.675 93.4235L107.517 85.5766L102.923 80.9829L95.0812 88.8297ZM91.5 80.5C89.0156 80.5 87 82.5157 87 85V97C87 99.4844 89.0156 101.5 91.5 101.5H103.5C105.984 101.5 108 99.4844 108 97V92.5C108 91.6704 107.33 91 106.5 91C105.67 91 105 91.6704 105 92.5V97C105 97.8297 104.33 98.5 103.5 98.5H91.5C90.6703 98.5 90 97.8297 90 97V85C90 84.1704 90.6703 83.5 91.5 83.5H96C96.8297 83.5 97.5 82.8297 97.5 82C97.5 81.1704 96.8297 80.5 96 80.5H91.5Z" fill="#1F1F1F"/>
|
|
13
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.25 83.875C173.664 83.875 174 83.5392 174 83.125V81.25C174 80.8358 173.664 80.5 173.25 80.5H153.75C153.336 80.5 153 80.8358 153 81.25V83.125C153 83.5392 153.336 83.875 153.75 83.875H173.25ZM173.25 91.375C173.664 91.375 174 91.0392 174 90.625V88.75C174 88.3358 173.664 88 173.25 88H153.75C153.336 88 153 88.3358 153 88.75V90.625C153 91.0392 153.336 91.375 153.75 91.375H173.25ZM173.25 98.875C173.664 98.875 174 98.5392 174 98.125V96.25C174 95.8357 173.664 95.5 173.25 95.5H153.75C153.336 95.5 153 95.8357 153 96.25V98.125C153 98.5392 153.336 98.875 153.75 98.875H173.25Z" fill="#707070"/>
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M217.478 71H240V93.5217H237.587C226.481 93.5217 217.478 84.5188 217.478 73.413V71Z" fill="#0066CC"/>
|
|
15
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M240 71.8043L218.283 108H235.317C237.903 108 240 105.903 240 103.316V71.8043Z" fill="url(#paint0_linear_3372_31930)"/>
|
|
16
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M239.196 71L203 92.7174V75.6836C203 73.0969 205.097 71 207.684 71H239.196Z" fill="url(#paint1_linear_3372_31930)"/>
|
|
17
|
+
<mask id="path-14-inside-2_3372_31930" fill="white">
|
|
18
|
+
<path d="M318 89.5C318 79.2827 326.283 71 336.5 71H444.5C454.717 71 463 79.2827 463 89.5C463 99.7173 454.717 108 444.5 108H336.5C326.283 108 318 99.7173 318 89.5Z"/>
|
|
19
|
+
</mask>
|
|
20
|
+
<path d="M336.5 71V72H444.5V71V70H336.5V71ZM444.5 108V107H336.5V108V109H444.5V108ZM336.5 108V107C326.835 107 319 99.165 319 89.5H318H317C317 100.27 325.73 109 336.5 109V108ZM463 89.5H462C462 99.165 454.165 107 444.5 107V108V109C455.27 109 464 100.27 464 89.5H463ZM444.5 71V72C454.165 72 462 79.835 462 89.5H463H464C464 78.7304 455.27 70 444.5 70V71ZM336.5 71V70C325.73 70 317 78.7304 317 89.5H318H319C319 79.835 326.835 72 336.5 72V71Z" fill="#0066CC" mask="url(#path-14-inside-2_3372_31930)"/>
|
|
21
|
+
<path d="M347.74 94.154C347.04 94.154 346.391 94.0233 345.794 93.762C345.197 93.5007 344.669 93.1413 344.212 92.684C343.764 92.2173 343.414 91.6807 343.162 91.074C342.91 90.458 342.784 89.8 342.784 89.1C342.784 88.4 342.91 87.7467 343.162 87.14C343.414 86.524 343.764 85.9873 344.212 85.53C344.669 85.0633 345.197 84.6993 345.794 84.438C346.391 84.1767 347.04 84.046 347.74 84.046C348.487 84.046 349.191 84.1813 349.854 84.452C350.526 84.7227 351.095 85.124 351.562 85.656L350.834 86.384C350.47 85.9453 350.013 85.6093 349.462 85.376C348.911 85.1427 348.337 85.026 347.74 85.026C347.189 85.026 346.681 85.1333 346.214 85.348C345.747 85.5533 345.337 85.8427 344.982 86.216C344.637 86.58 344.366 87.0093 344.17 87.504C343.974 87.9987 343.876 88.5307 343.876 89.1C343.876 89.6693 343.974 90.2013 344.17 90.696C344.366 91.1907 344.637 91.6247 344.982 91.998C345.337 92.362 345.747 92.6513 346.214 92.866C346.681 93.0713 347.189 93.174 347.74 93.174C348.393 93.174 348.977 93.0293 349.49 92.74C350.013 92.4507 350.433 92.054 350.75 91.55C351.077 91.0367 351.268 90.4627 351.324 89.828H348.02V88.876H352.416V89.31C352.416 89.9913 352.299 90.626 352.066 91.214C351.833 91.7927 351.501 92.306 351.072 92.754C350.652 93.1927 350.157 93.538 349.588 93.79C349.019 94.0327 348.403 94.154 347.74 94.154ZM354.234 94V87.168H355.256V88.568C355.433 88.092 355.685 87.7233 356.012 87.462C356.348 87.1913 356.73 87.056 357.16 87.056C357.281 87.056 357.393 87.0653 357.496 87.084C357.598 87.0933 357.701 87.1167 357.804 87.154V88.078C357.692 88.0407 357.57 88.0127 357.44 87.994C357.318 87.966 357.202 87.952 357.09 87.952C356.67 87.952 356.301 88.0733 355.984 88.316C355.676 88.5587 355.433 88.8993 355.256 89.338V94H354.234ZM360.982 94.126C360.497 94.126 360.068 94.0373 359.694 93.86C359.321 93.6827 359.027 93.44 358.812 93.132C358.607 92.8147 358.504 92.4507 358.504 92.04C358.504 91.6293 358.612 91.2747 358.826 90.976C359.041 90.668 359.34 90.43 359.722 90.262C360.105 90.094 360.553 90.01 361.066 90.01C361.458 90.01 361.827 90.052 362.172 90.136C362.527 90.22 362.854 90.3553 363.152 90.542V89.604C363.152 89.044 363.003 88.624 362.704 88.344C362.406 88.0547 361.967 87.91 361.388 87.91C361.071 87.91 360.744 87.9567 360.408 88.05C360.082 88.1433 359.718 88.2927 359.316 88.498L358.938 87.714C359.853 87.2753 360.712 87.056 361.514 87.056C362.364 87.056 363.017 87.266 363.474 87.686C363.932 88.0967 364.16 88.6893 364.16 89.464V94H363.152V93.202C362.854 93.51 362.522 93.7433 362.158 93.902C361.794 94.0513 361.402 94.126 360.982 94.126ZM359.484 92.012C359.484 92.4133 359.638 92.7353 359.946 92.978C360.264 93.2207 360.679 93.342 361.192 93.342C361.575 93.342 361.925 93.2767 362.242 93.146C362.569 93.0153 362.872 92.8193 363.152 92.558V91.242C362.863 91.074 362.564 90.9527 362.256 90.878C361.948 90.794 361.603 90.752 361.22 90.752C360.698 90.752 360.278 90.8687 359.96 91.102C359.643 91.326 359.484 91.6293 359.484 92.012ZM366.238 94V87.168H367.26V88.274C367.521 87.8633 367.834 87.56 368.198 87.364C368.562 87.1587 368.972 87.056 369.43 87.056C369.924 87.056 370.354 87.1633 370.718 87.378C371.091 87.5833 371.38 87.8773 371.586 88.26C371.8 88.6333 371.908 89.072 371.908 89.576V94H370.886V89.87C370.886 89.2633 370.718 88.7873 370.382 88.442C370.055 88.0873 369.612 87.91 369.052 87.91C368.678 87.91 368.338 87.9987 368.03 88.176C367.722 88.3533 367.465 88.6147 367.26 88.96V94H366.238ZM373.948 94V87.168H374.97V94H373.948ZM374.466 85.474C374.261 85.474 374.083 85.404 373.934 85.264C373.794 85.1147 373.724 84.942 373.724 84.746C373.724 84.55 373.794 84.382 373.934 84.242C374.083 84.0927 374.261 84.018 374.466 84.018C374.671 84.018 374.844 84.0927 374.984 84.242C375.133 84.382 375.208 84.55 375.208 84.746C375.208 84.942 375.133 85.1147 374.984 85.264C374.844 85.404 374.671 85.474 374.466 85.474ZM379.67 94.14C379.082 94.14 378.634 94 378.326 93.72C378.027 93.4307 377.878 93.0153 377.878 92.474V88.008H376.464V87.168H377.878V85.292L378.9 85.054V87.168H380.86V88.008H378.9V92.208C378.9 92.572 378.974 92.8333 379.124 92.992C379.282 93.1507 379.539 93.23 379.894 93.23C380.071 93.23 380.23 93.216 380.37 93.188C380.51 93.16 380.673 93.1133 380.86 93.048V93.958C380.673 94.0233 380.477 94.07 380.272 94.098C380.066 94.126 379.866 94.14 379.67 94.14ZM385.3 94.14C384.665 94.14 384.091 93.986 383.578 93.678C383.065 93.3607 382.659 92.936 382.36 92.404C382.061 91.8627 381.912 91.256 381.912 90.584C381.912 89.912 382.052 89.31 382.332 88.778C382.621 88.246 383.009 87.826 383.494 87.518C383.979 87.21 384.521 87.056 385.118 87.056C385.725 87.056 386.261 87.21 386.728 87.518C387.204 87.8167 387.577 88.2273 387.848 88.75C388.128 89.2633 388.268 89.8467 388.268 90.5V90.808H382.906C382.943 91.2747 383.069 91.6947 383.284 92.068C383.508 92.432 383.797 92.7213 384.152 92.936C384.516 93.1413 384.913 93.244 385.342 93.244C385.697 93.244 386.037 93.1833 386.364 93.062C386.7 92.9313 386.985 92.7587 387.218 92.544L387.862 93.23C387.47 93.538 387.064 93.7667 386.644 93.916C386.224 94.0653 385.776 94.14 385.3 94.14ZM382.934 90.08H387.26C387.213 89.6693 387.087 89.3053 386.882 88.988C386.686 88.6613 386.434 88.4047 386.126 88.218C385.827 88.0313 385.491 87.938 385.118 87.938C384.745 87.938 384.404 88.0313 384.096 88.218C383.788 88.3953 383.531 88.6473 383.326 88.974C383.13 89.2913 382.999 89.66 382.934 90.08ZM393.672 94L398.544 85.082H392.664V84.2H399.636V84.984L394.82 94H393.672ZM401.283 94V84.2H405.245C405.842 84.2 406.36 84.3027 406.799 84.508C407.247 84.7133 407.592 85.0027 407.835 85.376C408.078 85.7493 408.199 86.188 408.199 86.692C408.199 87.2333 408.04 87.7 407.723 88.092C407.415 88.4747 406.995 88.7453 406.463 88.904C407.116 89.0533 407.63 89.338 408.003 89.758C408.386 90.1687 408.577 90.6773 408.577 91.284C408.577 91.8253 408.446 92.3013 408.185 92.712C407.924 93.1227 407.555 93.44 407.079 93.664C406.603 93.888 406.043 94 405.399 94H401.283ZM402.361 88.484H405.161C405.758 88.484 406.234 88.3347 406.589 88.036C406.944 87.728 407.121 87.3173 407.121 86.804C407.121 86.2907 406.944 85.8847 406.589 85.586C406.234 85.278 405.758 85.124 405.161 85.124H402.361V88.484ZM402.361 93.076H405.287C405.95 93.076 406.482 92.908 406.883 92.572C407.284 92.2267 407.485 91.774 407.485 91.214C407.485 90.654 407.284 90.206 406.883 89.87C406.491 89.534 405.959 89.366 405.287 89.366H402.361V93.076Z" fill="#0066CC"/>
|
|
22
|
+
<path d="M435.451 92.334C435.939 92.3342 436.183 92.9288 435.837 93.2773L432.305 96.8389C432.091 97.0544 431.742 97.0545 431.528 96.8389L427.996 93.2773C427.65 92.9288 427.894 92.3344 428.382 92.334H435.451Z" fill="#0066CC"/>
|
|
23
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M497.968 89C497.968 87.0653 496.41 85.5 494.484 85.5C492.558 85.5 491 87.0653 491 89C491 90.9347 492.558 92.5 494.484 92.5C496.41 92.5 497.968 90.9347 497.968 89ZM506.484 89C506.484 87.0653 504.926 85.5 503 85.5C501.074 85.5 499.516 87.0653 499.516 89C499.516 90.9347 501.074 92.5 503 92.5C504.926 92.5 506.484 90.9347 506.484 89ZM515 89C515 87.0653 513.442 85.5 511.516 85.5C509.59 85.5 508.032 87.0653 508.032 89C508.032 90.9347 509.59 92.5 511.516 92.5C513.442 92.5 515 90.9347 515 89Z" fill="#707070"/>
|
|
24
|
+
<mask id="path-21-inside-3_3372_31930" fill="white">
|
|
25
|
+
<path d="M112.465 97.9273C112.465 96.3877 114.132 95.4251 115.466 96.1949L127.595 103.198C128.928 103.968 128.928 105.893 127.595 106.662L124.372 108.523L126.01 111.362C126.562 112.318 126.235 113.541 125.278 114.094L123.475 115.135C122.519 115.687 121.296 115.359 120.743 114.403L119.105 111.564L115.465 113.666C114.131 114.435 112.465 113.473 112.465 111.934L112.465 97.9273Z"/>
|
|
26
|
+
</mask>
|
|
27
|
+
<path d="M112.465 97.9273C112.465 96.3877 114.132 95.4251 115.466 96.1949L127.595 103.198C128.928 103.968 128.928 105.893 127.595 106.662L124.372 108.523L126.01 111.362C126.562 112.318 126.235 113.541 125.278 114.094L123.475 115.135C122.519 115.687 121.296 115.359 120.743 114.403L119.105 111.564L115.465 113.666C114.131 114.435 112.465 113.473 112.465 111.934L112.465 97.9273Z" fill="#FF00FF"/>
|
|
28
|
+
<path d="M112.465 97.9273L111.465 97.9273L111.465 97.9273L112.465 97.9273ZM115.466 96.1949L115.966 95.3289L115.966 95.3289L115.466 96.1949ZM127.595 103.198L127.095 104.064L127.095 104.064L127.595 103.198ZM127.595 106.662L128.095 107.529L127.595 106.662ZM124.372 108.523L123.872 107.657L123.006 108.157L123.506 109.023L124.372 108.523ZM126.01 111.362L126.877 110.862L126.876 110.862L126.01 111.362ZM123.475 115.135L123.975 116.001L123.975 116.001L123.475 115.135ZM120.743 114.403L119.877 114.903L119.877 114.903L120.743 114.403ZM119.105 111.564L119.971 111.064L119.471 110.198L118.605 110.698L119.105 111.564ZM115.465 113.666L115.964 114.532L115.965 114.532L115.465 113.666ZM112.465 111.934L113.465 111.934L113.465 111.934L112.465 111.934ZM112.465 97.9273L113.465 97.9273C113.465 97.1575 114.299 96.676 114.966 97.0609L115.466 96.1949L115.966 95.3289C113.966 94.1742 111.465 95.6179 111.465 97.9273L112.465 97.9273ZM115.466 96.1949L114.965 97.0609L127.095 104.064L127.595 103.198L128.095 102.332L115.966 95.3289L115.466 96.1949ZM127.595 103.198L127.095 104.064C127.762 104.449 127.762 105.411 127.095 105.796L127.595 106.662L128.095 107.529C130.095 106.374 130.095 103.487 128.095 102.332L127.595 103.198ZM127.595 106.662L127.095 105.796L123.872 107.657L124.372 108.523L124.872 109.389L128.095 107.529L127.595 106.662ZM124.372 108.523L123.506 109.023L125.144 111.862L126.01 111.362L126.876 110.862L125.238 108.023L124.372 108.523ZM126.01 111.362L125.144 111.861C125.42 112.34 125.256 112.952 124.778 113.228L125.278 114.094L125.778 114.96C127.213 114.131 127.704 112.296 126.877 110.862L126.01 111.362ZM125.278 114.094L124.778 113.228L122.975 114.269L123.475 115.135L123.975 116.001L125.778 114.96L125.278 114.094ZM123.475 115.135L122.975 114.269C122.497 114.545 121.885 114.381 121.609 113.902L120.743 114.403L119.877 114.903C120.706 116.337 122.54 116.829 123.975 116.001L123.475 115.135ZM120.743 114.403L121.609 113.903L119.971 111.064L119.105 111.564L118.239 112.064L119.877 114.903L120.743 114.403ZM119.105 111.564L118.605 110.698L114.965 112.8L115.465 113.666L115.965 114.532L119.605 112.43L119.105 111.564ZM115.465 113.666L114.965 112.8C114.298 113.184 113.465 112.703 113.465 111.934L112.465 111.934H111.465C111.465 114.243 113.964 115.686 115.964 114.532L115.465 113.666ZM112.465 111.934L113.465 111.934L113.465 97.9273L112.465 97.9273L111.465 97.9273L111.465 111.934L112.465 111.934Z" fill="#FF00FF" mask="url(#path-21-inside-3_3372_31930)"/>
|
|
29
|
+
<g filter="url(#filter0_d_3372_31930)">
|
|
30
|
+
<path d="M98.8253 113L109.651 128H88L98.8253 113Z" fill="#292929"/>
|
|
31
|
+
<path d="M80 134C80 130.686 82.6863 128 86 128H158C161.314 128 164 130.686 164 134V156C164 159.314 161.314 162 158 162H86C82.6863 162 80 159.314 80 156V134Z" fill="#292929"/>
|
|
32
|
+
<path d="M98.0602 149V140.6H99.0202L103.94 147.56L103.916 140.6H104.792V149H103.952L98.9122 141.884L98.9362 149H98.0602ZM109.403 149.12C108.859 149.12 108.367 148.988 107.927 148.724C107.487 148.452 107.139 148.088 106.883 147.632C106.627 147.168 106.499 146.648 106.499 146.072C106.499 145.496 106.619 144.98 106.859 144.524C107.107 144.068 107.439 143.708 107.855 143.444C108.271 143.18 108.735 143.048 109.247 143.048C109.767 143.048 110.227 143.18 110.627 143.444C111.035 143.7 111.355 144.052 111.587 144.5C111.827 144.94 111.947 145.44 111.947 146V146.264H107.351C107.383 146.664 107.491 147.024 107.675 147.344C107.867 147.656 108.115 147.904 108.419 148.088C108.731 148.264 109.071 148.352 109.439 148.352C109.743 148.352 110.035 148.3 110.315 148.196C110.603 148.084 110.847 147.936 111.047 147.752L111.599 148.34C111.263 148.604 110.915 148.8 110.555 148.928C110.195 149.056 109.811 149.12 109.403 149.12ZM107.375 145.64H111.083C111.043 145.288 110.935 144.976 110.759 144.704C110.591 144.424 110.375 144.204 110.111 144.044C109.855 143.884 109.567 143.804 109.247 143.804C108.927 143.804 108.635 143.884 108.371 144.044C108.107 144.196 107.887 144.412 107.711 144.692C107.543 144.964 107.431 145.28 107.375 145.64ZM114.37 149L112.762 143.144H113.614L114.838 147.824L116.242 143.144H117.022L118.426 147.824L119.638 143.144H120.466L118.87 149H118.018L116.626 144.272L115.234 149H114.37ZM127.133 149.096C126.589 149.096 126.097 148.964 125.657 148.7C125.225 148.428 124.881 148.064 124.625 147.608C124.369 147.144 124.241 146.632 124.241 146.072C124.241 145.504 124.369 144.992 124.625 144.536C124.881 144.08 125.225 143.72 125.657 143.456C126.097 143.184 126.589 143.048 127.133 143.048C127.565 143.048 127.977 143.128 128.369 143.288C128.761 143.448 129.101 143.672 129.389 143.96L128.825 144.572C128.617 144.34 128.365 144.16 128.069 144.032C127.773 143.904 127.473 143.84 127.169 143.84C126.785 143.84 126.437 143.94 126.125 144.14C125.821 144.34 125.577 144.608 125.393 144.944C125.209 145.28 125.117 145.656 125.117 146.072C125.117 146.488 125.209 146.864 125.393 147.2C125.577 147.536 125.821 147.804 126.125 148.004C126.437 148.204 126.785 148.304 127.169 148.304C127.473 148.304 127.773 148.24 128.069 148.112C128.365 147.976 128.617 147.796 128.825 147.572L129.389 148.184C129.101 148.472 128.761 148.696 128.369 148.856C127.977 149.016 127.565 149.096 127.133 149.096ZM130.611 149V140.336L131.487 140.156V144.092C131.711 143.74 131.979 143.48 132.291 143.312C132.603 143.136 132.955 143.048 133.347 143.048C133.771 143.048 134.139 143.14 134.451 143.324C134.771 143.5 135.019 143.752 135.195 144.08C135.379 144.4 135.471 144.776 135.471 145.208V149H134.595V145.46C134.595 144.94 134.451 144.532 134.163 144.236C133.883 143.932 133.503 143.78 133.023 143.78C132.703 143.78 132.411 143.856 132.147 144.008C131.883 144.16 131.663 144.384 131.487 144.68V149H130.611ZM139.044 149.108C138.628 149.108 138.26 149.032 137.94 148.88C137.62 148.728 137.368 148.52 137.184 148.256C137.008 147.984 136.92 147.672 136.92 147.32C136.92 146.968 137.012 146.664 137.196 146.408C137.38 146.144 137.636 145.94 137.964 145.796C138.292 145.652 138.676 145.58 139.116 145.58C139.452 145.58 139.768 145.616 140.064 145.688C140.368 145.76 140.648 145.876 140.904 146.036V145.232C140.904 144.752 140.776 144.392 140.52 144.152C140.264 143.904 139.888 143.78 139.392 143.78C139.12 143.78 138.84 143.82 138.552 143.9C138.272 143.98 137.96 144.108 137.616 144.284L137.292 143.612C138.076 143.236 138.812 143.048 139.5 143.048C140.228 143.048 140.788 143.228 141.18 143.588C141.572 143.94 141.768 144.448 141.768 145.112V149H140.904V148.316C140.648 148.58 140.364 148.78 140.052 148.916C139.74 149.044 139.404 149.108 139.044 149.108ZM137.76 147.296C137.76 147.64 137.892 147.916 138.156 148.124C138.428 148.332 138.784 148.436 139.224 148.436C139.552 148.436 139.852 148.38 140.124 148.268C140.404 148.156 140.664 147.988 140.904 147.764V146.636C140.656 146.492 140.4 146.388 140.136 146.324C139.872 146.252 139.576 146.216 139.248 146.216C138.8 146.216 138.44 146.316 138.168 146.516C137.896 146.708 137.76 146.968 137.76 147.296ZM145.605 149.12C145.101 149.12 144.717 149 144.453 148.76C144.197 148.512 144.069 148.156 144.069 147.692V143.864H142.857V143.144H144.069V141.536L144.945 141.332V143.144H146.625V143.864H144.945V147.464C144.945 147.776 145.009 148 145.137 148.136C145.273 148.272 145.493 148.34 145.797 148.34C145.949 148.34 146.085 148.328 146.205 148.304C146.325 148.28 146.465 148.24 146.625 148.184V148.964C146.465 149.02 146.297 149.06 146.121 149.084C145.945 149.108 145.773 149.12 145.605 149.12Z" fill="white"/>
|
|
33
|
+
</g>
|
|
34
|
+
</g>
|
|
35
|
+
<defs>
|
|
36
|
+
<filter id="filter0_d_3372_31930" x="71" y="108" width="102" height="67" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
37
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
38
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
39
|
+
<feOffset dy="4"/>
|
|
40
|
+
<feGaussianBlur stdDeviation="4.5"/>
|
|
41
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0.160784 0 0 0 0 0.160784 0 0 0 0 0.160784 0 0 0 0.15 0"/>
|
|
42
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3372_31930"/>
|
|
43
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3372_31930" result="shape"/>
|
|
44
|
+
</filter>
|
|
45
|
+
<linearGradient id="paint0_linear_3372_31930" x1="1695.07" y1="71.8043" x2="-108.756" y2="3078.17" gradientUnits="userSpaceOnUse">
|
|
46
|
+
<stop stop-color="#2B9AF3"/>
|
|
47
|
+
<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
|
|
48
|
+
</linearGradient>
|
|
49
|
+
<linearGradient id="paint1_linear_3372_31930" x1="239.196" y1="-1384.07" x2="-2767.17" y2="419.756" gradientUnits="userSpaceOnUse">
|
|
50
|
+
<stop stop-color="#2B9AF3"/>
|
|
51
|
+
<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
|
|
52
|
+
</linearGradient>
|
|
53
|
+
<clipPath id="clip0_3372_31930">
|
|
54
|
+
<rect width="602" height="179" fill="white"/>
|
|
55
|
+
</clipPath>
|
|
56
|
+
</defs>
|
|
57
|
+
</svg>
|
|
@@ -167,4 +167,27 @@ describe('DeepThinking', () => {
|
|
|
167
167
|
);
|
|
168
168
|
expect(container.querySelector('.pf-m-primary')).toBeTruthy();
|
|
169
169
|
});
|
|
170
|
+
|
|
171
|
+
it('should render spinner when isLoading is true', () => {
|
|
172
|
+
render(<DeepThinking {...defaultProps} isLoading />);
|
|
173
|
+
expect(screen.getByLabelText('Contents')).toBeInTheDocument();
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
it('should not render spinner when isLoading is false', () => {
|
|
177
|
+
render(<DeepThinking {...defaultProps} />);
|
|
178
|
+
expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
it('should pass spinnerProps to Spinner component', () => {
|
|
182
|
+
render(<DeepThinking {...defaultProps} isLoading spinnerProps={{ 'aria-label': 'Custom label' }} />);
|
|
183
|
+
expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
it('should not render spinner when isToggleContentMarkdown is true', () => {
|
|
187
|
+
const toggleContent = '**Bold thinking**';
|
|
188
|
+
render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown isLoading />);
|
|
189
|
+
|
|
190
|
+
expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
|
|
191
|
+
expect(screen.getByText('Bold thinking')).toBeInTheDocument();
|
|
192
|
+
});
|
|
170
193
|
});
|
|
@@ -7,7 +7,9 @@ import {
|
|
|
7
7
|
CardBodyProps,
|
|
8
8
|
CardProps,
|
|
9
9
|
ExpandableSection,
|
|
10
|
-
ExpandableSectionProps
|
|
10
|
+
ExpandableSectionProps,
|
|
11
|
+
Spinner,
|
|
12
|
+
SpinnerProps
|
|
11
13
|
} from '@patternfly/react-core';
|
|
12
14
|
import { useState, type FunctionComponent } from 'react';
|
|
13
15
|
import MarkdownContent from '../MarkdownContent';
|
|
@@ -38,6 +40,10 @@ export interface DeepThinkingProps {
|
|
|
38
40
|
markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
|
|
39
41
|
/** Whether to retain styles in the MarkdownContent component. Defaults to false. */
|
|
40
42
|
shouldRetainStyles?: boolean;
|
|
43
|
+
/** Flag indicating whether the deep thinking is loading or not. */
|
|
44
|
+
isLoading?: boolean;
|
|
45
|
+
/** Additional props for the spinner component when isLoading is true. */
|
|
46
|
+
spinnerProps?: SpinnerProps;
|
|
41
47
|
}
|
|
42
48
|
|
|
43
49
|
export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
|
|
@@ -52,7 +58,9 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
|
|
|
52
58
|
isSubheadingMarkdown,
|
|
53
59
|
isBodyMarkdown,
|
|
54
60
|
markdownContentProps,
|
|
55
|
-
shouldRetainStyles = false
|
|
61
|
+
shouldRetainStyles = false,
|
|
62
|
+
isLoading = false,
|
|
63
|
+
spinnerProps
|
|
56
64
|
}: DeepThinkingProps) => {
|
|
57
65
|
const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
|
|
58
66
|
|
|
@@ -66,7 +74,12 @@ export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
|
|
|
66
74
|
<MarkdownContent shouldRetainStyles={shouldRetainStyles} content={toggleContent} {...markdownContentProps} />
|
|
67
75
|
);
|
|
68
76
|
}
|
|
69
|
-
return
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
{isLoading && <Spinner diameter="1em" isInline style={{ marginInlineEnd: '8px' }} {...spinnerProps} />}
|
|
80
|
+
{toggleContent}
|
|
81
|
+
</>
|
|
82
|
+
);
|
|
70
83
|
};
|
|
71
84
|
|
|
72
85
|
const renderSubheading = () => {
|
|
@@ -66,6 +66,19 @@
|
|
|
66
66
|
padding-block-start: var(--pf-t--global--spacer--xs);
|
|
67
67
|
padding-block-end: var(--pf-t--global--spacer--xs);
|
|
68
68
|
gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
69
|
+
|
|
70
|
+
&.pf-m-grouped {
|
|
71
|
+
flex-basis: 100%;
|
|
72
|
+
justify-content: space-between;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&-actions-group {
|
|
77
|
+
display: flex;
|
|
78
|
+
padding-block-start: var(--pf-t--global--spacer--xs);
|
|
79
|
+
padding-block-end: var(--pf-t--global--spacer--xs);
|
|
80
|
+
gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
|
|
81
|
+
align-items: center;
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
&-input {
|
|
@@ -150,7 +163,8 @@
|
|
|
150
163
|
}
|
|
151
164
|
|
|
152
165
|
.pf-m-compact {
|
|
153
|
-
.pf-chatbot__message-bar-actions
|
|
166
|
+
.pf-chatbot__message-bar-actions,
|
|
167
|
+
.pf-chatbot__message-bar-actions-group {
|
|
154
168
|
padding-block-start: var(--pf-t--global--spacer--sm);
|
|
155
169
|
padding-block-end: var(--pf-t--global--spacer--sm);
|
|
156
170
|
}
|
|
@@ -488,4 +488,31 @@ describe('Message bar', () => {
|
|
|
488
488
|
|
|
489
489
|
expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
|
|
490
490
|
});
|
|
491
|
+
|
|
492
|
+
it('Renders with flex-basis of auto by default', () => {
|
|
493
|
+
render(<MessageBar onSendMessage={jest.fn} />);
|
|
494
|
+
|
|
495
|
+
expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
|
|
496
|
+
'style',
|
|
497
|
+
'flex-basis: auto;'
|
|
498
|
+
);
|
|
499
|
+
});
|
|
500
|
+
|
|
501
|
+
it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
|
|
502
|
+
render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);
|
|
503
|
+
|
|
504
|
+
expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
|
|
505
|
+
'style',
|
|
506
|
+
'flex-basis: 100%;'
|
|
507
|
+
);
|
|
508
|
+
});
|
|
509
|
+
|
|
510
|
+
it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
|
|
511
|
+
render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);
|
|
512
|
+
|
|
513
|
+
expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
|
|
514
|
+
'style',
|
|
515
|
+
'flex-basis: 100%;'
|
|
516
|
+
);
|
|
517
|
+
});
|
|
491
518
|
});
|
|
@@ -58,6 +58,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
|
|
|
58
58
|
placeholder?: string;
|
|
59
59
|
/** Flag to disable/enable the Attach button */
|
|
60
60
|
hasAttachButton?: boolean;
|
|
61
|
+
/** Whether the attach button is rendered before or after the message input. */
|
|
62
|
+
attachButtonPosition?: 'start' | 'end';
|
|
61
63
|
/** Flag to enable the Microphone button */
|
|
62
64
|
hasMicrophoneButton?: boolean;
|
|
63
65
|
/** Placeholder text when listening */
|
|
@@ -116,6 +118,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
|
|
|
116
118
|
innerRef?: React.Ref<HTMLTextAreaElement>;
|
|
117
119
|
/** Sets background color to primary */
|
|
118
120
|
isPrimary?: boolean;
|
|
121
|
+
/** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container. */
|
|
122
|
+
additionalActions?: React.ReactNode;
|
|
123
|
+
/** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
|
|
124
|
+
forceMultilineLayout?: boolean;
|
|
119
125
|
/** @beta Flag indicating whether the message bar has an AI indicator border. */
|
|
120
126
|
hasAiIndicator?: boolean;
|
|
121
127
|
/** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
|
|
@@ -128,6 +134,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
128
134
|
alwayShowSendButton,
|
|
129
135
|
placeholder = 'Send a message...',
|
|
130
136
|
hasAttachButton = true,
|
|
137
|
+
attachButtonPosition = 'end',
|
|
131
138
|
hasMicrophoneButton,
|
|
132
139
|
listeningText = 'Listening',
|
|
133
140
|
handleAttach,
|
|
@@ -151,6 +158,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
151
158
|
dropzoneProps,
|
|
152
159
|
innerRef,
|
|
153
160
|
isPrimary,
|
|
161
|
+
additionalActions,
|
|
162
|
+
forceMultilineLayout = false,
|
|
154
163
|
hasAiIndicator,
|
|
155
164
|
isThinking,
|
|
156
165
|
...props
|
|
@@ -161,13 +170,21 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
161
170
|
const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
|
|
162
171
|
const [hasSentMessage, setHasSentMessage] = useState(false);
|
|
163
172
|
const [isComposing, setIsComposing] = useState(false);
|
|
164
|
-
|
|
173
|
+
|
|
174
|
+
const shouldForceMultiline = forceMultilineLayout || additionalActions;
|
|
175
|
+
const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
|
|
165
176
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
|
166
177
|
const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
|
|
167
178
|
const attachButtonRef = useRef<HTMLButtonElement>(null);
|
|
168
179
|
|
|
169
180
|
const topMargin = '1rem';
|
|
170
181
|
|
|
182
|
+
useEffect(() => {
|
|
183
|
+
if (value !== undefined && value !== message) {
|
|
184
|
+
setMessage(value);
|
|
185
|
+
}
|
|
186
|
+
}, [value, message]);
|
|
187
|
+
|
|
171
188
|
const setInitialLineHeight = (field: HTMLTextAreaElement) => {
|
|
172
189
|
field.style.setProperty('line-height', '1rem');
|
|
173
190
|
const parent = field.parentElement;
|
|
@@ -178,7 +195,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
178
195
|
|
|
179
196
|
const grandparent = parent.parentElement;
|
|
180
197
|
if (grandparent) {
|
|
181
|
-
grandparent.style.setProperty('flex-basis', 'auto');
|
|
198
|
+
grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
|
|
182
199
|
}
|
|
183
200
|
}
|
|
184
201
|
};
|
|
@@ -227,7 +244,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
227
244
|
const parent = field.parentElement;
|
|
228
245
|
if (parent) {
|
|
229
246
|
const grandparent = parent.parentElement;
|
|
230
|
-
if (textIsLongerThan2Lines(field) && grandparent) {
|
|
247
|
+
if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
|
|
231
248
|
grandparent.style.setProperty('flex-basis', `100%`);
|
|
232
249
|
}
|
|
233
250
|
}
|
|
@@ -277,14 +294,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
277
294
|
if (field) {
|
|
278
295
|
if (field.value === '') {
|
|
279
296
|
setInitialLineHeight(field);
|
|
280
|
-
setIsMultiline(false);
|
|
297
|
+
!shouldForceMultiline && setIsMultiline(false);
|
|
281
298
|
} else {
|
|
282
299
|
setAutoHeight(field);
|
|
283
300
|
setAutoWidth(field);
|
|
284
|
-
checkIfMultiline(field);
|
|
301
|
+
!shouldForceMultiline && checkIfMultiline(field);
|
|
285
302
|
}
|
|
286
303
|
}
|
|
287
|
-
}, [displayMode, message, setAutoWidth, checkIfMultiline]);
|
|
304
|
+
}, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
|
|
288
305
|
|
|
289
306
|
useEffect(() => {
|
|
290
307
|
const field = textareaRef.current;
|
|
@@ -300,10 +317,10 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
300
317
|
if (textareaRef.current) {
|
|
301
318
|
if (event.target.value === '') {
|
|
302
319
|
setInitialLineHeight(textareaRef.current);
|
|
303
|
-
setIsMultiline(false);
|
|
320
|
+
!shouldForceMultiline && setIsMultiline(false);
|
|
304
321
|
} else {
|
|
305
322
|
setAutoHeight(textareaRef.current);
|
|
306
|
-
checkIfMultiline(textareaRef.current);
|
|
323
|
+
!shouldForceMultiline && checkIfMultiline(textareaRef.current);
|
|
307
324
|
}
|
|
308
325
|
}
|
|
309
326
|
setMessage(event.target.value);
|
|
@@ -365,6 +382,55 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
365
382
|
onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
|
|
366
383
|
};
|
|
367
384
|
|
|
385
|
+
const renderAttachButton = () => {
|
|
386
|
+
if (!attachMenuProps && hasAttachButton) {
|
|
387
|
+
return (
|
|
388
|
+
<AttachButton
|
|
389
|
+
onAttachAccepted={handleAttach}
|
|
390
|
+
isDisabled={isListeningMessage}
|
|
391
|
+
tooltipContent={buttonProps?.attach?.tooltipContent}
|
|
392
|
+
inputTestId={buttonProps?.attach?.inputTestId}
|
|
393
|
+
isCompact={isCompact}
|
|
394
|
+
tooltipProps={buttonProps?.attach?.tooltipProps}
|
|
395
|
+
allowedFileTypes={allowedFileTypes}
|
|
396
|
+
minSize={minSize}
|
|
397
|
+
maxSize={maxSize}
|
|
398
|
+
maxFiles={maxFiles}
|
|
399
|
+
isAttachmentDisabled={isAttachmentDisabled}
|
|
400
|
+
onAttach={onAttach}
|
|
401
|
+
onAttachRejected={onAttachRejected}
|
|
402
|
+
validator={validator}
|
|
403
|
+
dropzoneProps={dropzoneProps}
|
|
404
|
+
{...buttonProps?.attach}
|
|
405
|
+
{...buttonProps?.attach?.props}
|
|
406
|
+
/>
|
|
407
|
+
);
|
|
408
|
+
}
|
|
409
|
+
if (attachMenuProps) {
|
|
410
|
+
return (
|
|
411
|
+
<AttachButton
|
|
412
|
+
ref={attachButtonRef}
|
|
413
|
+
onClick={handleAttachMenuToggle}
|
|
414
|
+
isDisabled={isListeningMessage}
|
|
415
|
+
tooltipContent={buttonProps?.attach?.tooltipContent}
|
|
416
|
+
isCompact={isCompact}
|
|
417
|
+
tooltipProps={buttonProps?.attach?.tooltipProps}
|
|
418
|
+
allowedFileTypes={allowedFileTypes}
|
|
419
|
+
minSize={minSize}
|
|
420
|
+
maxSize={maxSize}
|
|
421
|
+
maxFiles={maxFiles}
|
|
422
|
+
isAttachmentDisabled={isAttachmentDisabled}
|
|
423
|
+
onAttach={onAttach}
|
|
424
|
+
onAttachRejected={onAttachRejected}
|
|
425
|
+
validator={validator}
|
|
426
|
+
dropzoneProps={dropzoneProps}
|
|
427
|
+
{...buttonProps?.attach}
|
|
428
|
+
/>
|
|
429
|
+
);
|
|
430
|
+
}
|
|
431
|
+
};
|
|
432
|
+
|
|
433
|
+
const isAttachButtonAtStart = attachButtonPosition === 'start';
|
|
368
434
|
const renderButtons = () => {
|
|
369
435
|
if (hasStopButton && handleStopButton) {
|
|
370
436
|
return (
|
|
@@ -379,47 +445,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
379
445
|
}
|
|
380
446
|
return (
|
|
381
447
|
<>
|
|
382
|
-
{
|
|
383
|
-
<AttachButton
|
|
384
|
-
ref={attachButtonRef}
|
|
385
|
-
onClick={handleAttachMenuToggle}
|
|
386
|
-
isDisabled={isListeningMessage}
|
|
387
|
-
tooltipContent={buttonProps?.attach?.tooltipContent}
|
|
388
|
-
isCompact={isCompact}
|
|
389
|
-
tooltipProps={buttonProps?.attach?.tooltipProps}
|
|
390
|
-
allowedFileTypes={allowedFileTypes}
|
|
391
|
-
minSize={minSize}
|
|
392
|
-
maxSize={maxSize}
|
|
393
|
-
maxFiles={maxFiles}
|
|
394
|
-
isAttachmentDisabled={isAttachmentDisabled}
|
|
395
|
-
onAttach={onAttach}
|
|
396
|
-
onAttachRejected={onAttachRejected}
|
|
397
|
-
validator={validator}
|
|
398
|
-
dropzoneProps={dropzoneProps}
|
|
399
|
-
{...buttonProps?.attach}
|
|
400
|
-
/>
|
|
401
|
-
)}
|
|
402
|
-
{!attachMenuProps && hasAttachButton && (
|
|
403
|
-
<AttachButton
|
|
404
|
-
onAttachAccepted={handleAttach}
|
|
405
|
-
isDisabled={isListeningMessage}
|
|
406
|
-
tooltipContent={buttonProps?.attach?.tooltipContent}
|
|
407
|
-
inputTestId={buttonProps?.attach?.inputTestId}
|
|
408
|
-
isCompact={isCompact}
|
|
409
|
-
tooltipProps={buttonProps?.attach?.tooltipProps}
|
|
410
|
-
allowedFileTypes={allowedFileTypes}
|
|
411
|
-
minSize={minSize}
|
|
412
|
-
maxSize={maxSize}
|
|
413
|
-
maxFiles={maxFiles}
|
|
414
|
-
isAttachmentDisabled={isAttachmentDisabled}
|
|
415
|
-
onAttach={onAttach}
|
|
416
|
-
onAttachRejected={onAttachRejected}
|
|
417
|
-
validator={validator}
|
|
418
|
-
dropzoneProps={dropzoneProps}
|
|
419
|
-
{...buttonProps?.attach}
|
|
420
|
-
{...buttonProps?.attach?.props}
|
|
421
|
-
/>
|
|
422
|
-
)}
|
|
448
|
+
{!isAttachButtonAtStart && renderAttachButton()}
|
|
423
449
|
{hasMicrophoneButton && (
|
|
424
450
|
<MicrophoneButton
|
|
425
451
|
isListening={isListeningMessage}
|
|
@@ -447,8 +473,12 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
447
473
|
);
|
|
448
474
|
};
|
|
449
475
|
|
|
476
|
+
const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
|
|
450
477
|
const messageBarContents = (
|
|
451
478
|
<>
|
|
479
|
+
{isAttachButtonAtStart && !isMultiline && (
|
|
480
|
+
<div className="pf-chatbot__message-bar-actions test">{renderAttachButton()}</div>
|
|
481
|
+
)}
|
|
452
482
|
<div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
|
|
453
483
|
<TextArea
|
|
454
484
|
className="pf-chatbot__message-textarea"
|
|
@@ -463,7 +493,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
|
|
|
463
493
|
{...props}
|
|
464
494
|
/>
|
|
465
495
|
</div>
|
|
466
|
-
<div className=
|
|
496
|
+
<div className={css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped')}>
|
|
497
|
+
{hasGroupedActions ? (
|
|
498
|
+
<>
|
|
499
|
+
<div className={css('pf-chatbot__message-bar-actions-group')}>
|
|
500
|
+
{isAttachButtonAtStart && renderAttachButton()}
|
|
501
|
+
{additionalActions}
|
|
502
|
+
</div>
|
|
503
|
+
<div className={css('pf-chatbot__message-bar-actions-group')}>{renderButtons()}</div>
|
|
504
|
+
</>
|
|
505
|
+
) : (
|
|
506
|
+
renderButtons()
|
|
507
|
+
)}
|
|
508
|
+
</div>
|
|
467
509
|
</>
|
|
468
510
|
);
|
|
469
511
|
|