refactor ui of clipboard inspector

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "streamlit-chat-prompt"
-version = "0.3.12"
+version = "0.3.13"
 description = "A streamlit custom component that allows you to create a chat prompt with paste and image attachment support"
 readme = { file = "README.md", content-type = "text/markdown" }
 authors = [

streamlit_chat_prompt/frontend/src/components/ChatInput.tsx

@@ -18,7 +18,7 @@ import {
 import { checkFileSize, processImage } from "../utils/images";
 import { Logger } from "../utils/logger";
 import { generateUUID } from "../utils/uuid";
-import { ClipboardInspector, ClipboardItem, DIALOG_HEIGHTS, inspectClipboard } from "./ClipboardInspector";
+import { ClipboardInspector, ClipboardInspectorData, ClipboardItem, DIALOG_HEIGHTS, inspectClipboard } from "./ClipboardInspector";
 import { PromptData } from "./PromptData";
 import { Props } from "./Props";
 import { State } from "./State";
@@ -733,6 +733,15 @@ export class ChatInput extends StreamlitComponentBase<State, Props> {
           theme={this.props.theme}
           onClose={this.handleCloseDialog}
           onSelect={this.handleClipboardSelection}
+          setData={(value: React.SetStateAction<ClipboardInspectorData[]>) => {
+            const newData = typeof value === 'function' ? value(this.state.clipboardInspector.data) : value;
+            this.setState({
+              clipboardInspector: {
+                ...this.state.clipboardInspector,
+                data: newData
+              }
+            });
+          }}
         />
         <Snackbar
           open={this.state.notification.open}