added extra prompts, gradio and mock_tools

.venv/lib/python3.12/site-packages/gradio/_frontend_code/lite/src/theme.css

@@ -0,0 +1,563 @@
+
+@font-face {
+    font-family: 'ui-sans-serif';
+    src: url('static/fonts/ui-sans-serif/ui-sans-serif-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'ui-sans-serif';
+    src: url('static/fonts/ui-sans-serif/ui-sans-serif-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'system-ui';
+    src: url('static/fonts/system-ui/system-ui-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'system-ui';
+    src: url('static/fonts/system-ui/system-ui-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'sans-serif';
+    src: url('static/fonts/sans-serif/sans-serif-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'sans-serif';
+    src: url('static/fonts/sans-serif/sans-serif-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('static/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'ui-monospace';
+    src: url('static/fonts/ui-monospace/ui-monospace-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'ui-monospace';
+    src: url('static/fonts/ui-monospace/ui-monospace-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'Consolas';
+    src: url('static/fonts/Consolas/Consolas-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'Consolas';
+    src: url('static/fonts/Consolas/Consolas-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'monospace';
+    src: url('static/fonts/monospace/monospace-Regular.woff2') format('woff2');
+    font-weight: Regular;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'monospace';
+    src: url('static/fonts/monospace/monospace-Bold.woff2') format('woff2');
+    font-weight: Bold;
+    font-style: normal;
+}
+
+:root {
+  --name: default;
+  --primary-50: #fff7ed;
+  --primary-100: #ffedd5;
+  --primary-200: #ffddb3;
+  --primary-300: #fdba74;
+  --primary-400: #fb923c;
+  --primary-500: #f97316;
+  --primary-600: #ea580c;
+  --primary-700: #c2410c;
+  --primary-800: #9a3412;
+  --primary-900: #7c2d12;
+  --primary-950: #6c2e12;
+  --secondary-50: #eff6ff;
+  --secondary-100: #dbeafe;
+  --secondary-200: #bfdbfe;
+  --secondary-300: #93c5fd;
+  --secondary-400: #60a5fa;
+  --secondary-500: #3b82f6;
+  --secondary-600: #2563eb;
+  --secondary-700: #1d4ed8;
+  --secondary-800: #1e40af;
+  --secondary-900: #1e3a8a;
+  --secondary-950: #1d3660;
+  --neutral-50: #fafafa;
+  --neutral-100: #f4f4f5;
+  --neutral-200: #e4e4e7;
+  --neutral-300: #d4d4d8;
+  --neutral-400: #bbbbc2;
+  --neutral-500: #71717a;
+  --neutral-600: #52525b;
+  --neutral-700: #3f3f46;
+  --neutral-800: #27272a;
+  --neutral-900: #18181b;
+  --neutral-950: #0f0f11;
+  --spacing-xxs: 1px;
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+  --spacing-xxl: 16px;
+  --radius-xxs: 1px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 22px;
+  --text-xxs: 9px;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 22px;
+  --text-xxl: 26px;
+  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+  --body-background-fill: var(--background-fill-primary);
+  --body-text-color: var(--neutral-800);
+  --body-text-size: var(--text-md);
+  --body-text-weight: 400;
+  --embed-radius: var(--radius-sm);
+  --color-accent: var(--primary-500);
+  --color-accent-soft: var(--primary-50);
+  --background-fill-primary: white;
+  --background-fill-secondary: var(--neutral-50);
+  --border-color-accent: var(--primary-300);
+  --border-color-primary: var(--neutral-200);
+  --link-text-color: var(--secondary-600);
+  --link-text-color-active: var(--secondary-600);
+  --link-text-color-hover: var(--secondary-700);
+  --link-text-color-visited: var(--secondary-500);
+  --body-text-color-subdued: var(--neutral-400);
+  --accordion-text-color: var(--body-text-color);
+  --table-text-color: var(--body-text-color);
+  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
+  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
+  --shadow-spread: 3px;
+  --block-background-fill: var(--background-fill-primary);
+  --block-border-color: var(--border-color-primary);
+  --block-border-width: 1px;
+  --block-info-text-color: var(--body-text-color-subdued);
+  --block-info-text-size: var(--text-sm);
+  --block-info-text-weight: 400;
+  --block-label-background-fill: var(--background-fill-primary);
+  --block-label-border-color: var(--border-color-primary);
+  --block-label-border-width: 1px;
+  --block-label-shadow: var(--block-shadow);
+  --block-label-text-color: var(--neutral-500);
+  --block-label-margin: 0;
+  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+  --block-label-radius: calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px) 0;
+  --block-label-right-radius: 0 calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px);
+  --block-label-text-size: var(--text-sm);
+  --block-label-text-weight: 400;
+  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+  --block-radius: var(--radius-sm);
+  --block-shadow: none;
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-text-color: var(--neutral-500);
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 400;
+  --container-radius: var(--radius-sm);
+  --form-gap-width: 0px;
+  --layout-gap: var(--spacing-xxl);
+  --panel-background-fill: var(--background-fill-secondary);
+  --panel-border-color: var(--border-color-primary);
+  --panel-border-width: 0;
+  --section-header-text-size: var(--text-md);
+  --section-header-text-weight: 400;
+  --border-color-accent-subdued: var(--primary-200);
+  --code-background-fill: var(--neutral-100);
+  --chatbot-text-size: var(--text-lg);
+  --checkbox-background-color: var(--background-fill-primary);
+  --checkbox-background-color-focus: var(--checkbox-background-color);
+  --checkbox-background-color-hover: var(--checkbox-background-color);
+  --checkbox-background-color-selected: var(--color-accent);
+  --checkbox-border-color: var(--neutral-300);
+  --checkbox-border-color-focus: var(--color-accent);
+  --checkbox-border-color-hover: var(--neutral-300);
+  --checkbox-border-color-selected: var(--color-accent);
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-border-width: var(--input-border-width);
+  --checkbox-label-background-fill: var(--background-fill-primary);
+  --checkbox-label-background-fill-hover: var(--background-fill-secondary);
+  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
+  --checkbox-label-border-color: var(--border-color-primary);
+  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+  --checkbox-label-border-color-selected: var(--checkbox-label-border-color);
+  --checkbox-label-border-width: var(--input-border-width);
+  --checkbox-label-gap: var(--spacing-lg);
+  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --checkbox-label-shadow: none;
+  --checkbox-label-text-size: var(--text-md);
+  --checkbox-label-text-weight: 400;
+  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  --checkbox-shadow: var(--input-shadow);
+  --checkbox-label-text-color: var(--body-text-color);
+  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
+  --error-background-fill: #fef2f2;
+  --error-border-color: #b91c1c;
+  --error-border-width: 1px;
+  --error-text-color: #b91c1c;
+  --error-icon-color: #b91c1c;
+  --input-background-fill: white;
+  --input-background-fill-focus: var(--input-background-fill);
+  --input-background-fill-hover: var(--input-background-fill);
+  --input-border-color: var(--border-color-primary);
+  --input-border-color-focus: var(--secondary-300);
+  --input-border-color-hover: var(--input-border-color);
+  --input-border-width: 1px;
+  --input-padding: var(--spacing-xl);
+  --input-placeholder-color: var(--neutral-400);
+  --input-radius: var(--radius-sm);
+  --input-shadow: none;
+  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
+  --input-text-size: var(--text-md);
+  --input-text-weight: 400;
+  --loader-color: var(--color-accent);
+  --prose-text-size: var(--text-md);
+  --prose-text-weight: 400;
+  --prose-header-text-weight: 600;
+  --slider-color: var(--color-accent);
+  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-200));
+  --table-border-color: var(--neutral-300);
+  --table-even-background-fill: white;
+  --table-odd-background-fill: var(--neutral-50);
+  --table-radius: var(--radius-sm);
+  --table-row-focus: var(--color-accent-soft);
+  --button-border-width: 0px;
+  --button-cancel-background-fill: #ef4444;
+  --button-cancel-background-fill-hover: #dc2626;
+  --button-cancel-border-color: var(--button-secondary-border-color);
+  --button-cancel-border-color-hover: var(--button-secondary-border-color-hover);
+  --button-cancel-text-color: white;
+  --button-cancel-text-color-hover: white;
+  --button-transform-hover: none;
+  --button-transform-active: none;
+  --button-transition: all 0.2s ease;
+  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+  --button-large-radius: var(--radius-md);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 600;
+  --button-primary-background-fill: var(--primary-500);
+  --button-primary-background-fill-hover: var(--primary-600);
+  --button-primary-border-color: var(--primary-500);
+  --button-primary-border-color-hover: var(--primary-500);
+  --button-primary-text-color: white;
+  --button-primary-text-color-hover: var(--button-primary-text-color);
+  --button-primary-shadow: none;
+  --button-primary-shadow-hover: var(--button-primary-shadow);
+  --button-primary-shadow-active: var(--button-primary-shadow);
+  --button-secondary-background-fill: var(--neutral-200);
+  --button-secondary-background-fill-hover: var(--neutral-300);
+  --button-secondary-border-color: var(--neutral-200);
+  --button-secondary-border-color-hover: var(--neutral-200);
+  --button-secondary-text-color: black;
+  --button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --button-secondary-shadow: var(--button-primary-shadow);
+  --button-secondary-shadow-hover: var(--button-secondary-shadow);
+  --button-secondary-shadow-active: var(--button-secondary-shadow);
+  --button-small-padding: var(--spacing-sm) calc(1.5 * var(--spacing-sm));
+  --button-small-radius: var(--radius-md);
+  --button-small-text-size: var(--text-sm);
+  --button-small-text-weight: 400;
+  --button-medium-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --button-medium-radius: var(--radius-md);
+  --button-medium-text-size: var(--text-md);
+  --button-medium-text-weight: 600;
+}
+
+:root .dark {
+  --body-background-fill: var(--background-fill-primary);
+  --body-text-color: var(--neutral-100);
+  --color-accent-soft: var(--neutral-700);
+  --background-fill-primary: var(--neutral-950);
+  --background-fill-secondary: var(--neutral-900);
+  --border-color-accent: var(--neutral-600);
+  --border-color-primary: var(--neutral-700);
+  --link-text-color-active: var(--secondary-500);
+  --link-text-color: var(--secondary-500);
+  --link-text-color-hover: var(--secondary-400);
+  --link-text-color-visited: var(--secondary-600);
+  --body-text-color-subdued: var(--neutral-400);
+  --accordion-text-color: var(--body-text-color);
+  --table-text-color: var(--body-text-color);
+  --shadow-spread: 1px;
+  --block-background-fill: var(--neutral-800);
+  --block-border-color: var(--border-color-primary);
+  --block_border_width: None;
+  --block-info-text-color: var(--body-text-color-subdued);
+  --block-label-background-fill: var(--background-fill-secondary);
+  --block-label-border-color: var(--border-color-primary);
+  --block_label_border_width: None;
+  --block-label-text-color: var(--neutral-200);
+  --block_shadow: None;
+  --block_title_background_fill: None;
+  --block_title_border_color: None;
+  --block_title_border_width: None;
+  --block-title-text-color: var(--neutral-200);
+  --panel-background-fill: var(--background-fill-secondary);
+  --panel-border-color: var(--border-color-primary);
+  --panel_border_width: None;
+  --border-color-accent-subdued: var(--border-color-accent);
+  --code-background-fill: var(--neutral-800);
+  --checkbox-background-color: var(--neutral-800);
+  --checkbox-background-color-focus: var(--checkbox-background-color);
+  --checkbox-background-color-hover: var(--checkbox-background-color);
+  --checkbox-background-color-selected: var(--color-accent);
+  --checkbox-border-color: var(--neutral-700);
+  --checkbox-border-color-focus: var(--color-accent);
+  --checkbox-border-color-hover: var(--neutral-600);
+  --checkbox-border-color-selected: var(--color-accent);
+  --checkbox-border-width: var(--input-border-width);
+  --checkbox-label-background-fill: var(--neutral-800);
+  --checkbox-label-background-fill-hover: var(--checkbox-label-background-fill);
+  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
+  --checkbox-label-border-color: var(--border-color-primary);
+  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+  --checkbox-label-border-color-selected: var(--checkbox-label-border-color);
+  --checkbox-label-border-width: var(--input-border-width);
+  --checkbox-label-text-color: var(--body-text-color);
+  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
+  --error-background-fill: var(--neutral-900);
+  --error-border-color: #ef4444;
+  --error_border_width: None;
+  --error-text-color: #fef2f2;
+  --error-icon-color: #ef4444;
+  --input-background-fill: var(--neutral-800);
+  --input_background_fill_focus: None;
+  --input-background-fill-hover: var(--input-background-fill);
+  --input-border-color: var(--border-color-primary);
+  --input-border-color-focus: var(--neutral-700);
+  --input-border-color-hover: var(--input-border-color);
+  --input_border_width: None;
+  --input-placeholder-color: var(--neutral-500);
+  --input_shadow: None;
+  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), var(--shadow-inset);
+  --loader_color: None;
+  --slider_color: None;
+  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
+  --table-border-color: var(--neutral-700);
+  --table-even-background-fill: var(--neutral-950);
+  --table-odd-background-fill: var(--neutral-900);
+  --table-row-focus: var(--color-accent-soft);
+  --button_border_width: None;
+  --button-cancel-background-fill: #b91c1c;
+  --button-cancel-background-fill-hover: #991b1b;
+  --button-cancel-border-color: var(--button-secondary-border-color);
+  --button-cancel-border-color-hover: var(--button-secondary-border-color-hover);
+  --button-cancel-text-color: white;
+  --button-cancel-text-color-hover: white;
+  --button-primary-background-fill: var(--primary-600);
+  --button-primary-background-fill-hover: var(--primary-700);
+  --button-primary-border-color: var(--primary-600);
+  --button-primary-border-color-hover: var(--primary-500);
+  --button-primary-text-color: white;
+  --button-primary-text-color-hover: var(--button-primary-text-color);
+  --button_primary_shadow: None;
+  --button-primary-shadow-hover: var(--button-primary-shadow);
+  --button-primary-shadow-active: var(--button-primary-shadow);
+  --button-secondary-background-fill: var(--neutral-600);
+  --button-secondary-background-fill-hover: var(--neutral-700);
+  --button-secondary-border-color: var(--neutral-600);
+  --button-secondary-border-color-hover: var(--neutral-500);
+  --button-secondary-text-color: white;
+  --button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --button_secondary_shadow: None;
+  --button-secondary-shadow-hover: var(--button-secondary-shadow);
+  --button-secondary-shadow-active: var(--button-secondary-shadow);
+  --name: default;
+  --primary-50: #fff7ed;
+  --primary-100: #ffedd5;
+  --primary-200: #ffddb3;
+  --primary-300: #fdba74;
+  --primary-400: #fb923c;
+  --primary-500: #f97316;
+  --primary-600: #ea580c;
+  --primary-700: #c2410c;
+  --primary-800: #9a3412;
+  --primary-900: #7c2d12;
+  --primary-950: #6c2e12;
+  --secondary-50: #eff6ff;
+  --secondary-100: #dbeafe;
+  --secondary-200: #bfdbfe;
+  --secondary-300: #93c5fd;
+  --secondary-400: #60a5fa;
+  --secondary-500: #3b82f6;
+  --secondary-600: #2563eb;
+  --secondary-700: #1d4ed8;
+  --secondary-800: #1e40af;
+  --secondary-900: #1e3a8a;
+  --secondary-950: #1d3660;
+  --neutral-50: #fafafa;
+  --neutral-100: #f4f4f5;
+  --neutral-200: #e4e4e7;
+  --neutral-300: #d4d4d8;
+  --neutral-400: #bbbbc2;
+  --neutral-500: #71717a;
+  --neutral-600: #52525b;
+  --neutral-700: #3f3f46;
+  --neutral-800: #27272a;
+  --neutral-900: #18181b;
+  --neutral-950: #0f0f11;
+  --spacing-xxs: 1px;
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+  --spacing-xxl: 16px;
+  --radius-xxs: 1px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 22px;
+  --text-xxs: 9px;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 22px;
+  --text-xxl: 26px;
+  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+  --body-text-size: var(--text-md);
+  --body-text-weight: 400;
+  --embed-radius: var(--radius-sm);
+  --color-accent: var(--primary-500);
+  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
+  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
+  --block-border-width: 1px;
+  --block-info-text-size: var(--text-sm);
+  --block-info-text-weight: 400;
+  --block-label-border-width: 1px;
+  --block-label-shadow: var(--block-shadow);
+  --block-label-margin: 0;
+  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+  --block-label-radius: calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px) 0;
+  --block-label-right-radius: 0 calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px);
+  --block-label-text-size: var(--text-sm);
+  --block-label-text-weight: 400;
+  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+  --block-radius: var(--radius-sm);
+  --block-shadow: none;
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 400;
+  --container-radius: var(--radius-sm);
+  --form-gap-width: 0px;
+  --layout-gap: var(--spacing-xxl);
+  --panel-border-width: 0;
+  --section-header-text-size: var(--text-md);
+  --section-header-text-weight: 400;
+  --chatbot-text-size: var(--text-lg);
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-label-gap: var(--spacing-lg);
+  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --checkbox-label-shadow: none;
+  --checkbox-label-text-size: var(--text-md);
+  --checkbox-label-text-weight: 400;
+  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  --checkbox-shadow: var(--input-shadow);
+  --error-border-width: 1px;
+  --input-background-fill-focus: var(--input-background-fill);
+  --input-border-width: 1px;
+  --input-padding: var(--spacing-xl);
+  --input-radius: var(--radius-sm);
+  --input-shadow: none;
+  --input-text-size: var(--text-md);
+  --input-text-weight: 400;
+  --loader-color: var(--color-accent);
+  --prose-text-size: var(--text-md);
+  --prose-text-weight: 400;
+  --prose-header-text-weight: 600;
+  --slider-color: var(--color-accent);
+  --table-radius: var(--radius-sm);
+  --button-border-width: 0px;
+  --button-transform-hover: none;
+  --button-transform-active: none;
+  --button-transition: all 0.2s ease;
+  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+  --button-large-radius: var(--radius-md);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 600;
+  --button-primary-shadow: none;
+  --button-secondary-shadow: var(--button-primary-shadow);
+  --button-small-padding: var(--spacing-sm) calc(1.5 * var(--spacing-sm));
+  --button-small-radius: var(--radius-md);
+  --button-small-text-size: var(--text-sm);
+  --button-small-text-weight: 400;
+  --button-medium-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --button-medium-radius: var(--radius-md);
+  --button-medium-text-size: var(--text-md);
+  --button-medium-text-weight: 600;
+}

Gradio_UI.py

@@ -0,0 +1,97 @@
+# gradio_UI.py
+
+import os
+import re
+import mimetypes
+import shutil
+from typing import Optional
+
+import gradio as gr
+
+from smolagents.agent_types import AgentText, AgentImage, AgentAudio, handle_agent_output_types
+from smolagents.agents import ActionStep, MultiStepAgent
+from smolagents.memory import MemoryStep
+from smolagents.utils import _is_package_available
+
+def pull_messages_from_step(step_log: MemoryStep):
+    if isinstance(step_log, ActionStep):
+        step_number = f"Step {step_log.step_number}" if step_log.step_number is not None else ""
+        yield gr.ChatMessage(role="assistant", content=f"**{step_number}**")
+
+        if hasattr(step_log, "model_output") and step_log.model_output is not None:
+            model_output = re.sub(r"```.?\s*<end_code>", "```", step_log.model_output.strip())
+            yield gr.ChatMessage(role="assistant", content=model_output)
+
+        if hasattr(step_log, "tool_calls") and step_log.tool_calls:
+            tool_call = step_log.tool_calls[0]
+            content = str(tool_call.arguments.get("answer", tool_call.arguments)) if isinstance(tool_call.arguments, dict) else str(tool_call.arguments)
+            if tool_call.name == "python_interpreter":
+                content = f"```python\n{re.sub(r'<end_code>', '', content).strip()}\n```"
+            tool_msg = gr.ChatMessage(
+                role="assistant",
+                content=content,
+                metadata={"title": f"🛠️ Used tool {tool_call.name}", "id": "tool_call", "status": "pending"},
+            )
+            yield tool_msg
+            if step_log.observations:
+                yield gr.ChatMessage(role="assistant", content=step_log.observations.strip(), metadata={"title": "📝 Execution Logs", "parent_id": "tool_call", "status": "done"})
+            if step_log.error:
+                yield gr.ChatMessage(role="assistant", content=str(step_log.error), metadata={"title": "💥 Error", "parent_id": "tool_call", "status": "done"})
+            tool_msg.metadata["status"] = "done"
+
+        elif step_log.error:
+            yield gr.ChatMessage(role="assistant", content=str(step_log.error), metadata={"title": "💥 Error"})
+
+        meta = f"<span style='color:#bbb;font-size:12px;'>Input tokens: {getattr(step_log, 'input_token_count', 0)} | Output tokens: {getattr(step_log, 'output_token_count', 0)} | Duration: {round(getattr(step_log, 'duration', 0), 2)}</span>"
+        yield gr.ChatMessage(role="assistant", content=meta)
+        yield gr.ChatMessage(role="assistant", content="-----")
+
+def stream_to_gradio(agent, task: str, reset_agent_memory: bool = False, additional_args: Optional[dict] = None):
+    total_input_tokens = 0
+    total_output_tokens = 0
+    for step_log in agent.run(task, stream=True, reset=reset_agent_memory, additional_args=additional_args):
+        if hasattr(agent.model, "last_input_token_count"):
+            total_input_tokens += agent.model.last_input_token_count
+            total_output_tokens += agent.model.last_output_token_count
+            if isinstance(step_log, ActionStep):
+                step_log.input_token_count = agent.model.last_input_token_count
+                step_log.output_token_count = agent.model.last_output_token_count
+        for message in pull_messages_from_step(step_log):
+            yield message
+    final_answer = handle_agent_output_types(step_log)
+    if isinstance(final_answer, AgentText):
+        yield gr.ChatMessage(role="assistant", content=f"**Final answer:**\n{final_answer.to_string()}")
+    elif isinstance(final_answer, AgentImage):
+        yield gr.ChatMessage(role="assistant", content={"path": final_answer.to_string(), "mime_type": "image/png"})
+    elif isinstance(final_answer, AgentAudio):
+        yield gr.ChatMessage(role="assistant", content={"path": final_answer.to_string(), "mime_type": "audio/wav"})
+    else:
+        yield gr.ChatMessage(role="assistant", content=f"**Final answer:** {str(final_answer)}")
+
+class GradioUI:
+    def __init__(self, agent: MultiStepAgent):
+        if not _is_package_available("gradio"):
+            raise ModuleNotFoundError("Please install 'gradio' with: pip install 'smolagents[gradio]'")
+        self.agent = agent
+
+    def interact_with_agent(self, prompt, messages):
+        messages.append(gr.ChatMessage(role="user", content=prompt))
+        yield messages
+        for msg in stream_to_gradio(self.agent, task=prompt):
+            messages.append(msg)
+            yield messages
+        yield messages
+
+    def launch(self):
+        with gr.Blocks(fill_height=True) as demo:
+            stored_messages = gr.State([])
+            chatbot = gr.Chatbot(label="🌍 Mood-Based Travel Agent", type="messages")
+            user_input = gr.Textbox(lines=1, label="Describe your mood")
+            user_input.submit(
+                lambda text, hist: (hist + [gr.ChatMessage(role="user", content=text)], ""),
+                [user_input, stored_messages],
+                [stored_messages, user_input],
+            ).then(self.interact_with_agent, [user_input, stored_messages], [chatbot])
+        demo.launch(debug=True, share=True)
+
+__all__ = ["GradioUI", "stream_to_gradio"]

prompts.yaml

@@ -1,59 +1,111 @@
-mood_to_need:
-  system: |
-    You are an expert in emotional intelligence and travel psychology. Your job is to analyze moods and translate them into underlying emotional needs that travel can fulfill. Think carefully about how moods map to internal motivations, and return a short and meaningful emotional driver.
-  prompt: |
-    The user's current mood is: {mood}.
-    What emotional need does this mood reflect? Think deeply and answer with a short phrase like: "to reconnect", "to escape", "to explore".
-
-need_to_destination:
-  system: |
-    You are a thoughtful travel agent who reflects on your suggestions before finalizing them.
-    First generate a destination, then **evaluate if it matches the emotional need** and revise if needed.
-
-  prompt: |
-    The user has the emotional need: {need}.
-    First, suggest a city/country and local activity.
-    Then, reflect: does this destination really align with the need?
-    If not, suggest a better one.
-
-    Format your final answer in valid JSON:
-    {"city": "...", "country": "...", "activity": "..."}
-
-get_weather:
-  system: |
-    You are a weather evaluation tool for decision-making agents. Your role is not only to inform, but to allow the agent to decide whether to keep or change the selected destination.
-  prompt: |
-    Retrieve the current weather forecast for {city}, {country}. Return it concisely like: "Sunny with light winds, 24°C." This may help determine if another destination should be considered.
-
-get_flights:
-  system: |
-    You are a travel assistant connected to Skyscanner. Return a list of flights from the given origin to the destination. This information supports final decision-making.
-  prompt: |
-    Find flights from {origin} to {destination.city}, {destination.country}. Return 2–3 options including departure time and airline. Exclude prices.
-
-final_wrap:
-  system: |
-    You are a poetic and empathetic travel writer. Your job is to compose a final message based on mood, emotional need, destination, activity, weather, and flight options — **only if the destination is acceptable**.
-  prompt: |
-    Create a warm, vivid, and uplifting message for a user feeling: {mood}.
-    Their emotional need is: {need}.
-    The destination is {destination.city}, {destination.country}.
-    The activity is: {destination.activity}.
-    The weather is: {weather}.
-    Flights available: {flights}.
-
-    Your message should encourage this journey and explain why it's the perfect match. Use 3–5 poetic and emotionally charged sentences. Focus on experience, not prices.
-
-quote_from_mood:
-  system: |
-    You are a reflective agent. Based on the user's mood, you will choose an uplifting or thoughtful quote to reinforce emotional alignment.
-  prompt: |
-    The user is currently feeling: {mood}.
-    Provide a matching quote (include author). Format: "Quote" — Author
+system_prompt: |-
+  You are a world-class travel assistant agent named WanderMind, built to help users find the perfect destination based on their mood.
+  You operate in an autonomous, multi-step thinking loop using Thought → Code → Observation.
+
+  Your job is to:
+  - Reflect on the user’s mood
+  - Infer their emotional need
+  - Suggest a travel destination with a matching activity
+  - Check the weather
+  - Decide whether the weather suits the emotional need
+  - If not, suggest another destination
+  - Once happy, find flights from the origin
+  - Wrap everything into an inspirational message
+  - Optionally, add a quote based on the mood
+
+  You must solve the full task by reasoning, calling tools or managed agents if needed, and writing Python code in the Code block.
+
+  Each step should follow this format:
+
+  Thought: explain what you will do and why.
+  Code:
+  ⁠ py
+  # your code here
+   ⁠<end_code>
+  Observation: result of previous code
+
+  You must output a final result using ⁠ final_answer() ⁠.
+
+  Your available tools are:
+  - mood_to_need(mood: str) → str: Extracts the emotional need behind a mood (e.g., "to reconnect").
+  - need_to_destination(need: str) → dict: Suggests a destination and activity for that need. Returns JSON with keys 'city', 'country', 'activity'.
+  - weather_forecast(location: str) → str: Gets current weather forecast.
+  - get_flights(origin: str, destination: str) → str: Lists flights between two cities.
+  - quote_from_mood(mood: str) → str: Provides a motivational quote based on mood.
+  - final_wrap(mood, need, destination, activity, weather, flights) → str: Composes final inspirational message.
+  - final_answer(output: Any): Ends the task and returns the final result.
+
+  DO NOT use a tool unless needed. Plan your steps clearly. You can retry with different inputs if the weather is bad.
+
+  Now begin!
+  
+planning:
+  initial_facts: |-
+    ### 1. Facts given in the task
+    - The user provides their mood.
+    
+    ### 2. Facts to look up
+    - Emotional need based on mood.
+    - Destination and activity based on need.
+    - Current weather at destination.
+    - Flights from user origin to destination.
+    - Quote for mood.
+
+    ### 3. Facts to derive
+    - Whether the weather fits the emotional need.
+    - If not, re-iterate destination choice.
+    - Final wrap-up message to user.
+
+  initial_plan: |-
+    1. Extract emotional need from user mood using mood_to_need().
+    2. Suggest destination and activity using need_to_destination().
+    3. Get weather at destination with weather_forecast().
+    4. Assess if weather suits the need. If not, return to step 2.
+    5. Get flights using get_flights().
+    6. Generate quote using quote_from_mood().
+    7. Compose final message using final_wrap().
+    8. Call final_answer() with all outputs.
+    <end_plan>
+
+
+  update_facts_pre_messages: |-
+    ### 1. Facts given in the task
+    ### 2. Facts that we have learned
+    ### 3. Facts still to look up
+    ### 4. Facts still to derive
+
+  update_facts_post_messages: |-
+    Please update your facts:
+    ### 1. Facts given in the task
+    ### 2. Facts that we have learned
+    ### 3. Facts still to look up
+    ### 4. Facts still to derive
+
+  update_plan_pre_messages: |-
+    Below is your current task and history. Please write a new plan based on the updated facts.
+
+  update_plan_post_messages: |-
+    Write a clean new plan with the latest facts. You must respect tool usage rules.
+
+managed_agent:
+  task: |-
+    You are a helpful sub-agent named '{{name}}'.
+    Your manager gives you this task:
+    {{task}}
+
+    You MUST return:
+    ### 1. Task outcome (short version):
+    ### 2. Task outcome (extremely detailed version):
+    ### 3. Additional context (if any)
+
+    Wrap everything in a final_answer().
+
+  report: |-
+    Final answer from agent '{{name}}':
+    {{final_answer}}
 
 final_answer:
-  system: |
-    You are a coordinator that combines outputs from all other tools into a single answer.
-  prompt: |
-    Combine the poetic travel message, quote, and a concise recap (destination, activity, weather, flights).
-    Ensure clarity, friendliness, and emotional alignment. Present this as a final, complete output to the user.
+  pre_messages: |-
+    Let's summarize everything before presenting the final answer:
+  post_messages: |-
+    Here's your final result. Enjoy your journey!

tools/mock_tools.py

@@ -0,0 +1,81 @@
+from smolagents.tools import tool
+
+@tool
+def mood_to_need(mood: str) -> str:
+    """
+    Map a mood to a need.
+
+    Args:
+        mood (str): The current emotional state of the user.
+
+    Returns:
+        str: A description of what the user needs based on the mood.
+    """
+    return "You need relaxation and nature."
+
+@tool
+def need_to_destination(need: str) -> str:
+    """
+    Map a need to a destination.
+
+    Args:
+        need (str): The user's identified need (e.g., relaxation, adventure).
+
+    Returns:
+        str: A suggested destination that fulfills the need.
+    """
+    return "Bali, Indonesia"
+
+@tool
+def get_weather(dest: str) -> str:
+    """
+    Get weather forecast for a destination.
+
+    Args:
+        dest (str): The destination location.
+
+    Returns:
+        str: A weather forecast for the given destination.
+    """
+    return "Sunny and 28°C"
+
+@tool
+def get_flights(dest: str) -> str:
+    """
+    Get flight options for a destination.
+
+    Args:
+        dest (str): The destination location.
+
+    Returns:
+        str: A list of flight options for the destination.
+    """
+    return "Flight from Paris to Bali: €600 roundtrip"
+
+@tool
+def final_wrap(info: str) -> str:
+    """
+    Create a final wrap-up message.
+
+    Args:
+        info (str): Summary information about the destination and travel.
+
+    Returns:
+        str: A personalized wrap-up message.
+    """
+    return f"Bali sounds like a perfect place for relaxation with great weather and affordable flights!"
+
+@tool
+def final_answer_tool(answer: str) -> str:
+    """
+    Provides a final answer to the user.
+
+    Args:
+        answer (str): The final recommendation or conclusion.
+
+    Returns:
+        str: The same final answer.
+    """
+    return answer
+    
+