diff --git a/mikupad.html b/mikupad.html
index 4634214..d94a84f 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -518,7 +518,7 @@
gap: 8px;
}
.hbox-flex > .InputBox {
- width: 100%;
+ width: 100%;
}
.small-inputBox {
width: 8em;
@@ -719,7 +719,7 @@
margin: 0 5px 0 0;
vertical-align: middle;
position: relative;
- bottom: .08em;
+ bottom: .08em;
}
.InputBox > div > input.mixed-content {
@@ -1804,8 +1804,8 @@
setContentHeight(contentArea.current.scrollHeight);
}, [isCollapsed]);
- const expandSvg = html``;
- const collapseSvg = html``;
+ const expandSvg = html`<${SVG_ArrowDown}/>`;
+ const collapseSvg = html`<${SVG_ArrowUp}/>`;
return html`
@@ -1927,12 +1927,6 @@
}
}
- const trashSvg = html`
`;
- const renameSvg = html`
`;
-
- const confirmSvg = html`
`;
- const cancelSvg = html`
`;
-
return html`
@@ -1948,8 +1942,8 @@
autoFocus
/>
-
-
+
+
`}
@@ -1967,18 +1961,18 @@
autoFocus
/>
-
-
+
+
` : html`
${session.name}
`}
@@ -1994,7 +1988,184 @@
`;
}
-
+const SVG = ({
+ stroke="currentColor",
+ fill="currentColor",
+ strokeWidth="0",
+ children,
+ ...props
+}) => {
+ return html`
+
+`};
+const SVG_Close = ({...props}) => {
+ return html`
+ <${SVG}
+ viewBox="-1 -1 10 10">
+
+ ${SVG}>
+`};
+const SVG_Confirm = ({...props}) => {
+ return html`
+ <${SVG}
+ width="16"
+ height="16"
+ viewBox="0 0 128 128">
+
+
+ ${SVG}>
+`};
+const SVG_Cancel = ({...props}) => {
+ return html`
+ <${SVG}
+ width="16"
+ height="16"
+ viewBox="0 0 128 128">
+
+
+ ${SVG}>
+`};
+const SVG_Trash = ({...props}) => {
+ return html`
+ <${SVG}
+ width="16"
+ height="16"
+ viewBox="0 0 490.646 490.646">
+
+ ${SVG}>
+`};
+const SVG_Rename = ({...props}) => {
+ return html`
+ <${SVG}
+ width="16"
+ height="16"
+ viewBox="0 0 512 448">
+
+
+
+ ${SVG}>
+`};
+const SVG_ArrowUp = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 0 330 330"
+ width="12"
+ height="12">
+
+ ${SVG}>
+`};
+const SVG_ArrowDown = ({...props}) => {
+ return html`
+ <${SVG_ArrowUp}
+ ...${props}
+ style=${{ 'transform':'rotate(180deg)' }}/>
+`};
+const SVG_Settings = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="-1 -5 8 7">
+
+ ${SVG}>
+`};
+const SVG_MobileSidebar = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ transform="translate(0, 2)"
+ width="16"
+ height="16"
+ viewBox="0 0 512 512">
+
+ ${SVG}>
+`};
+const SVG_ShowKey = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ width="16"
+ height="16"
+ viewBox="0 0 24 24">
+
+ ${SVG}>
+`};
+const SVG_HideKey = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ width="16"
+ height="16"
+ viewBox="0 0 24 24">
+
+ ${SVG}>
+`};
+const SVG_SysPrompt = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 -10 10 10">
+
+ ${SVG}>
+`};
+const SVG_instTemplate = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 -10 5 10">
+
+ ${SVG}>
+`};
+const SVG_ChatMode = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 0 10 10">
+
+ ${SVG}>
+`};
+const SVG_CompletionMode = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="2 -1 34 28">
+
+ ${SVG}>
+`};
+const SVG_Regen = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 0 40.499 40.5"
+ width="12"
+ height="12">
+
+ ${SVG}>
+`};
+const SVG_Undo = ({...props}) => {
+ return html`
+ <${SVG}
+ ...${props}
+ viewBox="0 0 24 24"
+ width="12"
+ height="12">
+
+ ${SVG}>
+`};
+const SVG_Redo = ({...props}) => {
+ return html`
+ <${SVG_Undo}
+ ...${props}
+ style=${{ 'transform':'scaleX(-1)' }}/>
+`};
function Modal({ isOpen, onClose, title, description, children, ...props }) {
if (!isOpen) {
@@ -2026,7 +2197,7 @@
@@ -2042,7 +2213,7 @@