Refactor the submit chevron button in ChatInput to use a nested span for better control over CSS transitions and toggling

Author: robertpiosik

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -228,8 +228,15 @@
           padding: 0 var(--padding-2px);
         }
 
-        &--chevron.codicon::before {
-          font-size: 11px;
+        &--chevron {
+          > span.codicon::before {
+            font-size: 11px;
+            transition: transform 0.2s ease-in-out;
+          }
+        }
+
+        &--toggled {
+          transform: rotate(180deg);
         }
 
         &--copy {

packages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx

@@ -278,13 +278,22 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                   <button
                     className={cn(
                       styles['footer__right__submit__button'],
-                      styles['footer__right__submit__button--chevron'],
-                      'codicon',
-                      'codicon-chevron-down'
+                      styles['footer__right__submit__button--chevron']
                     )}
                     onClick={toggle_dropdown}
                     title="More actions"
-                  />
+                  >
+                    <span
+                      className={cn(
+                        {
+                          [styles['footer__right__submit__button--toggled']]:
+                            is_dropdown_open
+                        },
+                        'codicon',
+                        'codicon-chevron-down'
+                      )}
+                    />
+                  </button>
                   {is_dropdown_open && (
                     <div className={styles['footer__right__submit__dropdown']}>
                       <div