Code Editor for app.R

library(shiny)
library(bslib)
library(shinyjs)

source("utils.R")

ui <- page_sidebar(
  title = "Recommendation Explorer",
  sidebar = sidebar(
    textInput("prompt", "Enter your recommendation prompt:", ""),
    sliderInput("discovery", "Discovery Level:", min = 0, max = 100, value = 50),
    actionButton("generate", "Generate Recommendations", class = "btn-primary")
  ),
  layout_columns(
    col_widths = c(12),
    card(
      card_header("Current Order"),
      layout_column_wrap(
        width = 1/4,
        uiOutput("orderItems")
      )
    ),
    card(
      card_header("Recommended Items"),
      layout_column_wrap(
        width = 1/4,
        uiOutput("recommendedItems")
      )
    )
  )
)

server <- function(input, output, session) {
  # Initialize reactive values
  order_items <- reactiveVal(list())
  recommended_items <- reactiveVal(list())
  current_positions <- reactiveVal(rep(1, 4))
  
  # Generate sample recommendations when button is clicked
  observeEvent(input$generate, {
    # This would be replaced with actual recommendation logic
    new_recommendations <- generate_recommendations(
      input$prompt,
      input$discovery,
      n_options = 10,
      n_slots = 4
    )
    recommended_items(new_recommendations)
  })
  
  # Render order items
  output$orderItems <- renderUI({
    items <- order_items()
    if (length(items) == 0) {
      return(h4("No items in order yet", class = "text-muted text-center"))
    }
    
    map(items, function(item) {
      card(
        full_screen = FALSE,
        height = 200,
        card_image(src = item$image_url, height = "150px"),
        item$name
      )
    })
  })
  
  # Render recommended items
  output$recommendedItems <- renderUI({
    items <- recommended_items()
    positions <- current_positions()
    
    if (length(items) == 0) {
      return(h4("Enter a prompt and click generate to see recommendations", 
                class = "text-muted text-center"))
    }
    
    map(seq_along(items), function(slot) {
      current_pos <- positions[slot]
      options <- items[[slot]]
      
      card(
        full_screen = FALSE,
        height = 250,
        div(
          style = "position: relative;",
          card_image(
            src = options[[current_pos]]$image_url,
            height = "150px"
          ),
          div(
            style = "position: absolute; top: 50%; transform: translateY(-50%);",
            div(
              style = "position: absolute; left: 5px;",
              actionButton(
                paste0("prev_", slot),
                icon("arrow-left"),
                class = "btn-sm"
              )
            ),
            div(
              style = "position: absolute; right: 5px;",
              actionButton(
                paste0("next_", slot),
                icon("arrow-right"),
                class = "btn-sm"
              )
            )
          )
        ),
        options[[current_pos]]$name,
        actionButton(
          paste0("add_", slot),
          "Add to Order",
          class = "btn-success btn-sm w-100"
        )
      )
    })
  })
  
  # Handle navigation buttons for each slot
  observe({
    lapply(1:4, function(slot) {
      # Next button
      observeEvent(input[[paste0("next_", slot)]], {
        positions <- current_positions()
        positions[slot] <- min(positions[slot] + 1, 10)
        current_positions(positions)
      })
      
      # Previous button
      observeEvent(input[[paste0("prev_", slot)]], {
        positions <- current_positions()
        positions[slot] <- max(positions[slot] - 1, 1)
        current_positions(positions)
      })
      
      # Add to order button
      observeEvent(input[[paste0("add_", slot)]], {
        items <- order_items()
        positions <- current_positions()
        recommended <- recommended_items()
        
        new_item <- recommended[[slot]][[positions[slot]]]
        items[[length(items) + 1]] <- new_item
        order_items(items)
      })
    })
  })
}

shinyApp(ui = ui, server = server)