@stisocial/ui 0.1.0 → 0.2.0

package/dist/ai/ChatThread/ChatThread.js

@@ -0,0 +1,87 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { ArrowDownIcon } from "../../icons/generated/ArrowDownIcon.js";
+import ChatThread_module_default from "./ChatThread.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+// src/ai/ChatThread/ChatThread.tsx
+/** Kaydırma kapta alttan bu kadar piksel içindeyse "alta yapışık" sayılır. */
+const NEAR_BOTTOM = 48;
+/**
+* Sohbet dizisi: ileti akışının kaydırılan kabı (`role="log"`). Kullanıcı altta olduğu sürece yeni
+* içerikle birlikte kendiliğinden alta kayar; yukarı çıkınca durur ve "Son iletiye git" düğmesi
+* belirir. Kap klavyeyle kaydırılabilir (odaklanır; ↑ ↓ PageUp PageDown Home End). Yanıt yazılırken
+* canlı bölge kapatılır: ekran okuyucu her kelimeyi okumaz.
+*/
+function ChatThread({ label, children, isStreaming = false, emptyState, className, id }) {
+	const t = useMessages();
+	const scroller = useRef(null);
+	const content = useRef(null);
+	const stick = useRef(true);
+	const [away, setAway] = useState(false);
+	const isEmpty = Children.count(children) === 0;
+	const toBottom = useCallback((behavior = "auto") => {
+		const el = scroller.current;
+		if (el) el.scrollTo({
+			top: el.scrollHeight,
+			behavior
+		});
+	}, []);
+	useLayoutEffect(() => {
+		toBottom();
+	}, [toBottom]);
+	useEffect(() => {
+		const inner = content.current;
+		if (!inner || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			if (stick.current) toBottom();
+		});
+		observer.observe(inner);
+		return () => observer.disconnect();
+	}, [toBottom]);
+	const onScroll = () => {
+		const el = scroller.current;
+		if (!el) return;
+		const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
+		stick.current = gap <= NEAR_BOTTOM;
+		setAway(!stick.current);
+	};
+	const jump = () => {
+		const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		stick.current = true;
+		toBottom(reduced ? "auto" : "smooth");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ChatThread_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroller,
+			className: ChatThread_module_default.scroller,
+			role: "log",
+			"aria-label": label,
+			"aria-live": isStreaming ? "off" : "polite",
+			"aria-relevant": "additions",
+			"aria-busy": isStreaming || void 0,
+			tabIndex: 0,
+			onScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: content,
+				className: ChatThread_module_default.content,
+				"data-empty": isEmpty || void 0,
+				children: isEmpty ? emptyState : children
+			})
+		}), away ? /* @__PURE__ */ jsx("div", {
+			className: ChatThread_module_default.jump,
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "secondary",
+				iconStart: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+				onPress: jump,
+				className: ChatThread_module_default.jumpButton,
+				children: t.aiThreadLatest
+			})
+		}) : null]
+	});
+}
+export { ChatThread };

package/dist/ai/ChatThread/ChatThread.module.js

@@ -0,0 +1,10 @@
+import './ChatThread.css';
+// src/ai/ChatThread/ChatThread.module.css
+var ChatThread_module_default = {
+	"root": "sti-ChatThread-root-29fb3",
+	"scroller": "sti-ChatThread-scroller-1b2dc",
+	"content": "sti-ChatThread-content-afd28",
+	"jump": "sti-ChatThread-jump-50159",
+	"jumpButton": "sti-ChatThread-jumpButton-2432b"
+};
+export { ChatThread_module_default as default };

package/dist/ai/ChatThread/ChatThreadMessage.css

