@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/lib/components/ModelConfigPanel.js

@@ -0,0 +1,317 @@
+import React__default,{useState,useRef,useEffect,useCallback}from'react';const providerIcons = {
+  openai: '🤖',
+  anthropic: '🧠',
+  gemini: '✨'
+};
+const templateOptions = [{
+  value: 'vite-react',
+  label: 'Vite React',
+  icon: '⚡',
+  description: 'Vite + React 18 with Visual Editor'
+}, {
+  value: 'nextjs',
+  label: 'Next.js',
+  icon: '⚛️',
+  description: 'React + Next.js 15 with Shadcn UI'
+}, {
+  value: 'vue',
+  label: 'Vue.js',
+  icon: '🟢',
+  description: 'Vue 3 + Nuxt 3 with Tailwind CSS'
+}];
+const modelOptions = {
+  openai: [{
+    value: 'gpt-4o',
+    label: 'GPT-4o',
+    description: 'Latest multimodal model'
+  }, {
+    value: 'gpt-4o-mini',
+    label: 'GPT-4o mini',
+    description: 'Fast and efficient'
+  }, {
+    value: 'gpt-4-turbo',
+    label: 'GPT-4 Turbo',
+    description: 'Enhanced GPT-4'
+  }, {
+    value: 'gpt-4',
+    label: 'GPT-4',
+    description: 'Most capable model'
+  }, {
+    value: 'o1',
+    label: 'o1',
+    description: 'Reasoning model'
+  }, {
+    value: 'o1-mini',
+    label: 'o1-mini',
+    description: 'Faster reasoning'
+  }],
+  anthropic: [{
+    value: 'claude-3-5-sonnet-20241022',
+    label: 'Claude 3.5 Sonnet',
+    description: 'Most intelligent model'
+  }, {
+    value: 'claude-3-5-haiku-20241022',
+    label: 'Claude 3.5 Haiku',
+    description: 'Fast and accurate'
+  }, {
+    value: 'claude-3-opus-20240229',
+    label: 'Claude 3 Opus',
+    description: 'Powerful reasoning'
+  }, {
+    value: 'claude-3-sonnet-20240229',
+    label: 'Claude 3 Sonnet',
+    description: 'Balanced performance'
+  }, {
+    value: 'claude-3-haiku-20240307',
+    label: 'Claude 3 Haiku',
+    description: 'Quick responses'
+  }],
+  gemini: [{
+    value: 'gemini-2.5-flash-preview-05-20',
+    label: 'Gemini 2.5 Flash Preview 05-20',
+    description: 'Latest preview model'
+  }, {
+    value: 'gemini-2.5-pro-preview-05-06',
+    label: 'Gemini 2.5 Pro Preview 05-06',
+    description: 'Advanced reasoning'
+  }, {
+    value: 'gemini-2.0-flash',
+    label: 'Gemini 2.0 Flash',
+    description: 'Fast generation'
+  }, {
+    value: 'gemini-2.0-flash-lite',
+    label: 'Gemini 2.0 Flash Lite',
+    description: 'Lightweight version'
+  }, {
+    value: 'gemini-1.5-pro',
+    label: 'Gemini 1.5 Pro',
+    description: 'Most capable'
+  }, {
+    value: 'gemini-1.5-flash',
+    label: 'Gemini 1.5 Flash',
+    description: 'Fast and efficient'
+  }]
+};
+const providerDetails = {
+  openai: {
+    name: 'OpenAI'
+  },
+  anthropic: {
+    name: 'Anthropic'
+  },
+  gemini: {
+    name: 'Google Vertex AI'
+  }
+};
+// Helper function to get all models from all providers
+const getAllModels = () => {
+  const allModels = [];
+  Object.values(modelOptions).forEach(providerModels => {
+    providerModels.forEach(model => {
+      allModels.push({
+        value: model.value,
+        label: model.label
+      });
+    });
+  });
+  return allModels;
+};
+const ModelConfigPanel = ({
+  config,
+  onConfigChange,
+  isVisible,
+  onToggleVisibility,
+  showTemplate = true
+}) => {
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [showModelDropdown, setShowModelDropdown] = useState(false);
+  const [showApiKeyDropdown, setShowApiKeyDropdown] = useState(false);
+  const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+  const modelDropdownRef = useRef(null);
+  const apiKeyDropdownRef = useRef(null);
+  const templateDropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target)) {
+        setShowModelDropdown(false);
+      }
+      if (apiKeyDropdownRef.current && !apiKeyDropdownRef.current.contains(event.target)) {
+        setShowApiKeyDropdown(false);
+      }
+      if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.target)) {
+        setShowTemplateDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  const handleProviderChange = useCallback(provider => {
+    const defaultModel = modelOptions[provider][0].value;
+    onConfigChange({
+      ...config,
+      provider,
+      model: defaultModel
+    });
+  }, [config, onConfigChange]);
+  const handleModelChange = useCallback(model => {
+    onConfigChange({
+      ...config,
+      model
+    });
+  }, [config, onConfigChange]);
+  const handleApiKeyChange = useCallback(e => {
+    onConfigChange({
+      ...config,
+      apiKey: e.target.value
+    });
+  }, [config, onConfigChange]);
+  const handleTemplateChange = useCallback(template => {
+    onConfigChange({
+      ...config,
+      template
+    });
+  }, [config, onConfigChange]);
+  const getApiKeyPlaceholder = () => {
+    switch (config.provider) {
+      case 'openai':
+        return 'sk-...';
+      case 'anthropic':
+        return 'sk-ant-...';
+      case 'gemini':
+        return 'AI...';
+      default:
+        return 'Enter API key';
+    }
+  };
+  const currentModels = modelOptions[config.provider] || [];
+  const currentModel = currentModels.find(m => m.value === config.model);
+  const currentTemplate = templateOptions.find(t => t.value === config.template);
+  return React__default.createElement("div", {
+    className: "relative"
+  }, isVisible && React__default.createElement("div", {
+    className: "py-2 bg-gray-50 rounded-lg  grid grid-cols-1 md:grid-cols-3 gap-2"
+  }, showTemplate && React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: templateDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    value: `${currentTemplate?.icon || '🔧'} ${currentTemplate?.label || 'Select Template'}`,
+    onClick: () => setShowTemplateDropdown(!showTemplateDropdown),
+    className: "w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showTemplateDropdown && React__default.createElement("div", {
+    className: "absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow"
+  }, templateOptions.map(template => React__default.createElement("button", {
+    key: template.value,
+    type: "button",
+    onClick: () => {
+      handleTemplateChange(template.value);
+      setShowTemplateDropdown(false);
+    },
+    className: `w-full text-left px-3 py-2 hover:bg-gray-50 ${config.template === template.value ? 'bg-blue-50' : ''}`
+  }, React__default.createElement("span", {
+    className: "mr-2"
+  }, template.icon), React__default.createElement("span", {
+    className: "text-sm"
+  }, template.label)))))), React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: modelDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    value: `${providerIcons[config.provider]} ${currentModel?.label || 'Select Model'}`,
+    onClick: () => setShowModelDropdown(!showModelDropdown),
+    className: "w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showModelDropdown && React__default.createElement("div", {
+    className: "absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow max-h-60 overflow-y-auto"
+  }, currentModels.map(model => React__default.createElement("button", {
+    key: model.value,
+    type: "button",
+    onClick: () => {
+      handleModelChange(model.value);
+      setShowModelDropdown(false);
+    },
+    className: `w-full text-left px-3 py-2 hover:bg-gray-50 ${config.model === model.value ? 'bg-blue-50' : ''}`
+  }, React__default.createElement("span", {
+    className: "mr-2"
+  }, providerIcons[config.provider]), React__default.createElement("span", {
+    className: "text-sm"
+  }, model.label))), React__default.createElement("div", {
+    className: "p-2 border-t border-gray-100 flex gap-2"
+  }, Object.keys(providerDetails).map(p => React__default.createElement("button", {
+    key: p,
+    type: "button",
+    onClick: () => handleProviderChange(p),
+    className: `px-2 py-1 text-xs rounded ${config.provider === p ? 'bg-blue-500 text-white' : 'bg-white border'}`
+  }, providerDetails[p].name)))))), React__default.createElement("div", {
+    className: "space-y-1 md:col-span-1"
+  }, React__default.createElement("div", {
+    className: "relative",
+    ref: apiKeyDropdownRef
+  }, React__default.createElement("input", {
+    type: "text",
+    readOnly: true,
+    value: config.apiKey ? 'API Key ••••••••••••••••' : 'API Key',
+    onClick: () => setShowApiKeyDropdown(!showApiKeyDropdown),
+    className: "w-full px-2 py-1 border border-gray-300 rounded cursor-pointer"
+  }), React__default.createElement("span", {
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"
+  }, "\u25BC"), showApiKeyDropdown && React__default.createElement("div", {
+    className: "absolute right-0 z-10 mt-1 w-80 bg-white border border-gray-300 rounded shadow"
+  }, React__default.createElement("div", {
+    className: "p-3"
+  }, React__default.createElement("div", {
+    className: "mb-2"
+  }, React__default.createElement("label", {
+    className: "block text-xs text-gray-600 mb-1"
+  }, "API Key"), React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("input", {
+    type: showApiKey ? 'text' : 'password',
+    value: config.apiKey,
+    onChange: handleApiKeyChange,
+    placeholder: getApiKeyPlaceholder(),
+    className: "w-full px-2 py-1 border border-gray-300 rounded pr-8"
+  }), React__default.createElement("button", {
+    type: "button",
+    onClick: () => setShowApiKey(!showApiKey),
+    className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"
+  }, showApiKey ? 'Hide' : 'Show'))), React__default.createElement("div", null, React__default.createElement("h4", {
+    className: "text-xs font-medium text-gray-700 mb-1"
+  }, "Parameters"), React__default.createElement("div", {
+    className: "space-y-1 text-xs text-gray-600"
+  }, React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Output tokens"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Temperature"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Top P"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Top K"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Frequency penalty"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto")), React__default.createElement("div", {
+    className: "flex justify-between"
+  }, React__default.createElement("span", null, "Presence penalty"), React__default.createElement("span", {
+    className: "bg-gray-100 px-2 rounded"
+  }, "Auto"))))))))));
+};
+ModelConfigPanel.displayName = 'ModelConfigPanel';export{ModelConfigPanel,ModelConfigPanel as default,getAllModels,modelOptions,templateOptions};//# sourceMappingURL=ModelConfigPanel.js.map

package/lib/components/ModelConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelConfigPanel.js","sources":["../../src/components/ModelConfigPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/filler-components/RightSiderBar.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type RightSidebarProps = {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    selectedPost?: any;
+    messages?: any[];
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    [key: string]: any;
+};
+export declare const RightSidebarFillComponent: (props: RightSidebarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=RightSiderBar.d.ts.map

package/lib/components/filler-components/RightSiderBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSiderBar.d.ts","sourceRoot":"","sources":["../../../src/components/filler-components/RightSiderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,iBAAiB,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE;QAClB,YAAY,EAAE,OAAO,CAAC;QACtB,iBAAiB,EAAE,OAAO,CAAC;QAC3B,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,aAAa,EAAE,OAAO,CAAC;QACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;IACF,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,OAAO,iBAAiB,sBA8XjE,CAAC"}