Upload folder using huggingface_hub

Dockerfile

@@ -7,9 +7,19 @@ RUN npm run build
 
 FROM node:20-slim
 WORKDIR /app
-COPY --from=build /app/dist ./dist
-COPY --from=build /app/package*.json ./
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --from=build --chown=user /app/dist ./dist
+COPY --from=build --chown=user /app/package*.json ./
 RUN npm install --only=production
-COPY server.cjs ./
+COPY --chown=user server.cjs ./
+
 EXPOSE 7860
 CMD ["node", "server.cjs"]

README.md

@@ -1,5 +1,5 @@
 ---
-title: UserSyncInterface
+title: Branding Content Testing
 emoji: 🔄
 colorFrom: blue
 colorTo: blue

components/ChatPage.tsx

@@ -126,12 +126,19 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
              >
                 Help Me Craft <Sparkles size={12} />
              </button>
-            <ChatButton 
-              label={isSimulating ? "Simulating..." : "Simulate"} 
-              primary 
-              onClick={() => onSimulate(message)} 
-              icon={isSimulating ? <Loader2 size={14} className="animate-spin" /> : undefined}
-            />
+            <div className="flex gap-2">
+              <ChatButton 
+                label="Send" 
+                onClick={() => onSimulate(message)} 
+                icon={<MessageSquare size={14} />}
+              />
+              <ChatButton 
+                label={isSimulating ? "Please wait..." : "Simulate"} 
+                primary 
+                onClick={() => onSimulate(message)} 
+                icon={isSimulating ? <Loader2 size={14} className="animate-spin" /> : undefined}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -270,7 +277,6 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
             <h2 className="text-xl font-medium tracking-tight">New Simulation</h2>
          </div>
          <div className="flex items-center gap-4">
-            {simulationId && <span className="text-[10px] text-gray-500 uppercase tracking-widest hidden md:block">Active Group: {simulationId}</span>}
             <button onClick={onBack} className="p-2 text-gray-500 hover:text-white hover:bg-gray-900 rounded-full transition-colors">
                 <X size={24} />
             </button>
@@ -287,12 +293,12 @@ const ChatPage: React.FC<ChatPageProps> = ({ onBack, simulationResult, setSimula
               <div className="flex-1">
                 <h4 className="font-semibold text-green-300 mb-1">Simulation Status</h4>
                 <p className="text-sm text-green-200/70 leading-relaxed">
-                  The simulation process can take up to <strong className="text-white">30 minutes</strong>. Click "Gather Results" to fetch the latest state.
+                  Please wait, the results will show here. The simulation process can take up to <strong className="text-white">30 minutes</strong>. Click "Gather Results" to fetch the latest state.
                 </p>
                 {simulationResult && (
                   <div className="mt-4 p-3 bg-black/40 rounded-xl border border-green-500/20 text-xs text-green-200 flex flex-col gap-3">
                     <div className="font-medium flex items-center gap-2">
-                        <div className={`w-1.5 h-1.5 rounded-full ${simulationResult.status === 'Error' ? 'bg-red-500' : 'bg-green-500 animate-pulse'}`}></div>
+                        <div className={`w-1.5 h-1.5 rounded-full ${simulationResult.status === 'Error' ? 'bg-red-500' : 'bg-green-500'}`}></div>
                         {simulationResult.message}
                     </div>
                     {simulationResult.data && (

components/SimulationPage.tsx

@@ -46,8 +46,8 @@ const VIEW_FILTERS: Record<string, Array<{ label: string; color: string }>> = {
 const SimulationPage: React.FC<SimulationPageProps> = ({ 
   onBack, onOpenConversation, onOpenChat, user, onLogin, simulationResult, setSimulationResult 
 }) => {
-  const [society, setSociety] = useState('User Group 1');
-  const [societies, setSocieties] = useState<string[]>(['User Group 1']);
+  const [society, setSociety] = useState('');
+  const [societies, setSocieties] = useState<string[]>([]);
   const [viewMode, setViewMode] = useState('Job Title');
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [isBuilding, setIsBuilding] = useState(false);
@@ -67,17 +67,22 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
     // Fetch real focus groups
     const fetchSocieties = async () => {
         try {
-            const list = await GradioService.listSimulations();
-            if (Array.isArray(list) && list.length > 0) {
+            const result = await GradioService.listSimulations();
+            // Handle both direct array and Gradio data wrap
+            const list = Array.isArray(result) ? result : (result?.data?.[0] || []);
+            
+            if (Array.isArray(list)) {
                 const names = list
-                    .map((s: any) => typeof s === 'string' ? s : (s.id || s.name || ''))
-                    .filter(name => typeof name === 'string' && name.length > 0);
+                    .map((s: any) => {
+                        if (typeof s === 'string') return s;
+                        if (typeof s === 'object' && s !== null) return s.id || s.name || '';
+                        return '';
+                    })
+                    .filter(name => name.length > 0);
                 
-                if (names.length > 0) {
-                    setSocieties(names);
-                    if (!names.includes(society)) {
-                        setSociety(names[0]);
-                    }
+                setSocieties(names);
+                if (names.length > 0 && (!society || !names.includes(society))) {
+                    setSociety(names[0]);
                 }
             }
         } catch (e) {
@@ -160,6 +165,14 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
            <div className="h-px bg-gray-800 my-4" />
 
            {/* Actions */}
+           <button 
+             onClick={onOpenConversation}
+             className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2 border-b border-gray-800/50 mb-1"
+           >
+              <span>Assemble new group</span>
+              <Plus size={18} className="text-gray-500 group-hover:text-white" />
+           </button>
+
            <button 
              onClick={onOpenConversation}
              className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2"
@@ -177,14 +190,14 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
               <span className="font-medium text-sm">Open Global Chat</span>
            </button>
 
-           {/* Setup Warning */}
-           <div className="bg-amber-900/30 border border-amber-700/50 rounded-xl p-4 mt-4">
-              <div className="flex items-center gap-2 text-amber-200 font-bold text-xs mb-1">
-                 <AlertTriangle size={14}/>
-                 <span>Action Required</span>
+           {/* Setup Warning / Info Box */}
+           <div className="bg-blue-900/30 border border-blue-700/50 rounded-xl p-4 mt-4">
+              <div className="flex items-center gap-2 text-blue-200 font-bold text-xs mb-1">
+                 <Info size={14}/>
+                 <span>Configuration Required</span>
               </div>
-              <p className="text-amber-200/70 text-[10px] leading-relaxed">
-                Assemble a new group and create a new test before using the chat features.
+              <p className="text-blue-200/70 text-[10px] leading-relaxed">
+                Assemble new group and create a new test are required to be configured first before using any chat.
               </p>
            </div>
 
@@ -322,7 +335,7 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
               ) : (
                 <div className="space-y-3">
                   <div className="flex items-center gap-2 text-xs font-medium text-green-400">
-                    <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
+                    <div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
                     {simulationResult.status}
                   </div>
                   <p className="text-[11px] text-gray-400">{simulationResult.message}</p>