From 38437c5ac779997a5ecfff6d64d414415e87948d Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 28 Feb 2025 13:46:21 -0600 Subject: [PATCH] Add max-height/max-width to all icons --- js/chat/chat.scss | 2 ++ shiny/www/py-shiny/chat/chat.css | 2 +- shiny/www/py-shiny/chat/chat.css.map | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/js/chat/chat.scss b/js/chat/chat.scss index ca2d7df16..33a882c36 100644 --- a/js/chat/chat.scss +++ b/js/chat/chat.scss @@ -83,6 +83,8 @@ shiny-chat-message { // images and avatars are full-bleed height: 100%; width: 100%; + max-width: 100%; + max-height: 100%; margin: 0 !important; object-fit: contain; } diff --git a/shiny/www/py-shiny/chat/chat.css b/shiny/www/py-shiny/chat/chat.css index 13fab4fbd..b5eb367ff 100644 --- a/shiny/www/py-shiny/chat/chat.css +++ b/shiny/www/py-shiny/chat/chat.css @@ -1,2 +1,2 @@ -@charset "UTF-8";shiny-chat-container{--shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);--shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), .06);--_chat-container-padding: .25rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;margin:0 auto;gap:0;padding:var(--_chat-container-padding);padding-bottom:0}shiny-chat-container p:last-child{margin-bottom:0}shiny-chat-container .suggestion,shiny-chat-container [data-suggestion]{cursor:pointer;color:var(--bs-link-color, #007bc2);text-decoration-color:var(--bs-link-color, #007bc2);text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:2px;text-underline-offset:4px;text-decoration-thickness:2px;padding:2px}shiny-chat-container .suggestion:hover,shiny-chat-container [data-suggestion]:hover{text-decoration-style:solid}shiny-chat-container .suggestion:after,shiny-chat-container [data-suggestion]:after{content:"\2726";display:inline-block;margin-inline-start:.15em}shiny-chat-container .suggestion.submit:after,shiny-chat-container .suggestion[data-suggestion-submit=""]:after,shiny-chat-container .suggestion[data-suggestion-submit=true]:after,shiny-chat-container [data-suggestion].submit:after,shiny-chat-container [data-suggestion][data-suggestion-submit=""]:after,shiny-chat-container [data-suggestion][data-suggestion-submit=true]:after{content:"\21b5"}shiny-chat-messages{display:flex;flex-direction:column;gap:2rem;overflow:auto;margin-bottom:1rem;--_scroll-margin: 1rem;padding-right:var(--_scroll-margin);margin-right:calc(-1 * var(--_scroll-margin))}shiny-chat-message{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem}shiny-chat-message>*{height:fit-content}shiny-chat-message .message-icon{border-radius:50%;border:var(--shiny-chat-border);height:2rem;width:2rem;display:grid;place-items:center;overflow:clip}shiny-chat-message .message-icon>*{height:100%;width:100%;margin:0!important;object-fit:contain}shiny-chat-message .message-icon>svg,shiny-chat-message .message-icon>.icon,shiny-chat-message .message-icon>.fa,shiny-chat-message .message-icon>.bi{max-height:66%;max-width:66%}shiny-chat-message .message-icon:has(> .border-0){border:none;border-radius:unset;overflow:unset}shiny-chat-message shiny-markdown-stream{align-self:center}shiny-user-message{align-self:flex-end;padding:.75rem 1rem;border-radius:10px;background-color:var(--shiny-chat-user-message-bg);max-width:100%}shiny-user-message[content_type=text],shiny-chat-message[content_type=text]{white-space:pre;overflow-x:auto}shiny-chat-input{--_input-padding-top: 0;--_input-padding-bottom: var(--_chat-container-padding, .25rem);margin-top:calc(-1 * var(--_input-padding-top));position:sticky;bottom:calc(-1 * var(--_input-padding-bottom));padding-block:var(--_input-padding-top) var(--_input-padding-bottom)}shiny-chat-input textarea{--bs-border-radius: 26px;resize:none;padding-right:36px!important;max-height:175px}shiny-chat-input textarea::placeholder{color:var(--bs-gray-600, #707782)!important}shiny-chat-input button{position:absolute;bottom:calc(6px + var(--_input-padding-bottom));right:8px;background-color:transparent;color:var(--bs-primary, #007bc2);transition:color .25s ease-in-out;border:none;padding:0;cursor:pointer;line-height:16px;border-radius:50%}shiny-chat-input button:disabled{cursor:not-allowed;color:var(--bs-gray-500, #8d959e)}.shiny-busy:has(shiny-chat-input[disabled]):after{display:none} +@charset "UTF-8";shiny-chat-container{--shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);--shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), .06);--_chat-container-padding: .25rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;margin:0 auto;gap:0;padding:var(--_chat-container-padding);padding-bottom:0}shiny-chat-container p:last-child{margin-bottom:0}shiny-chat-container .suggestion,shiny-chat-container [data-suggestion]{cursor:pointer;color:var(--bs-link-color, #007bc2);text-decoration-color:var(--bs-link-color, #007bc2);text-decoration-line:underline;text-decoration-style:dotted;text-underline-offset:2px;text-underline-offset:4px;text-decoration-thickness:2px;padding:2px}shiny-chat-container .suggestion:hover,shiny-chat-container [data-suggestion]:hover{text-decoration-style:solid}shiny-chat-container .suggestion:after,shiny-chat-container [data-suggestion]:after{content:"\2726";display:inline-block;margin-inline-start:.15em}shiny-chat-container .suggestion.submit:after,shiny-chat-container .suggestion[data-suggestion-submit=""]:after,shiny-chat-container .suggestion[data-suggestion-submit=true]:after,shiny-chat-container [data-suggestion].submit:after,shiny-chat-container [data-suggestion][data-suggestion-submit=""]:after,shiny-chat-container [data-suggestion][data-suggestion-submit=true]:after{content:"\21b5"}shiny-chat-messages{display:flex;flex-direction:column;gap:2rem;overflow:auto;margin-bottom:1rem;--_scroll-margin: 1rem;padding-right:var(--_scroll-margin);margin-right:calc(-1 * var(--_scroll-margin))}shiny-chat-message{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem}shiny-chat-message>*{height:fit-content}shiny-chat-message .message-icon{border-radius:50%;border:var(--shiny-chat-border);height:2rem;width:2rem;display:grid;place-items:center;overflow:clip}shiny-chat-message .message-icon>*{height:100%;width:100%;max-width:100%;max-height:100%;margin:0!important;object-fit:contain}shiny-chat-message .message-icon>svg,shiny-chat-message .message-icon>.icon,shiny-chat-message .message-icon>.fa,shiny-chat-message .message-icon>.bi{max-height:66%;max-width:66%}shiny-chat-message .message-icon:has(> .border-0){border:none;border-radius:unset;overflow:unset}shiny-chat-message shiny-markdown-stream{align-self:center}shiny-user-message{align-self:flex-end;padding:.75rem 1rem;border-radius:10px;background-color:var(--shiny-chat-user-message-bg);max-width:100%}shiny-user-message[content_type=text],shiny-chat-message[content_type=text]{white-space:pre;overflow-x:auto}shiny-chat-input{--_input-padding-top: 0;--_input-padding-bottom: var(--_chat-container-padding, .25rem);margin-top:calc(-1 * var(--_input-padding-top));position:sticky;bottom:calc(-1 * var(--_input-padding-bottom));padding-block:var(--_input-padding-top) var(--_input-padding-bottom)}shiny-chat-input textarea{--bs-border-radius: 26px;resize:none;padding-right:36px!important;max-height:175px}shiny-chat-input textarea::placeholder{color:var(--bs-gray-600, #707782)!important}shiny-chat-input button{position:absolute;bottom:calc(6px + var(--_input-padding-bottom));right:8px;background-color:transparent;color:var(--bs-primary, #007bc2);transition:color .25s ease-in-out;border:none;padding:0;cursor:pointer;line-height:16px;border-radius:50%}shiny-chat-input button:disabled{cursor:not-allowed;color:var(--bs-gray-500, #8d959e)}.shiny-busy:has(shiny-chat-input[disabled]):after{display:none} /*# sourceMappingURL=chat.css.map */ diff --git a/shiny/www/py-shiny/chat/chat.css.map b/shiny/www/py-shiny/chat/chat.css.map index 5aeff986a..d62aed7df 100644 --- a/shiny/www/py-shiny/chat/chat.css.map +++ b/shiny/www/py-shiny/chat/chat.css.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["../../../../js/chat/chat.scss"], - "sourcesContent": ["@charset \"UTF-8\";\nshiny-chat-container {\n --shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);\n --shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), 0.06);\n --_chat-container-padding: 0.25rem;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n margin: 0 auto;\n gap: 0;\n padding: var(--_chat-container-padding);\n padding-bottom: 0;\n}\nshiny-chat-container p:last-child {\n margin-bottom: 0;\n}\nshiny-chat-container .suggestion,\nshiny-chat-container [data-suggestion] {\n cursor: pointer;\n color: var(--bs-link-color, #007bc2);\n text-decoration-color: var(--bs-link-color, #007bc2);\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-underline-offset: 4px;\n text-decoration-thickness: 2px;\n padding: 2px;\n}\nshiny-chat-container .suggestion:hover,\nshiny-chat-container [data-suggestion]:hover {\n text-decoration-style: solid;\n}\nshiny-chat-container .suggestion::after,\nshiny-chat-container [data-suggestion]::after {\n content: \"\u2726\";\n display: inline-block;\n margin-inline-start: 0.15em;\n}\nshiny-chat-container .suggestion.submit::after, shiny-chat-container .suggestion[data-suggestion-submit=\"\"]::after, shiny-chat-container .suggestion[data-suggestion-submit=true]::after,\nshiny-chat-container [data-suggestion].submit::after,\nshiny-chat-container [data-suggestion][data-suggestion-submit=\"\"]::after,\nshiny-chat-container [data-suggestion][data-suggestion-submit=true]::after {\n content: \"\u21B5\";\n}\n\nshiny-chat-messages {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n overflow: auto;\n margin-bottom: 1rem;\n --_scroll-margin: 1rem;\n padding-right: var(--_scroll-margin);\n margin-right: calc(-1 * var(--_scroll-margin));\n}\n\nshiny-chat-message {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: 1rem;\n /* Vertically center the 2nd column (message content) */\n}\nshiny-chat-message > * {\n height: fit-content;\n}\nshiny-chat-message .message-icon {\n border-radius: 50%;\n border: var(--shiny-chat-border);\n height: 2rem;\n width: 2rem;\n display: grid;\n place-items: center;\n overflow: clip;\n}\nshiny-chat-message .message-icon > * {\n height: 100%;\n width: 100%;\n margin: 0 !important;\n object-fit: contain;\n}\nshiny-chat-message .message-icon > svg,\nshiny-chat-message .message-icon > .icon,\nshiny-chat-message .message-icon > .fa,\nshiny-chat-message .message-icon > .bi {\n max-height: 66%;\n max-width: 66%;\n}\nshiny-chat-message .message-icon:has(> .border-0) {\n border: none;\n border-radius: unset;\n overflow: unset;\n}\nshiny-chat-message shiny-markdown-stream {\n align-self: center;\n}\n\n/* Align the user message to the right */\nshiny-user-message {\n align-self: flex-end;\n padding: 0.75rem 1rem;\n border-radius: 10px;\n background-color: var(--shiny-chat-user-message-bg);\n max-width: 100%;\n}\n\nshiny-user-message[content_type=text],\nshiny-chat-message[content_type=text] {\n white-space: pre;\n overflow-x: auto;\n}\n\nshiny-chat-input {\n --_input-padding-top: 0;\n --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);\n margin-top: calc(-1 * var(--_input-padding-top));\n position: sticky;\n bottom: calc(-1 * var(--_input-padding-bottom));\n padding-block: var(--_input-padding-top) var(--_input-padding-bottom);\n}\nshiny-chat-input textarea {\n --bs-border-radius: 26px;\n resize: none;\n padding-right: 36px !important;\n max-height: 175px;\n}\nshiny-chat-input textarea::placeholder {\n color: var(--bs-gray-600, #707782) !important;\n}\nshiny-chat-input button {\n position: absolute;\n bottom: calc(6px + var(--_input-padding-bottom));\n right: 8px;\n background-color: transparent;\n color: var(--bs-primary, #007bc2);\n transition: color 0.25s ease-in-out;\n border: none;\n padding: 0;\n cursor: pointer;\n line-height: 16px;\n border-radius: 50%;\n}\nshiny-chat-input button:disabled {\n cursor: not-allowed;\n color: var(--bs-gray-500, #8d959e);\n}\n\n/*\n Disable the page-level pulse when the chat input is disabled\n (i.e., when a response is being generated and brought into the chat)\n*/\n.shiny-busy:has(shiny-chat-input[disabled])::after {\n display: none;\n}"], - "mappings": "iBACA,qBACE,uFACA,4EACA,kCACA,aACA,0BACA,4BAPF,cASE,MACA,uCACA,iBAEF,kCACE,gBAEF,wEAEE,eACA,oCACA,oDACA,+BACA,6BAEA,0BACA,0BACA,8BA1BF,YA6BA,oFAEE,4BAEF,oFAEE,gBACA,qBACA,0BAEF,0XAIE,gBAGF,oBACE,aACA,sBACA,SACA,cACA,mBACA,uBACA,oCACA,8CAGF,mBACE,aACA,yCACA,SAGF,qBACE,mBAEF,iCAlEA,kBAoEE,gCACA,YACA,WACA,aACA,mBACA,cAEF,mCACE,YACA,WA7EF,mBA+EE,mBAEF,sJAIE,eACA,cAEF,kDACE,YACA,oBACA,eAEF,yCACE,kBAIF,mBACE,oBAnGF,uCAsGE,mDACA,eAGF,4EAEE,gBACA,gBAGF,iBACE,wBACA,gEACA,gDACA,gBACA,+CACA,qEAEF,0BACE,yBACA,YACA,6BACA,iBAEF,uCACE,4CAEF,wBACE,kBACA,gDACA,UACA,6BACA,iCACA,kCACA,YAxIF,UA0IE,eACA,iBA3IF,kBA8IA,iCACE,mBACA,kCAOF,kDACE", + "sourcesContent": ["@charset \"UTF-8\";\nshiny-chat-container {\n --shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);\n --shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), 0.06);\n --_chat-container-padding: 0.25rem;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr auto;\n margin: 0 auto;\n gap: 0;\n padding: var(--_chat-container-padding);\n padding-bottom: 0;\n}\nshiny-chat-container p:last-child {\n margin-bottom: 0;\n}\nshiny-chat-container .suggestion,\nshiny-chat-container [data-suggestion] {\n cursor: pointer;\n color: var(--bs-link-color, #007bc2);\n text-decoration-color: var(--bs-link-color, #007bc2);\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: 2px;\n text-underline-offset: 2px;\n text-underline-offset: 4px;\n text-decoration-thickness: 2px;\n padding: 2px;\n}\nshiny-chat-container .suggestion:hover,\nshiny-chat-container [data-suggestion]:hover {\n text-decoration-style: solid;\n}\nshiny-chat-container .suggestion::after,\nshiny-chat-container [data-suggestion]::after {\n content: \"\u2726\";\n display: inline-block;\n margin-inline-start: 0.15em;\n}\nshiny-chat-container .suggestion.submit::after, shiny-chat-container .suggestion[data-suggestion-submit=\"\"]::after, shiny-chat-container .suggestion[data-suggestion-submit=true]::after,\nshiny-chat-container [data-suggestion].submit::after,\nshiny-chat-container [data-suggestion][data-suggestion-submit=\"\"]::after,\nshiny-chat-container [data-suggestion][data-suggestion-submit=true]::after {\n content: \"\u21B5\";\n}\n\nshiny-chat-messages {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n overflow: auto;\n margin-bottom: 1rem;\n --_scroll-margin: 1rem;\n padding-right: var(--_scroll-margin);\n margin-right: calc(-1 * var(--_scroll-margin));\n}\n\nshiny-chat-message {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n gap: 1rem;\n /* Vertically center the 2nd column (message content) */\n}\nshiny-chat-message > * {\n height: fit-content;\n}\nshiny-chat-message .message-icon {\n border-radius: 50%;\n border: var(--shiny-chat-border);\n height: 2rem;\n width: 2rem;\n display: grid;\n place-items: center;\n overflow: clip;\n}\nshiny-chat-message .message-icon > * {\n height: 100%;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n margin: 0 !important;\n object-fit: contain;\n}\nshiny-chat-message .message-icon > svg,\nshiny-chat-message .message-icon > .icon,\nshiny-chat-message .message-icon > .fa,\nshiny-chat-message .message-icon > .bi {\n max-height: 66%;\n max-width: 66%;\n}\nshiny-chat-message .message-icon:has(> .border-0) {\n border: none;\n border-radius: unset;\n overflow: unset;\n}\nshiny-chat-message shiny-markdown-stream {\n align-self: center;\n}\n\n/* Align the user message to the right */\nshiny-user-message {\n align-self: flex-end;\n padding: 0.75rem 1rem;\n border-radius: 10px;\n background-color: var(--shiny-chat-user-message-bg);\n max-width: 100%;\n}\n\nshiny-user-message[content_type=text],\nshiny-chat-message[content_type=text] {\n white-space: pre;\n overflow-x: auto;\n}\n\nshiny-chat-input {\n --_input-padding-top: 0;\n --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);\n margin-top: calc(-1 * var(--_input-padding-top));\n position: sticky;\n bottom: calc(-1 * var(--_input-padding-bottom));\n padding-block: var(--_input-padding-top) var(--_input-padding-bottom);\n}\nshiny-chat-input textarea {\n --bs-border-radius: 26px;\n resize: none;\n padding-right: 36px !important;\n max-height: 175px;\n}\nshiny-chat-input textarea::placeholder {\n color: var(--bs-gray-600, #707782) !important;\n}\nshiny-chat-input button {\n position: absolute;\n bottom: calc(6px + var(--_input-padding-bottom));\n right: 8px;\n background-color: transparent;\n color: var(--bs-primary, #007bc2);\n transition: color 0.25s ease-in-out;\n border: none;\n padding: 0;\n cursor: pointer;\n line-height: 16px;\n border-radius: 50%;\n}\nshiny-chat-input button:disabled {\n cursor: not-allowed;\n color: var(--bs-gray-500, #8d959e);\n}\n\n/*\n Disable the page-level pulse when the chat input is disabled\n (i.e., when a response is being generated and brought into the chat)\n*/\n.shiny-busy:has(shiny-chat-input[disabled])::after {\n display: none;\n}"], + "mappings": "iBACA,qBACE,uFACA,4EACA,kCACA,aACA,0BACA,4BAPF,cASE,MACA,uCACA,iBAEF,kCACE,gBAEF,wEAEE,eACA,oCACA,oDACA,+BACA,6BAEA,0BACA,0BACA,8BA1BF,YA6BA,oFAEE,4BAEF,oFAEE,gBACA,qBACA,0BAEF,0XAIE,gBAGF,oBACE,aACA,sBACA,SACA,cACA,mBACA,uBACA,oCACA,8CAGF,mBACE,aACA,yCACA,SAGF,qBACE,mBAEF,iCAlEA,kBAoEE,gCACA,YACA,WACA,aACA,mBACA,cAEF,mCACE,YACA,WACA,eACA,gBA/EF,mBAiFE,mBAEF,sJAIE,eACA,cAEF,kDACE,YACA,oBACA,eAEF,yCACE,kBAIF,mBACE,oBArGF,uCAwGE,mDACA,eAGF,4EAEE,gBACA,gBAGF,iBACE,wBACA,gEACA,gDACA,gBACA,+CACA,qEAEF,0BACE,yBACA,YACA,6BACA,iBAEF,uCACE,4CAEF,wBACE,kBACA,gDACA,UACA,6BACA,iCACA,kCACA,YA1IF,UA4IE,eACA,iBA7IF,kBAgJA,iCACE,mBACA,kCAOF,kDACE", "names": [] }