Feat: Allow agent operators to select speech-to-text models #3221 (#9534)

### What problem does this PR solve?

Feat: Allow agent operators to select speech-to-text models #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -23,7 +23,7 @@ interface IProps {
 export function SingleChatBox({ controller }: IProps) {
   const {
     value,
-    // scrollRef,
+    scrollRef,
     messageContainerRef,
     sendLoading,
     derivedMessages,
@@ -47,7 +47,7 @@ export function SingleChatBox({ controller }: IProps) {
   return (
     <section className="flex flex-col p-5 h-full">
       <div ref={messageContainerRef} className="flex-1 overflow-auto min-h-0">
-        <div className="w-full">
+        <div className="w-full pr-5">
           {derivedMessages?.map((message, i) => {
             return (
               <MessageItem
@@ -77,7 +77,7 @@ export function SingleChatBox({ controller }: IProps) {
             );
           })}
         </div>
-        {/* <div ref={scrollRef} /> */}
+        <div ref={scrollRef} />
       </div>
       <NextMessageInput
         disabled={disabled}