@@ -0,0 +1,80 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChatThreadMessage-root-dd10a {
+    --sti-chatmsg-avatar: var(--sti-space-8);
+    box-sizing: border-box;
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: flex;
+  }
+
+  .sti-ChatThreadMessage-root-dd10a[data-sender="user"] {
+    justify-content: flex-end;
+  }
+
+  .sti-ChatThreadMessage-avatar-0ed04 {
+    inline-size: var(--sti-chatmsg-avatar);
+    block-size: var(--sti-chatmsg-avatar);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .sti-ChatThreadMessage-column-d58d3 {
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ChatThreadMessage-root-dd10a[data-sender="assistant"] .sti-ChatThreadMessage-column-d58d3 {
+    flex: auto;
+  }
+
+  .sti-ChatThreadMessage-root-dd10a[data-sender="user"] .sti-ChatThreadMessage-column-d58d3 {
+    align-items: flex-end;
+    max-inline-size: 85%;
+  }
+
+  .sti-ChatThreadMessage-content-345fe {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ChatThreadMessage-root-dd10a[data-sender="user"] .sti-ChatThreadMessage-content-345fe {
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    white-space: pre-wrap;
+    border-end-end-radius: var(--sti-radius-xs);
+  }
+
+  .sti-ChatThreadMessage-footer-06d28 {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ChatThreadMessage-root-dd10a[data-sender="user"] .sti-ChatThreadMessage-content-345fe, .sti-ChatThreadMessage-avatar-0ed04 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/ai/ChatThread/ChatThreadMessage.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+export interface ChatThreadMessageProps {
+  /** `user`: kullanıcının istemi (sona hizalı balon); `assistant`: yapay zekâ yanıtı (balonsuz, tam genişlik). */
+  sender: "user" | "assistant";
+  /** Göndericinin adı; verilmezse "Siz" ya da "Asistan". Ekran okuyucuya iletinin başında okunur. */
+  name?: string;
+  /** Yanıtın önündeki görsel (yalnız `assistant`); verilmezse kıvılcım. */
+  avatar?: ReactNode;
+  /** İletinin içeriği: metin, `StreamingText`, `ToolCallCard` vb. */
+  children: ReactNode;
+  /** İçeriğin altı: `SourceList`, `MessageActions`, `AiDisclosure`. */
+  footer?: ReactNode;
+  /** Yanıt hâlâ yazılıyor: ileti `aria-busy` olur. */
+  isStreaming?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sohbet dizisindeki tek ileti: kullanıcının istemi sağda turkuaz sakin balonla, yapay zekâ yanıtı
+ * solda balonsuz ve tam genişlikte. Her ileti bir `article`'dır; göndericinin adı iletinin başında
+ * ekran okuyucuya okunur. Kap (`role="log"`) `ChatThread`'indir.
+ */
+export declare function ChatThreadMessage({ sender, name, avatar, children, footer, isStreaming, className, id }: ChatThreadMessageProps): import("react").JSX.Element;

package/dist/ai/ChatThread/ChatThreadMessage.js

@@ -0,0 +1,41 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { SparkleGlyph } from "../_internal/glyphs.js";
+import ChatThreadMessage_module_default from "./ChatThreadMessage.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/ai/ChatThread/ChatThreadMessage.tsx
+/**
+* Sohbet dizisindeki tek ileti: kullanıcının istemi sağda turkuaz sakin balonla, yapay zekâ yanıtı
+* solda balonsuz ve tam genişlikte. Her ileti bir `article`'dır; göndericinin adı iletinin başında
+* ekran okuyucuya okunur. Kap (`role="log"`) `ChatThread`'indir.
+*/
+function ChatThreadMessage({ sender, name, avatar, children, footer, isStreaming, className, id }) {
+	const t = useMessages();
+	const who = name ?? (sender === "user" ? t.aiRoleUser : t.aiRoleAssistant);
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: [ChatThreadMessage_module_default.root, className].filter(Boolean).join(" "),
+		"data-sender": sender,
+		"aria-busy": isStreaming || void 0,
+		children: [sender === "assistant" ? /* @__PURE__ */ jsx("span", {
+			className: ChatThreadMessage_module_default.avatar,
+			"aria-hidden": "true",
+			children: avatar ?? /* @__PURE__ */ jsx(SparkleGlyph, {})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: ChatThreadMessage_module_default.column,
+			children: [
+				/* @__PURE__ */ jsxs(VisuallyHidden, { children: [who, ": "] }),
+				/* @__PURE__ */ jsx("div", {
+					className: ChatThreadMessage_module_default.content,
+					children
+				}),
+				footer ? /* @__PURE__ */ jsx("div", {
+					className: ChatThreadMessage_module_default.footer,
+					children: footer
+				}) : null
+			]
+		})]
+	});
+}
+export { ChatThreadMessage };

package/dist/ai/ChatThread/ChatThreadMessage.module.js

@@ -0,0 +1,10 @@
+import './ChatThreadMessage.css';
+// src/ai/ChatThread/ChatThreadMessage.module.css
+var ChatThreadMessage_module_default = {
+	"root": "sti-ChatThreadMessage-root-dd10a",
+	"avatar": "sti-ChatThreadMessage-avatar-0ed04",
+	"column": "sti-ChatThreadMessage-column-d58d3",
+	"content": "sti-ChatThreadMessage-content-345fe",
+	"footer": "sti-ChatThreadMessage-footer-06d28"
+};
+export { ChatThreadMessage_module_default as default };

package/dist/ai/ChatThread/index.d.ts

@@ -0,0 +1,3 @@
+import { ChatThread, ChatThreadProps } from "./ChatThread.js";
+import { ChatThreadMessage, ChatThreadMessageProps } from "./ChatThreadMessage.js";
+export { ChatThread, ChatThreadMessage, ChatThreadMessageProps, ChatThreadProps };

package/dist/ai/ConversationList/ConversationList.css

@@ -0,0 +1,175 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ConversationList-root-55198 {
+    --sti-convlist-row-h: var(--sti-control-h-md);
+    --sti-convlist-font-size: var(--sti-font-size-sm);
+    --sti-convlist-line-height: var(--sti-line-height-sm);
+    box-sizing: border-box;
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-convlist-font-size);
+    line-height: var(--sti-convlist-line-height);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-ConversationList-root-55198[data-size="sm"] {
+    --sti-convlist-row-h: var(--sti-control-h-sm);
+    --sti-convlist-font-size: var(--sti-font-size-xs);
+    --sti-convlist-line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-ConversationList-root-55198[data-size="lg"] {
+    --sti-convlist-row-h: var(--sti-control-h-lg);
+    --sti-convlist-font-size: var(--sti-font-size-md);
+    --sti-convlist-line-height: var(--sti-line-height-md);
+  }
+
+  .sti-ConversationList-top-53f61 {
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ConversationList-listWrap-79dee {
+    min-inline-size: 0;
+  }
+
+  .sti-ConversationList-list-f6bf1 {
+    gap: var(--sti-space-3);
+    outline: none;
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ConversationList-section-5ef1b {
+    gap: var(--sti-space-0-5);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ConversationList-header-0c8a7 {
+    padding: var(--sti-space-1) var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+    line-height: var(--sti-line-height-xs);
+    text-transform: uppercase;
+  }
+
+  .sti-ConversationList-row-3d853 {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-convlist-row-h);
+    min-inline-size: 0;
+    padding: var(--sti-space-1) var(--sti-space-2) var(--sti-space-1) var(--sti-space-3);
+    border-inline-start: var(--sti-border-width-strong) solid transparent;
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    display: flex;
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .sti-ConversationList-row-3d853[data-hovered]:not([data-selected]) {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-ConversationList-row-3d853[data-selected] {
+    border-inline-start-color: var(--sti-border-selected);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-ConversationList-row-3d853[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-ConversationList-texts-9f082 {
+    flex-direction: column;
+    flex: auto;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ConversationList-title-739e1 {
+    font-weight: var(--sti-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-ConversationList-subtitle-ff812 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-ConversationList-row-3d853[data-selected] .sti-ConversationList-subtitle-ff812 {
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-ConversationList-action-d6963 {
+    opacity: 0;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-snap);
+    flex: none;
+    display: inline-flex;
+  }
+
+  .sti-ConversationList-row-3d853[data-hovered] .sti-ConversationList-action-d6963, .sti-ConversationList-row-3d853[data-focus-visible] .sti-ConversationList-action-d6963, .sti-ConversationList-row-3d853:focus-within .sti-ConversationList-action-d6963 {
+    opacity: 1;
+  }
+
+  @media (pointer: coarse) {
+    .sti-ConversationList-action-d6963 {
+      opacity: 1;
+    }
+  }
+
+  .sti-ConversationList-empty-be07a {
+    padding: var(--sti-space-6) var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    text-align: center;
+    margin: 0;
+  }
+
+  .sti-ConversationList-loading-7eded {
+    padding: var(--sti-space-2) var(--sti-space-3);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ConversationList-row-3d853, .sti-ConversationList-action-d6963 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ConversationList-row-3d853[data-selected] {
+      outline: var(--sti-border-width-strong) solid Highlight;
+      outline-offset: calc(var(--sti-border-width-strong) * -1);
+      border-inline-start-color: highlight;
+    }
+
+    .sti-ConversationList-row-3d853[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/ai/ConversationList/ConversationList.d.ts

@@ -0,0 +1,33 @@
+import { Conversation } from "./groups.js";
+export interface ConversationListProps {
+  conversations: readonly Conversation[];
+  /** Kontrollü seçili sohbet. */
+  selectedId?: string | null;
+  /** Kontrolsüz başlangıç seçimi. */
+  defaultSelectedId?: string | null;
+  /** Bir sohbet seçilince (fare, Enter ya da Boşluk). */
+  onSelect?: (id: string) => void;
+  /** Verilirse her satırda "sil" düğmesi çıkar; satırdayken Delete tuşu da aynı işi yapar. Onay uygulamanındır. */
+  onDelete?: (id: string) => void;
+  /** Verilirse üstte "Yeni sohbet" düğmesi gösterilir. */
+  onNew?: () => void;
+  /** Sohbetler yükleniyor: iskelet gösterilir, liste meşgul işaretlenir. */
+  isLoading?: boolean;
+  /** Başlık süzgeci (arama alanı) gösterilsin (varsayılan). */
+  isSearchable?: boolean;
+  /** Gruplamanın "şimdi"si; verilmezse ilk çizimdeki an. Sınama ve katalog için. */
+  now?: Date | string | number;
+  /** Liste adı; verilmezse yerleşik "Sohbetler". */
+  label?: string;
+  /** Boy: `sm`, `md` (varsayılan), `lg`; satır yüksekliği. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Sohbet geçmişi: sabitlenmiş ve zamana göre gruplanmış (bugün, dün, son 7 gün…), başlığa göre
+ * aranabilen, tek seçimli liste. APG Grid/Listbox kalıbı (React Aria GridList): ↑ ↓ satırlar
+ * arasında gezer, Enter ve Boşluk seçer; satırdaki "sil" düğmesine → ile geçilir.
+ */
+export declare function ConversationList({ conversations, selectedId, defaultSelectedId, onSelect, onDelete, onNew, isLoading, isSearchable, now, label, size, className, id }: ConversationListProps): import("react").JSX.Element;
+export type { Conversation };

package/dist/ai/ConversationList/ConversationList.js

@@ -0,0 +1,133 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { matchesLoose, template } from "../../text/text.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { Button as Button$1 } from "../../components/Button/Button.js";
+import { Announcer } from "../../components/Announcer/Announcer.js";
+import { SearchField as SearchField$1 } from "../../components/SearchField/SearchField.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { TrashIcon } from "../../icons/generated/TrashIcon.js";
+import { Skeleton } from "../../components/Skeleton/Skeleton.js";
+import ConversationList_module_default from "./ConversationList.module.js";
+import { groupConversations } from "./groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { GridList, GridListHeader, GridListItem, GridListSection } from "react-aria-components";
+// src/ai/ConversationList/ConversationList.tsx
+const GROUP_KEY = {
+	pinned: "aiGroupPinned",
+	today: "aiGroupToday",
+	yesterday: "aiGroupYesterday",
+	last7: "aiGroupLast7",
+	last30: "aiGroupLast30",
+	older: "aiGroupOlder"
+};
+/**
+* Sohbet geçmişi: sabitlenmiş ve zamana göre gruplanmış (bugün, dün, son 7 gün…), başlığa göre
+* aranabilen, tek seçimli liste. APG Grid/Listbox kalıbı (React Aria GridList): ↑ ↓ satırlar
+* arasında gezer, Enter ve Boşluk seçer; satırdaki "sil" düğmesine → ile geçilir.
+*/
+function ConversationList({ conversations, selectedId, defaultSelectedId = null, onSelect, onDelete, onNew, isLoading = false, isSearchable = true, now, label, size = "md", className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const { context } = useFormatter();
+	const [inner, setInner] = useState(defaultSelectedId);
+	const [query, setQuery] = useState("");
+	const [initialNow] = useState(() => /* @__PURE__ */ new Date());
+	const current = selectedId === void 0 ? inner : selectedId;
+	const name = label ?? t.aiConversations;
+	const shown = query.trim() ? conversations.filter((c) => matchesLoose(c.title || t.aiConversationUntitled, query, locale)) : conversations;
+	const groups = groupConversations(shown, now === void 0 ? initialNow : new Date(now), context.timeZone);
+	const onKeyDown = (e) => {
+		if (!onDelete || e.key !== "Delete" && e.key !== "Backspace") return;
+		const target = e.target;
+		if (target.getAttribute("role") !== "row") return;
+		const key = target.getAttribute("data-key");
+		if (!key) return;
+		e.preventDefault();
+		onDelete(key);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ConversationList_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"aria-busy": isLoading || void 0,
+		children: [onNew || isSearchable ? /* @__PURE__ */ jsxs("div", {
+			className: ConversationList_module_default.top,
+			children: [onNew ? /* @__PURE__ */ jsx(Button$1, {
+				variant: "secondary",
+				size: size === "lg" ? "md" : "sm",
+				iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+				onPress: onNew,
+				fullWidth: true,
+				children: t.aiNewConversation
+			}) : null, isSearchable ? /* @__PURE__ */ jsx(SearchField$1, {
+				label: t.aiSearchConversations,
+				hideLabel: true,
+				placeholder: t.aiSearchConversations,
+				size: size === "lg" ? "md" : "sm",
+				value: query,
+				onChange: setQuery,
+				onClear: () => setQuery("")
+			}) : null]
+		}) : null, isLoading ? /* @__PURE__ */ jsxs("div", {
+			className: ConversationList_module_default.loading,
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				lines: 5,
+				textSize: "md"
+			}), /* @__PURE__ */ jsx(Announcer, { message: t.loading })]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: ConversationList_module_default.listWrap,
+			onKeyDown,
+			children: /* @__PURE__ */ jsx(GridList, {
+				"aria-label": name,
+				className: ConversationList_module_default.list,
+				selectionMode: "single",
+				selectedKeys: current ? [current] : [],
+				onSelectionChange: (keys) => {
+					const next = keys === "all" ? null : [...keys][0];
+					if (!next) return;
+					if (selectedId === void 0) setInner(next);
+					onSelect?.(next);
+				},
+				renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+					className: ConversationList_module_default.empty,
+					children: query.trim() ? t.aiNoConversationMatch : t.aiNoConversations
+				}),
+				children: groups.map((group) => /* @__PURE__ */ jsxs(GridListSection, {
+					className: ConversationList_module_default.section,
+					children: [/* @__PURE__ */ jsx(GridListHeader, {
+						className: ConversationList_module_default.header,
+						children: t[GROUP_KEY[group.key]]
+					}), group.items.map((c) => {
+						const title = c.title || t.aiConversationUntitled;
+						return /* @__PURE__ */ jsxs(GridListItem, {
+							id: c.id,
+							textValue: title,
+							className: ConversationList_module_default.row,
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: ConversationList_module_default.texts,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: ConversationList_module_default.title,
+									children: title
+								}), c.subtitle ? /* @__PURE__ */ jsx("span", {
+									className: ConversationList_module_default.subtitle,
+									children: c.subtitle
+								}) : null]
+							}), onDelete ? /* @__PURE__ */ jsx("span", {
+								className: ConversationList_module_default.action,
+								children: /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									label: template(t.aiConversationDelete, { title }),
+									icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+									onPress: () => onDelete(c.id)
+								})
+							}) : null]
+						}, c.id);
+					})]
+				}, group.key))
+			})
+		})]
+	});
+}
+export { ConversationList };

package/dist/ai/ConversationList/ConversationList.module.js

@@ -0,0 +1,18 @@
+import './ConversationList.css';
+// src/ai/ConversationList/ConversationList.module.css
+var ConversationList_module_default = {
+	"root": "sti-ConversationList-root-55198",
+	"top": "sti-ConversationList-top-53f61",
+	"listWrap": "sti-ConversationList-listWrap-79dee",
+	"list": "sti-ConversationList-list-f6bf1",
+	"section": "sti-ConversationList-section-5ef1b",
+	"header": "sti-ConversationList-header-0c8a7",
+	"row": "sti-ConversationList-row-3d853",
+	"texts": "sti-ConversationList-texts-9f082",
+	"title": "sti-ConversationList-title-739e1",
+	"subtitle": "sti-ConversationList-subtitle-ff812",
+	"action": "sti-ConversationList-action-d6963",
+	"empty": "sti-ConversationList-empty-be07a",
+	"loading": "sti-ConversationList-loading-7eded"
+};
+export { ConversationList_module_default as default };

package/dist/ai/ConversationList/groups.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Sohbetlerin zamana göre gruplanması (saf mantık, kancasız). Gün sınırı saat dilimine göre
+ * hesaplanır: sunucu ile tarayıcı aynı gruplamayı üretir (hydration uyuşmazlığı olmaz).
+ */
+export type ConversationGroupKey = "pinned" | "today" | "yesterday" | "last7" | "last30" | "older";
+export interface Conversation {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** Sohbetin başlığı; boşsa yerleşik "Başlıksız sohbet" yazılır. */
+  title: string;
+  /** Başlığın altında kısa önizleme. */
+  subtitle?: string;
+  /** Son etkinlik zamanı: gruplamayı ve sıralamayı belirler. */
+  updatedAt: Date | string | number;
+  /** Sabitlenmiş sohbetler en üstte, ayrı grupta durur. */
+  isPinned?: boolean;
+}
+export interface ConversationGroup {
+  key: ConversationGroupKey;
+  items: Conversation[];
+}
+/** Sohbetleri gruplara böler; her grup yeniden eskiye sıralıdır, boş gruplar atlanır. */
+export declare function groupConversations(conversations: readonly Conversation[], now: Date, timeZone: string): ConversationGroup[];