Chat: add unique identifiers to CollapsiblePanel components (#5532)

This PR adds an id prop to the History Chat items that allows dev
identify chat history by period in E2E test

- Adds an `id` prop to the `CollapsiblePanel` component to provide a
unique identifier
- Updates the `Collapsible` and `CollapsibleContent` components to use
the `id` prop
- Ensures each `CollapsiblePanel` in the `HistoryTab` has a unique
identifier based on the period

## Test plan

<!-- Required. See
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles.
-->

Green CI - Everything should works the same.

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->

vscode/webviews/components/CollapsiblePanel.tsx

@@ -12,9 +12,11 @@ interface CollapsiblePanelProps {
     className?: string
     contentClassName?: string
     initialOpen?: boolean
+    id?: string
 }
 
 export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
+    id,
     storageKey,
     title,
     children,
@@ -28,6 +30,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
 
     return (
         <Collapsible
+            id={id}
             open={isOpen}
             onOpenChange={setIsOpen}
             className={clsx('tw-w-full tw-flex tw-flex-col tw-gap-3', className)}
@@ -46,6 +49,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
             </div>
             <CollapsibleContent>
                 <div
+                    id={`${id}-content`}
                     className={clsx(
                         'tw-px-2 tw-py-2 tw-flex tw-flex-col tw-bg-popover tw-border tw-border-border tw-rounded-lg',
                         contentClassName

vscode/webviews/tabs/HistoryTab.tsx

@@ -65,6 +65,7 @@ export const HistoryTab: React.FC<HistoryTabProps> = ({
         <div className="tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {chats.map(([period, chats]) => (
                 <CollapsiblePanel
+                    id={`history-${period}`.replaceAll(' ', '-').toLowerCase()}
                     key={period}
                     storageKey={`history.${period}`}
                     title={period}