Refactor: Extract InputContexts component in ChatPanel

Extracted the InputContexts component from the chatPanel function in the ChatPanel/index.tsx file.
Replaced the previous inline implementation with the new InputContexts component.
InputContexts component handles the display and management of input contexts in the chat panel.

src/views/ChatPanel/index.tsx

@@ -745,46 +745,9 @@ const chatPanel = () => {
             </Button>);
     };
 
-    return (
+    const InputContexts = (props: any) => {
-        <Container
+        const { contexts } = props;
-            id='chat-container'
+        return (<Accordion variant="contained" chevronPosition="left"
-            ref={chatContainerRef}
-            sx={{
-                height: '100%',
-                margin: 0,
-                padding: 10,
-                background: 'var(--vscode-sideBar-background)',
-                color: 'var(--vscode-editor-foreground)',
-                minWidth: 240
-            }}>
-            <ScrollArea
-                id='chat-scroll-area'
-                type="never"
-                sx={{
-                    height: generating ? height - px('8rem') : height - px('5rem'),
-                    width: chatContainerRect.width,
-                    padding: 0,
-                    margin: 0,
-                }}
-                onScrollPositionChange={onScrollPositionChange}
-                viewportRef={scrollViewport}>
-                <MessageContainer generating={generating} messages={messages} chatContainerRect={chatContainerRect} responsed={responsed} />
-            </ScrollArea>
-            <Stack
-                spacing={5}
-                sx={{ position: 'absolute', bottom: 10, width: chatContainerRect.width }}>
-                {generating &&
-                    <Center>
-                        <StopButton />
-                    </Center>
-                }
-                {hasError &&
-                    <Center>
-                        <RegenerationButton />
-                    </Center>
-                }
-                {contexts && contexts.length > 0 &&
-                    <Accordion variant="contained" chevronPosition="left"
             sx={{
                 backgroundColor: 'var(--vscode-menu-background)',
             }}
@@ -826,10 +789,10 @@ const chatPanel = () => {
                     borderRadius: 3,
                     backgroundColor: 'var(--vscode-menu-background)',
                 }
-                        }}
+            }}>
-                    >
             {
-                            contexts.map(({ context }, index) => {
+                contexts.map((item: any, index: number) => {
+                    const { context } = item;
                     return (
                         <Accordion.Item value={`item-${index}`} >
                             <Box sx={{
@@ -869,7 +832,49 @@ const chatPanel = () => {
                     );
                 })
             }
-                    </Accordion>
+        </Accordion>);
+    };
+
+    return (
+        <Container
+            id='chat-container'
+            ref={chatContainerRef}
+            sx={{
+                height: '100%',
+                margin: 0,
+                padding: 10,
+                background: 'var(--vscode-sideBar-background)',
+                color: 'var(--vscode-editor-foreground)',
+                minWidth: 240
+            }}>
+            <ScrollArea
+                id='chat-scroll-area'
+                type="never"
+                sx={{
+                    height: generating ? height - px('8rem') : height - px('5rem'),
+                    width: chatContainerRect.width,
+                    padding: 0,
+                    margin: 0,
+                }}
+                onScrollPositionChange={onScrollPositionChange}
+                viewportRef={scrollViewport}>
+                <MessageContainer generating={generating} messages={messages} chatContainerRect={chatContainerRect} responsed={responsed} />
+            </ScrollArea>
+            <Stack
+                spacing={5}
+                sx={{ position: 'absolute', bottom: 10, width: chatContainerRect.width }}>
+                {generating &&
+                    <Center>
+                        <StopButton />
+                    </Center>
+                }
+                {hasError &&
+                    <Center>
+                        <RegenerationButton />
+                    </Center>
+                }
+                {contexts && contexts.length > 0 &&
+                    <InputContexts contexts={contexts} />
                 }
                 <Popover
                     id='commandMenu'