@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/agent-select.tsx

@@ -1,154 +1,154 @@
-import { useMemo, useState, useCallback } from 'react';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { type AgentShortSummary as AgentSelectAgent } from '@baishuyun/types';
-import classNames from 'classnames';
-
-export { type AgentSelectAgent };
-
-export interface AgentSelectProps {
-  agents: Array<AgentSelectAgent>;
-  showAllItems?: boolean;
-  showSearch?: boolean;
-  className?: string;
-  activeAgent?: { id: string } | null;
-  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
-}
-
-interface AgentGroup {
-  label: string;
-  agents: Array<AgentSelectAgent>;
-}
-
-export const AgentSelect = ({
-  agents,
-  showSearch = false,
-  activeAgent,
-  onSelect,
-  showAllItems,
-  className,
-}: AgentSelectProps) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const groups = useMemo<AgentGroup[]>(() => {
-    const systemAgents = agents.filter((a) => a.builtIn);
-    const customAgents = agents.filter((a) => !a.builtIn);
-    return [
-      { label: '系统智能体助手', agents: systemAgents },
-      { label: '自定义智能体助手', agents: customAgents },
-    ]
-      .map((g) => ({
-        ...g,
-        agents: g.agents.filter((a) =>
-          a?.name?.toLowerCase().includes(searchQuery.toLowerCase())
-        ),
-      }))
-      .filter((g) => g.agents.length > 0);
-  }, [agents, searchQuery]);
-
-  const handleSelect = useCallback(
-    (agent: AgentSelectAgent) => {
-      onSelect(agent);
-    },
-    [onSelect]
-  );
-
-  const overflowCls = classNames({
-    'max-h-80 overflow-y-auto scrollbar-hide': !showAllItems
-  })
-
-  return (
-    <div className={classNames('flex flex-col', 'rounded-[4px]', className)}>
-      {showSearch && (
-        <div className="px-1.5 pt-1 pb-0.5">
-          <div className="flex h-7.5 items-center gap-1.5 rounded-[4px] bg-white px-2.5 py-1.25 border border-[#E0E0E0]">
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 14 14"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="shrink-0 text-[#999999]"
-            >
-              <path
-                d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M12.25 12.25L9.7125 9.7125"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <input
-              type="text"
-              placeholder="搜索智能体助手"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="h-full flex-1 bg-transparent text-[12px] text-[#121111] placeholder:text-[#999999] outline-none"
-            />
-          </div>
-        </div>
-      )}
-
-      <div className={overflowCls}>
-        {groups.map((group, groupIndex) => (
-          <div key={group.label}>
-            <div
-              className={cn(
-                'flex h-8 items-start px-2.5 pt-2.25',
-                groupIndex > 0 && 'mt-0.5'
-              )}
-            >
-              <div className="flex w-full flex-col gap-1.5">
-                <span className="text-[12px] font-medium text-[#666666] leading-4.25">
-                  {group.label}
-                </span>
-                <div className="h-0 w-full border-b border-[#E0E0E0]" />
-              </div>
-            </div>
-
-            <div className="px-1">
-              {group.agents.map((agent) => {
-                const isActive = activeAgent?.id === agent.id;
-                return (
-                  <button
-                    key={agent.id}
-                    className={cn(
-                      'flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[4px] px-2.5 py-1.5 text-left',
-                      transCls,
-                      isActive
-                        ? 'bg-[#F0F6FF] text-[#0265FF]'
-                        : 'text-[#121111] hover:bg-[#EFF0F6]'
-                    )}
-                    onClick={() => handleSelect(agent)}
-                  >
-                    <img
-                      src={agent.icon}
-                      alt={agent.name}
-                      className="h-4 w-4 rounded-[4px] object-cover shrink-0"
-                    />
-                    <span className="truncate text-[14px] leading-5">
-                      {agent.name}
-                    </span>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-
-        {groups.length === 0 && (
-          <div className="flex h-15 items-center justify-center text-[12px] text-[#999999]">
-            未找到相关智能体助手
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+import { useMemo, useState, useCallback } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { type AgentShortSummary as AgentSelectAgent } from '@baishuyun/types';
+import classNames from 'classnames';
+
+export { type AgentSelectAgent };
+
+export interface AgentSelectProps {
+  agents: Array<AgentSelectAgent>;
+  showAllItems?: boolean;
+  showSearch?: boolean;
+  className?: string;
+  activeAgent?: { id: string } | null;
+  onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+}
+
+interface AgentGroup {
+  label: string;
+  agents: Array<AgentSelectAgent>;
+}
+
+export const AgentSelect = ({
+  agents,
+  showSearch = false,
+  activeAgent,
+  onSelect,
+  showAllItems,
+  className,
+}: AgentSelectProps) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const groups = useMemo<AgentGroup[]>(() => {
+    const systemAgents = agents.filter((a) => a.builtIn);
+    const customAgents = agents.filter((a) => !a.builtIn);
+    return [
+      { label: '系统智能体助手', agents: systemAgents },
+      { label: '自定义智能体助手', agents: customAgents },
+    ]
+      .map((g) => ({
+        ...g,
+        agents: g.agents.filter((a) =>
+          a?.name?.toLowerCase().includes(searchQuery.toLowerCase())
+        ),
+      }))
+      .filter((g) => g.agents.length > 0);
+  }, [agents, searchQuery]);
+
+  const handleSelect = useCallback(
+    (agent: AgentSelectAgent) => {
+      onSelect(agent);
+    },
+    [onSelect]
+  );
+
+  const overflowCls = classNames({
+    'max-h-80 overflow-y-auto scrollbar-hide': !showAllItems
+  })
+
+  return (
+    <div className={classNames('flex flex-col', 'rounded-[4px]', className)}>
+      {showSearch && (
+        <div className="px-1.5 pt-1 pb-0.5">
+          <div className="flex h-7.5 items-center gap-1.5 rounded-[4px] bg-white px-2.5 py-1.25 border border-[#E0E0E0]">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="shrink-0 text-[#999999]"
+            >
+              <path
+                d="M6.41667 11.0833C8.994 11.0833 11.0833 8.994 11.0833 6.41667C11.0833 3.83934 8.994 1.75 6.41667 1.75C3.83934 1.75 1.75 3.83934 1.75 6.41667C1.75 8.994 3.83934 11.0833 6.41667 11.0833Z"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M12.25 12.25L9.7125 9.7125"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="搜索智能体助手"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-full flex-1 bg-transparent text-[12px] text-[#121111] placeholder:text-[#999999] outline-none"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className={overflowCls}>
+        {groups.map((group, groupIndex) => (
+          <div key={group.label}>
+            <div
+              className={cn(
+                'flex h-8 items-start px-2.5 pt-2.25',
+                groupIndex > 0 && 'mt-0.5'
+              )}
+            >
+              <div className="flex w-full flex-col gap-1.5">
+                <span className="text-[12px] font-medium text-[#666666] leading-4.25">
+                  {group.label}
+                </span>
+                <div className="h-0 w-full border-b border-[#E0E0E0]" />
+              </div>
+            </div>
+
+            <div className="px-1">
+              {group.agents.map((agent) => {
+                const isActive = activeAgent?.id === agent.id;
+                return (
+                  <button
+                    key={agent.id}
+                    className={cn(
+                      'flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-[4px] px-2.5 py-1.5 text-left',
+                      transCls,
+                      isActive
+                        ? 'bg-[#F0F6FF] text-[#0265FF]'
+                        : 'text-[#121111] hover:bg-[#EFF0F6]'
+                    )}
+                    onClick={() => handleSelect(agent)}
+                  >
+                    <img
+                      src={agent.icon}
+                      alt={agent.name}
+                      className="h-4 w-4 rounded-[4px] object-cover shrink-0"
+                    />
+                    <span className="truncate text-[14px] leading-5">
+                      {agent.name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        {groups.length === 0 && (
+          <div className="flex h-15 items-center justify-center text-[12px] text-[#999999]">
+            未找到相关智能体助手
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/attachment-part-group.tsx

@@ -1,35 +1,35 @@
-import { cn } from '../lib/utils';
-import { AttachmentPart, FilePart } from './attachment-part';
-import { FileUIPart } from 'ai';
-
-export interface AttachmentPartGroupProps {
-  parts: FileUIPart[];
-  className?: string;
-  /** Size in pixels for each item, defaults to 102 */
-  size?: number;
-  /** Gap between items in pixels, defaults to 10 */
-  gap?: number;
-  /** Show only icons without file names */
-  iconOnly?: boolean;
-  /** Click handler for individual parts */
-  onPartClick?: (part: FilePart) => void;
-}
-
-export const AttachmentPartGroup = ({
-  parts,
-  className,
-  size = 100,
-  gap = 10,
-  iconOnly,
-  onPartClick,
-}: AttachmentPartGroupProps) => {
-  if (!parts.length) return null;
-
-  return (
-    <div className={cn('flex flex-wrap content-center items-center', className)} style={{ gap }}>
-      {parts.map((part, index) => (
-        <AttachmentPart key={part.url || index} part={part} size={size} iconOnly={iconOnly} onClick={onPartClick} />
-      ))}
-    </div>
-  );
-};
+import { cn } from '../lib/utils';
+import { AttachmentPart, FilePart } from './attachment-part';
+import { FileUIPart } from 'ai';
+
+export interface AttachmentPartGroupProps {
+  parts: FileUIPart[];
+  className?: string;
+  /** Size in pixels for each item, defaults to 102 */
+  size?: number;
+  /** Gap between items in pixels, defaults to 10 */
+  gap?: number;
+  /** Show only icons without file names */
+  iconOnly?: boolean;
+  /** Click handler for individual parts */
+  onPartClick?: (part: FilePart) => void;
+}
+
+export const AttachmentPartGroup = ({
+  parts,
+  className,
+  size = 100,
+  gap = 10,
+  iconOnly,
+  onPartClick,
+}: AttachmentPartGroupProps) => {
+  if (!parts.length) return null;
+
+  return (
+    <div className={cn('flex flex-wrap content-center items-center', className)} style={{ gap }}>
+      {parts.map((part, index) => (
+        <AttachmentPart key={part.url || index} part={part} size={size} iconOnly={iconOnly} onClick={onPartClick} />
+      ))}
+    </div>
+  );
+};