added changes to expand textarea with text

frontend/src/components/QuestionInput/QuestionInput.module.css

@@ -1,5 +1,5 @@
 .questionInputContainer {
-  height: 120px;
+  height: 130px;
   position: absolute;
   left: 6.5%;
   right: 0%;

frontend/src/components/QuestionInput/QuestionInput.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { useContext, useState, useRef } from 'react'
 import { FontIcon, Stack, TextField } from '@fluentui/react'
 import { SendRegular } from '@fluentui/react-icons'
 
@@ -11,14 +11,17 @@ import { resizeImage } from '../../utils/resizeImage'
 
 interface Props {
   onSend: (question: ChatMessage['content'], id?: string) => void
+  onInputChange: (lines: number) => void;
   disabled: boolean
   placeholder?: string
   clearOnSend?: boolean
   conversationId?: string
 }
 
-export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conversationId }: Props) => {
+export const QuestionInput = ({ onSend, onInputChange, disabled, placeholder, clearOnSend, conversationId }: Props) => {
   const [question, setQuestion] = useState<string>('')
+  const questionRef = useRef<string>("");
+  const linesRef = useRef<number>(1); //immediate number of lines in textbox are saved in this
   const [base64Image, setBase64Image] = useState<string | null>(null);
 
   const appStateContext = useContext(AppStateContext)
@@ -57,6 +60,7 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
     }
 
     if (clearOnSend) {
+      linesRef.current = 1;
       setQuestion('')
     }
   }
@@ -68,14 +72,41 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
     }
   }
 
-  const onQuestionChange = (_ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
-    setQuestion(newValue || '')
+ //number of lines in textbox are calculated using this function
+ const updateNumberOfLines = (text: string) => {
+  const textField = document.createElement("div");
+  textField.style.position = "absolute";
+  textField.style.visibility = "hidden";
+  textField.style.whiteSpace = "pre-wrap";
+  textField.style.fontSize = "14px";
+  textField.style.lineHeight = "20px";
+  textField.style.width = "800px";
+  document.body.appendChild(textField);
+  textField.textContent = questionRef.current;
+  const computedStyle = window.getComputedStyle(textField);
+  const height = parseFloat(computedStyle.height);
+  const lineHeight = parseFloat(computedStyle.lineHeight);
+  const numberOfLines = Math.ceil(height / lineHeight);
+  linesRef.current = numberOfLines + 2; //adding two extra lines so that content is not hidden in textfield
+  onInputChange(linesRef.current);
+  if (textField.parentNode) {
+    textField.parentNode.removeChild(textField);
   }
+};
+
+const onQuestionChange = (
+  _ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+  newValue?: string
+) => {
+  questionRef.current = newValue || "";
+  setQuestion(newValue || "");
+  updateNumberOfLines(questionRef.current);
+};
 
   const sendQuestionDisabled = disabled || !question.trim()
 
   return (
-    <Stack horizontal className={styles.questionInputContainer}>
+    <Stack horizontal className={styles.questionInputContainer} style={{height: Math.min(200, linesRef.current * 20)<120?'120px': `${Math.min(200, linesRef.current * 20)+12}px`}}>
       <TextField
         className={styles.questionInputTextArea}
         placeholder={placeholder}
@@ -85,6 +116,14 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
         value={question}
         onChange={onQuestionChange}
         onKeyDown={onEnterPress}
+        autoAdjustHeight={false}
+        style={{
+          width: "auto",
+          fontSize: "14px",
+          lineHeight: "20px",
+          height: `${Math.min(200, linesRef.current * 20)}px`,
+          overflowY: linesRef.current * 20 < 200 ? "hidden" : "auto",
+        }}
       />
       {!OYD_ENABLED && (
         <div className={styles.fileInputContainer}>

frontend/src/pages/chat/Chat.module.css

@@ -146,7 +146,7 @@
   padding-right: 24px;
   width: calc(100% - 100px);
   max-width: 1028px;
-  margin-bottom: 50px;
+  margin-bottom: 78px;
   margin-top: 8px;
 }
 
@@ -176,7 +176,7 @@
   width: 40px;
   height: 40px;
   left: 7px;
-  top: 66px;
+  top: 80px;
   color: #ffffff;
   border-radius: 4px;
   z-index: 1;

frontend/src/pages/chat/Chat.tsx

@@ -98,6 +98,8 @@ const Chat = () => {
       toggleErrorDialog()
     }
   }, [appStateContext?.state.isCosmosDBAvailable])
+  const [linesRef, setLinesRef] = useState<number>(1); //stores number of lines in the textfield
+  useEffect(() => {}, [linesRef]); //refreshes the linesRef value to get immediate value in the variable
 
   const handleErrorDialogClose = () => {
     toggleErrorDialog()
@@ -180,6 +182,7 @@ const Chat = () => {
   }
 
   const makeApiRequestWithoutCosmosDB = async (question: ChatMessage["content"], conversationId?: string) => {
+    setLinesRef(1);
     setIsLoading(true)
     setShowLoadingMessage(true)
     const abortController = new AbortController()
@@ -307,6 +310,7 @@ const Chat = () => {
   }
 
   const makeApiRequestWithCosmosDB = async (question: ChatMessage["content"], conversationId?: string) => {
+    setLinesRef(1);
     setIsLoading(true)
     setShowLoadingMessage(true)
     const abortController = new AbortController()
@@ -756,6 +760,10 @@ const Chat = () => {
       appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Loading
     )
   }
+  //gets updated number of lines in the textfield from parent component
+  const handleQuestionInputChange = (lines: number) => {
+    setLinesRef(lines);
+  };
 
   return (
     <div className={styles.container} role="main">
@@ -850,7 +858,15 @@ const Chat = () => {
               </div>
             )}
 
-            <Stack horizontal className={styles.chatInput}>
+            <Stack horizontal className={styles.chatInput}
+            //after 5 lines, the textfield will start to expand upwards till 200px.
+              style={{
+                flex:
+                  linesRef > 5
+                    ? `0 0 ${Math.min(200, linesRef * 20)-40}px`
+                    : "0 0 80px",
+              }}
+            >
               {isLoading && messages.length > 0 && (
                 <Stack
                   horizontal
@@ -916,6 +932,8 @@ const Chat = () => {
                       ? styles.clearChatBroom
                       : styles.clearChatBroomNoCosmos
                   }
+                  //update broom position to align it with textfield
+                  style={{top:linesRef>5?`${Math.min(200, linesRef * 20)-30}px`:'80px'}}
                   iconProps={{ iconName: 'Broom' }}
                   onClick={
                     appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured
@@ -943,6 +961,7 @@ const Chat = () => {
                 conversationId={
                   appStateContext?.state.currentChat?.id ? appStateContext?.state.currentChat?.id : undefined
                 }
+                onInputChange={handleQuestionInputChange}
               />
             </Stack>
           </div>