@kitn.ai/ui 0.15.0 → 0.16.0

package/src/stories/chat-panel-layout.stories.tsx

@@ -1,145 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal } from 'solid-js';
-import { Message, MessageAvatar, MessageContent, MessageActions } from '../components/message';
-import { ChatContainer } from '../components/chat-container';
-import { ChatConfig } from '../primitives/chat-config';
-import { PromptInput, PromptInputTextarea, PromptInputActions } from '../components/prompt-input';
-import { Button } from '../ui/button';
-import { ScrollButton } from '../components/scroll-button';
-import { Copy, ArrowUp } from 'lucide-solid';
-
-const meta: Meta = {
-  title: 'Patterns/Chat Panel Layout',
-  parameters: { layout: 'centered' },
-};
-
-export default meta;
-type Story = StoryObj;
-
-const assistantMsg1 = `The document is a transcript of a YouTube video by Cole Medin, where he discusses building a self-evolving memory system for coding agents using Large Language Models (LLMs), inspired by Andre Karpathy's ideas on LLM knowledge bases.`;
-
-const assistantMsg2 = `Short answer: **it has to be a separate browser window** (or tab/iframe), not just a normal component in your application.
-
-Here's why:
-
-- The OAuth flow requires redirecting to the provider's login page
-- The callback URL needs to be a real URL the browser can navigate to
-- Security policies prevent embedding auth pages in iframes`;
-
-const userMsg1 = 'What is this video about?';
-const userMsg2 = 'And from what I understand, does that need to be another browser window pop-up that happens, or can I just have a component that does that in my application?';
-
-function CopyButton(props: { text: string }) {
-  return (
-    <button aria-label="Copy message" onClick={() => navigator.clipboard.writeText(props.text)}>
-      <Copy size={14} />
-    </button>
-  );
-}
-
-/**
- * Reference layout — uses variant props, no custom class overrides.
- */
-export const ChatGPTStyle: Story = {
-  render: () => {
-    const [input, setInput] = createSignal('');
-    return (
-      <ChatConfig proseSize="base">
-        <div
-          style={{ width: '420px', height: '700px' }}
-          class="flex flex-col overflow-hidden rounded-lg bg-card"
-        >
-          {/* Header */}
-          <div class="px-3 py-2.5 bg-muted/30 text-sm font-semibold text-foreground flex-shrink-0 flex items-center justify-between">
-            <span>Chat Panel</span>
-            <span class="text-xs text-muted-foreground">GPT-4o Mini</span>
-          </div>
-
-          {/* Messages */}
-          <ChatContainer class="flex-1 min-w-0 px-4 py-3 space-y-4">
-              {/* Assistant message 1 — with avatar */}
-              <Message>
-                <MessageAvatar src="" alt="AI" fallback="AI" />
-                <div class="flex w-full flex-col min-w-0">
-                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
-                    {assistantMsg1}
-                  </MessageContent>
-                  <MessageActions>
-                    <CopyButton text={assistantMsg1} />
-                  </MessageActions>
-                </div>
-              </Message>
-
-              {/* User message 1 */}
-              <Message class="group flex-col items-end">
-                <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
-                  {userMsg1}
-                </MessageContent>
-                <MessageActions class="opacity-0 group-hover:opacity-100 transition-opacity duration-150">
-                  <CopyButton text={userMsg1} />
-                </MessageActions>
-              </Message>
-
-              {/* Assistant message 2 — with avatar, markdown */}
-              <Message>
-                <MessageAvatar src="" alt="AI" fallback="AI" />
-                <div class="flex w-full flex-col min-w-0">
-                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
-                    {assistantMsg2}
-                  </MessageContent>
-                  <MessageActions>
-                    <CopyButton text={assistantMsg2} />
-                  </MessageActions>
-                </div>
-              </Message>
-
-              {/* User message 2 — longer */}
-              <Message class="group flex-col items-end">
-                <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-4 py-2 mr-1">
-                  {userMsg2}
-                </MessageContent>
-                <MessageActions class="opacity-0 group-hover:opacity-100 transition-opacity duration-150">
-                  <CopyButton text={userMsg2} />
-                </MessageActions>
-              </Message>
-
-              {/* Assistant message 3 — with avatar, short */}
-              <Message>
-                <MessageAvatar src="" alt="AI" fallback="AI" />
-                <div class="flex w-full flex-col min-w-0">
-                  <MessageContent markdown class="bg-transparent p-0 pt-1.5">
-                    Got it — let me know if you have more questions!
-                  </MessageContent>
-                  <MessageActions>
-                    <CopyButton text="Got it — let me know if you have more questions!" />
-                  </MessageActions>
-                </div>
-              </Message>
-            <ScrollButton />
-          </ChatContainer>
-
-          {/* Input */}
-          <div class="px-3 pb-3 pt-1 flex-shrink-0">
-            <PromptInput
-              value={input()}
-              onValueChange={setInput}
-              onSubmit={() => setInput('')}
-            >
-              <PromptInputTextarea placeholder="Ask about this page..." class="min-h-[44px] pt-3 pl-4" />
-              <PromptInputActions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
-                <Button
-                  size="icon-sm"
-                  class="rounded-full"
-                  aria-label="Send message"
-                  disabled={!input().trim()}
-                >
-                  <ArrowUp class="size-4" />
-                </Button>
-              </PromptInputActions>
-            </PromptInput>
-          </div>
-        </div>
-      </ChatConfig>
-    );
-  },
-};