@promptbook/cli 0.114.0-5 → 0.114.0-7

package/src/book-components/Chat/MarkdownContent/MarkdownContent.module.css

@@ -445,7 +445,7 @@
     opacity: 0.8;
 }
 
-.MarkdownContent details {
+.MarkdownContent details:not(.inlineReferenceChip) {
     margin: 0.95em 0;
     border: 1px solid var(--md-table-border);
     border-radius: 16px;
@@ -455,13 +455,13 @@
     transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
-.MarkdownContent details:hover,
-.MarkdownContent details:focus-within {
+.MarkdownContent details:not(.inlineReferenceChip):hover,
+.MarkdownContent details:not(.inlineReferenceChip):focus-within {
     border-color: color-mix(in srgb, var(--md-link-color) 24%, var(--md-table-border) 76%);
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
 }
 
-.MarkdownContent details > summary {
+.MarkdownContent details:not(.inlineReferenceChip) > summary {
     display: flex;
     align-items: center;
     gap: 0.72rem;
@@ -479,7 +479,7 @@
     transition: background 0.18s ease, color 0.18s ease;
 }
 
-.MarkdownContent details > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::before {
     content: '';
     width: 0.62rem;
     height: 0.62rem;
@@ -492,8 +492,8 @@
     transition: transform 0.18s ease, opacity 0.18s ease;
 }
 
-.MarkdownContent details > summary:hover,
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:hover,
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     background: linear-gradient(
         180deg,
         color-mix(in srgb, var(--md-table-head-bg) 76%, rgba(255, 255, 255, 0.95) 24%),
@@ -501,34 +501,34 @@
     );
 }
 
-.MarkdownContent details > summary:focus-visible {
+.MarkdownContent details:not(.inlineReferenceChip) > summary:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--md-link-color) 52%, transparent);
     outline-offset: -2px;
 }
 
-.MarkdownContent details > summary::-webkit-details-marker {
+.MarkdownContent details:not(.inlineReferenceChip) > summary::-webkit-details-marker {
     display: none;
 }
 
-.MarkdownContent details[open] > summary {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary {
     border-bottom: 1px solid color-mix(in srgb, var(--md-table-border) 88%, transparent);
 }
 
-.MarkdownContent details[open] > summary::before {
+.MarkdownContent details:not(.inlineReferenceChip)[open] > summary::before {
     transform: rotate(45deg);
     opacity: 1;
 }
 
-.MarkdownContent details > :not(summary) {
+.MarkdownContent details:not(.inlineReferenceChip) > :not(summary) {
     margin-left: 1.05em;
     margin-right: 1.05em;
 }
 
-.MarkdownContent details > summary + * {
+.MarkdownContent details:not(.inlineReferenceChip) > summary + * {
     margin-top: 0.95em;
 }
 
-.MarkdownContent details > :last-child {
+.MarkdownContent details:not(.inlineReferenceChip) > :last-child {
     margin-bottom: 1.05em;
 }
 

package/src/book-components/Chat/save/react/exports/chat-preview-2025-10-13 (1).jsx

@@ -1,3 +1,4 @@
+import { spaceTrim } from 'spacetrim';
 import { Chat } from '@promptbook/components';
 
 export function ChatPreviewChatComponent() {
@@ -43,7 +44,47 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        "**Absolutely!** Here’s a quick overview:\n\n- **Bold**\n- _Italic_\n- __Underline__\n- ~~Strikethrough~~\n- `Inline code`\n- Code block:\n\n```js\nconsole.log('Hello, world!');\n```\n> Blockquote\n> With\n> Multiple lines\n\n\n- Some text with [Link](https://example.com)\n- ![image](https://img.youtube.com/vi/nD1v9dMvnLY/maxresdefault.jpg)\n- Lists:\n  - Item 1\n    - Nested item\n- Numbered list:\n  1. First\n     1. Nested\n- Table:\n\n| Syntax | Description |\n|--------|-------------|\n| Header | Title       |\n| Cell   | Data        |\n\n- Emoji: 😄 🎉\n- Mention: @user\n- Hashtag: #demo\n- Math: $E=mc^2$\n- Horizontal rule:\n\n---",
+                        spaceTrim(`
+                            **Absolutely!** Here’s a quick overview:
+
+                            - **Bold**
+                            - _Italic_
+                            - __Underline__
+                            - ~~Strikethrough~~
+                            - \`Inline code\`
+                            - Code block:
+
+                            \`\`\`js
+                            console.log('Hello, world!');
+                            \`\`\`
+                            > Blockquote
+                            > With
+                            > Multiple lines
+
+
+                            - Some text with [Link](https://example.com)
+                            - ![image](https://img.youtube.com/vi/nD1v9dMvnLY/maxresdefault.jpg)
+                            - Lists:
+                              - Item 1
+                                - Nested item
+                            - Numbered list:
+                              1. First
+                                 1. Nested
+                            - Table:
+
+                            | Syntax | Description |
+                            |--------|-------------|
+                            | Header | Title       |
+                            | Cell   | Data        |
+
+                            - Emoji: 😄 🎉
+                            - Mention: @user
+                            - Hashtag: #demo
+                            - Math: $E=mc^2$
+                            - Horizontal rule:
+
+                            ---
+                        `),
                     isComplete: true,
                 },
                 {
@@ -51,7 +92,22 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'USER',
                     content:
-                        "Wow, that's a lot! Can you combine some of them?\n\n**Bold _italic_ and `inline code`**\n\nOr maybe:\n> _Blockquote with a [link](https://example.com)_\n\nAnd a table:\n\n| Name | Value |\n|------|-------|\n| Pi   | $\\pi$ |\n\n---",
+                        spaceTrim(`
+                            Wow, that's a lot! Can you combine some of them?
+
+                            **Bold _italic_ and \`inline code\`**
+
+                            Or maybe:
+                            > _Blockquote with a [link](https://example.com)_
+
+                            And a table:
+
+                            | Name | Value |
+                            |------|-------|
+                            | Pi   | $\\pi$ |
+
+                            ---
+                        `),
                     isComplete: true,
                 },
                 {
@@ -59,7 +115,19 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        'Of course! Here’s a creative mix:\n\n- ~~Strikethrough~~ and __underline__\n- 1. Numbered with *italic* and emoji 🚀\n- - Nested `inline code`\n\n> Blockquote with math: $a^2 + b^2 = c^2$\n\n---\n\nLet me know if you want to see more! #rich #features',
+                        spaceTrim(`
+                            Of course! Here’s a creative mix:
+
+                            - ~~Strikethrough~~ and __underline__
+                            - 1. Numbered with *italic* and emoji 🚀
+                            - - Nested \`inline code\`
+
+                            > Blockquote with math: $a^2 + b^2 = c^2$
+
+                            ---
+
+                            Let me know if you want to see more! #rich #features
+                        `),
                     isComplete: true,
                 },
                 {
@@ -67,7 +135,15 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        'And here are some more emojis:\n\n😄🎉🚀💡📊📝🔥🌟✅❌\n❤🧡💙💚💛🧡❤️🤎🖤💜\n🐱‍👤🐱‍💻🐱🚀🐱‍🏍💫🎞🎫🎠🎏\n😀😀😁😂🤣😃😄😆😅🤩\n➿🛂🛃🛄🛅♿📶🚻🚹🚾',
+                        spaceTrim(`
+                            And here are some more emojis:
+
+                            😄🎉🚀💡📊📝🔥🌟✅❌
+                            ❤🧡💙💚💛🧡❤️🤎🖤💜
+                            🐱‍👤🐱‍💻🐱🚀🐱‍🏍💫🎞🎫🎠🎏
+                            😀😀😁😂🤣😃😄😆😅🤩
+                            ➿🛂🛃🛄🛅♿📶🚻🚹🚾
+                        `),
                     isComplete: true,
                 },
                 {
@@ -75,7 +151,21 @@ export function ChatPreviewChatComponent() {
                     createdAt: '2025-10-12T23:13:15.925Z',
                     sender: 'ASSISTANT_1',
                     content:
-                        '## And lists:\n\n- Item 1\n- Item 2\n    - Nested Item 2a\n    - Nested Item 2b\n- Item 3\n\n1. First item\n2. Second item\n   1. Nested second item a\n   2. Nested second item b\n3. Third item',
+                        spaceTrim(`
+                            ## And lists:
+
+                            - Item 1
+                            - Item 2
+                                - Nested Item 2a
+                                - Nested Item 2b
+                            - Item 3
+
+                            1. First item
+                            2. Second item
+                               1. Nested second item a
+                               2. Nested second item b
+                            3. Third item
+                        `),
                     isComplete: true,
                 },
             ]}